Spotlight overlay crashing due to browser being out of memory

[xt0rted]

I recently added Spotlight via the CDN with Sidecar running in Docker to an old AngularJS application using Sentry 7.99. At the time it worked great, then the branch sat for a couple weeks. Today I picked it back up and now devtools keeps pausing saying it's doing that to prevent an out of memory crash. With devtools not open the tab just randomly crashes.

When devtools pauses it's always on one of these two lines:

spotlight/packages/overlay/src/App.tsx

Line 69 in 79d9beb

[integrationName]: [...(prev[integrationName] || []), newIntegrationData],

spotlight/packages/overlay/src/components/Overview.tsx

Line 22 in 79d9beb

const processedEvents = integrationData[integration.name]?.map(container => container.event) || [];

Checking prev or integrationData showed it had over 150k items at one point. This happens without even interacting with the site. A fresh page load that sits for a minute can have 50k+ items in the list, and 3x that a few minutes later. This seems to be worse when traceSampleRate is set to 1 instead of something lower, or just completely off.

Nothing's showing in Sidecar when I go directly to http://localhost:8969/, but it is showing in the overlay on my site.

I was loading the latest version of the overlay from the CDN (as the docs show), but if I revert back to v2.3.0 the issue goes away. This seems like something related to #509 but I'm not sure what exactly changed in later versions to stop Spotlight from sending to the Docker instance of Sidecar.

I'm not using the iife bundle because I wanted to change the config. This is how I'm loading it:

<script type="module">
    import { console, init, sentry } from 'https://unpkg.com/@spotlightjs/overlay@2.3.0/dist/sentry-spotlight.js';

    init({
        anchor: 'bottomLeft',
        integrations: [sentry(), console()],
    });
</script>

[BYK]

Hi @xt0rted and thanks for the report! So there are a few things going on:

1. The newer version uses a direct communication channel for the frontend bit so you don't need the sidecar. This was to make the IIFE version work out of the box with a "just drop this script" experience
2. Since the newer version does not rely on the sidecar for buffering, it buffers events in local indexed DB storage. So deleting local storage should "fix" your immediate lock up issue.

That said there are still two major issues we should fix on our end:

1. The operational complexity of the integrationData line is far from optimal (the first line you pointed out) -- Turns out this is the best and most efficient way for now.
2. Apparently we should add a max number of events that we store on top of an expiry date
3. For some reason the console() integration causes these excessive events so that needs to be investigated. I'll file a separate issue for that.

Finally, we just introduced __spotlight.initOptions = {} where you can pass init options to Spotlight so you can use the drop-in IIFE version. It doesn't support integrations yet (as they won't be available as functions ahead of time) but if there's demand we'll work on that bit too.

[BYK]

@xt0rted thanks again for the report and apologies for the issue. Don't know how I didn't catch this earlier! A new patched version is being released right now and hopefully by the time you read this message, it should be available.

[xt0rted]

@BYK I just gave v2.5.1 a try and the issue seems to be resolved.

With the recent changes should I be seeing events logged to my instance of sidecar that's running inside docker, or are they only stored in the browser now? I'm running a .net backend with angularjs frontend, and I'm seeing the .net stuff logged to docker, but the angular stuff doesn't seem to show up over there. I see both the .net & angular stuff in the UI inside my site though.

[BYK]

@xt0rted thanks a lot for reporting back! Yes, that's exactly what I'd expect to see if Spotlight UI is running on the same page with your front end. We made this change to let people try Spotlight with just a script tag on their front end. We bypass the sidecar when we know we can talk to the Spotlight UI directly.