Memory leak on iOS Safari

[mango-tree]

Hi, I'm a developer working in Cookieplace. We're using Vike in our service, Crepe.
We received a report that our service was stuttering and running hot on iOS Safari, and after investigating, we realized that the stuttering and hotness was caused by memory piling up and the GC running continuously.
When I checked why the memory is piling up, I saw in Vike that the memory is piling up in the history related logic.

So, I would like to ask two questions.

1. looking at this image, I see that the window objects are piling up, and I would like to know if this is related to the memory leak in Vike.

2. if it is a memory leak, I was wondering if you could fix it.

[brillout]

First of all, thanks for sponsoring 💚 it makes a big difference!

the memory leak in Vike

What makes you think the memory leak is because of Vike?

[brillout]

window objects are piling up

Can you elaborate on that?

When I comment pushHistoryState(), replaceHistoryState(), monkeyPatchHistoryPushState() functions' logic in vike/dist/esm/client/client-routing-runtime/history.js, there is no memory leak

• If you only comment out pushHistoryState() and replaceHistoryState() does it fix the memory leak?
• If you only comment out monkeyPatchHistoryPushState() does it fix the memory leak?

I found that Chromium keeps 3~8 pageContexts, but Safari keeps more than 30 pageContexts

What do you mean with "keeps pageContexts"? Do you mean with the states passed to window.history.pushState(state, '', url)?

[mango-tree]

Sorry for late reply.

If you only comment out pushHistoryState() and replaceHistoryState() does it fix the memory leak?

yes, I found that the memory is not increase too much when I capture memory with console.takeHeapSnapshot().

If you only comment out monkeyPatchHistoryPushState() does it fix the memory leak?

No, it happens again.

What do you mean with "keeps pageContexts"? Do you mean with the states passed to window.history.pushState(state, '', url)?

The variables which define in renderPageNominal()

  async function renderPageNominal() {
    const onError = async (err: unknown) => {
      await renderErrorPage({ err })
    }

    const pageContext = await getPageContextBegin()
    ...

[brillout]

If you only comment out pushHistoryState() and replaceHistoryState() does it fix the memory leak?

yes, I found that the memory is not increase too much when I capture memory with console.takeHeapSnapshot().

If you only comment out monkeyPatchHistoryPushState() does it fix the memory leak?

No, it happens again.

Maybe it's an issue with iOS Safari? Your anlysis, and the fact that this only happens with iOS Safari, is an indication that the issue resides on iOS Safari's side. (Or maybe some other tool in your stack that monkey patches window.history.pushState() or window.history.replaceState().)

Does iOS Safari has known memory issues with the History API?

I found that Chromium keeps 3~8 pageContexts, but Safari keeps more than 30 pageContexts [...] The variables which define in renderPageNominal()

That shouldn't happen. Can you reproduce this with a new fresh and minmal Vike app?

Also, can you reproduce the memory issue with a minimal Vike app?

[mango-tree]

Maybe it's an issue with iOS Safari? Your anlysis, and the fact that this only happens with iOS Safari, is an indication that the issue resides on iOS Safari's side. (Or maybe some other tool in your stack that monkey patches window.history.pushState() or window.history.replaceState().)

I have an issue with iOS Safari & OS X Safari (in M2 MacBook).

Does iOS Safari has known memory issues with the History API?

I don't know whether Safari has known memory issues. I searched Webkit Bugzilla, but I didn't find it.

That shouldn't happen. Can you reproduce this with a new fresh and minmal Vike app?
Also, can you reproduce the memory issue with a minimal Vike app?

I can't reproduce from vike example. I'll make minimal app, but it would take time. I use react-relay on the website, and this might be the cause.

[brillout]

I can't reproduce from vike example. I'll make minimal app, but it would take time. I use react-relay on the website, and this might be the cause.

Maybe it's unrelated to Vike then.

[mango-tree]

I solved it by update Vike packages & refactor route structure. Thanks for investigating with us!

[brillout]

I'm glad you resolved the issue! Thank you for sponsoring 💚 it makes a real difference.