How to find memory leak in mapboxgl

[PerryFinn]

mapbox-gl-js version:2.9.1

Question

Recently, I encountered a difficult problem, that is, frequently calling source SetData. I think this may be the reason why the memory keeps growing, which is more serious and fast on Safari. How can I troubleshoot this problem step by step. I lack experience in this field

Links to related documentation

[stepankuzmin]

Hi @Chen-913,

Thank you for using mapbox-gl-js. This issue tracker is for reporting bugs and feature requests. Please provide a minimal, complete, verifiable demonstration of the issue to help the maintainers and community understand and address the problem accurately.

You might also consider posting your question to https://stackoverflow.com/questions/tagged/mapbox-gl-js to ask the community for help.

[CptHolzschnauz]

I'm working on the same behaviour. I found out that when you call the setData (in my case the data is fetched as a JSON with a JS promise) BEFORE a recent setData on this set is completed, MapBox crash and Safari quits the process.

• Check the size of the data and the period you call setData.
• I don't think there is a memory leak
• MapBox: Maybe you can do some investigation and add a error handler (No new data before ready) and/or a callback after data isn injected and rendered
• MapBox: Maybe there is a bug when the setData function is "overloaded"

[PerryFinn]

I am very willing to provide test code. In the /public directory, if you use Safari for testing, the memory will keep rising. My team failed to find the reason after a long test @stepankuzmin The following is my warehouse address: https://github.com/Chen-913/memory-leak-demo.git

[CptHolzschnauz]

You have to put the folder 'data' into the folder 'public' - otherwise your example -> 404 It's a crazy example. You inejct every 20 ms the whole json over js variables in iterations and then vice versa, this code is too much for me. IMHO this is a memory leak by design, what do you expect? Anyway, what do you want to achieve with this? If you describe what you want to to with the map i (or others) may help you

[PerryFinn]

I want to be able to display 1-20 segments of tracks. This segment of tracks is dynamically updated, with the frequency of updating all tracks about once a second. I use the type layer of LineString to draw. I use the above demo to simulate this process to verify whether it will cause memory leakage.

[mholt]

It's possible that I'm seeing similar behavior -- also with Webkit browsers (not necessarily Safari specifically, but it is a Webkit browser): https://github.com/mapbox/mapbox-gl-js/issues/12589

I'm not calling setData() in my case, but I am calling setHTML() on a popup, which causes the freezing and memory leak.

What I did to debug it is eliminate my code binary-search style: put return or continue or comment out lines that remove about half the code every time. I do that until the bug goes away. Then I undo the last change and let a little more of the code run. I do this until the bug happens again. Then I remove a little more of the code. I do this until I get it down to 1 line or function call such that if I remove that one line, the bug does not happen.

Then set a breakpoint there.

Step through with the dev tools debugger and watch the memory use while you go through it.

[JoyousJohn]

Has anyone found a solution/alternative to setData?

[CptHolzschnauz]

There is no issue so there is no solution. It's possible to code a sort of DOS while injecting new data but nobody can prevent from bad coding.

[JoyousJohn]

Even after waiting for prior setData rendering to complete and the map to idle, memory isn't freed and subsequent setData calls continue to crash the browser though. Am I missing something? :(