So I’m developing a web application called MSC AniMet. This application is coded using Vue2 and Vuetify2 and it’s essentially a big OpenLayers map with a bunch of stuff and functionality added to it and works with WMS layers.
I recently made an update so the layers added would refresh whenever new information was available so that you’d always have Weather layers with the latest information on them and so you could use the application as a dashboard. It seemed to work fine, until 3 days after running it as a dashboard chrome crashed saying Out of Memory.
After some investigation, I’ve found using the chrome devtools that the culprit seemed to be IntersectObserver which was taking more and more memory at an alarming rate. Here’s 2 snapshots taken 15min apart:
The problem is that I’m not using an IntersectObserver inside my code so I have no clue what’s causing this. I have a feeling it comes from OpenLayers but that’s only my guess because of what libraries I’m using:
├── @mdi/[email protected]
├── @mdi/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
Here’s a permalink for the website for a reproducible example:
https://eccc-msc.github.io/msc-animet/?layers=RADAR_1KM_RRAI%3B0.75%3B0%3B1%3B0%3B1,RADAR_1KM_RSNO%3B0.75%3B0%3B1%3B0%3B0,RADAR_COVERAGE_RRAI%3B0.75%3B0%3B1%3B0%3B0&extent=-19416707,2902733,-620801,11820999
In the time controller, over the play button there’s a little cog icon, in there you can set the animation to loop and then just press the play button. If you check the memory usage you’ll see the IntersectObserver creeping up as time goes on.
I will put github links to show what the looping does in the code and what’s called:
- The Play button triggers https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/AnimationControls/PlayPauseControls.vue#L84, which then calls https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/AnimationControls/PlayPauseControls.vue#L131 to start the animation
- The Play button increments the DateIndex, which triggers this watcher: https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/TimeControls.vue#L388
- This calls this method: https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/TimeControls.vue#L183, which then updates the layers’ TIME parameter here https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/TimeControls.vue#L378
- Finally, the method awaits for the map’s rendercomplete event and throws and event https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Time/TimeControls.vue#L248, which is caught again by the step 2 which increments the DateIndex again and that is the entire loop.
I tried upgrading openlayers to the latest version (9.1) and it didn’t change anything (apart from another unrelated breaking change which is why I’m currently sticking to 6.15.1). I’ve also tried commenting out many of the imports like h264-mp4-encoder but it didn’t impact the Intersect problem.