Description
- Review the documentation: https://docs.sentry.io/
- Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
Possible recursion error in Sentry Browser SDK #2611 and RangeError: Maximum call stack size exceeded #2470 seem similar to this, but are not really the same imho - Use the latest release: https://github.com/getsentry/sentry-javascript/releases
- Provide a link to the affected event from your Sentry account -> Not needed, reproducible with an arbitrary DSN
Package + Version
-
@sentry/browser5.25 -
@sentry/node -
raven-js -
raven-node(raven for node) - other:
Version:
vue 2.6.12
vue-router 3.4.6
bootstrap-vue 2.17.3
sentry-javscript 5.25
Description
We have a Vue application and we encountered an issue when we added sentry. We can reproduce the situation in Chrome/Chromium/Firefox both Linux,Mac and Windows (sometimes the window just freezes without maxing out cpu usage) so it does not seem to be fully platform dependent. I tried to narrow down the issue and I provide a minimal reproducible example (70 lines of html) along with gif recordings of the problem.
I am open to providing more information, helping with the investigation or even creating a PR if pointed the right way.
The Setup
The Vue application uses these libraries:
- vue-router = standard library for displaying views on specific routes
- bootstrap-vue = library with various components which look good (in our example, we use the scrollspy directive which it provides https://bootstrap-vue.org/docs/directives/scrollspy )
Esentially what we have is a bunch of blocks below each other (left) and a navigation with fixed position (right) which includes a button for each of the blocks on the page. We want to achieve a standard behaviour which includes:
- when you scroll around the page, the currently visible block is highlighted in the navigation
- when you scroll around, your url hash is dynamically updated to reflect the currently scrolled block
- when you click a block in the right menu, you are taken to that block on the page (standard href behaviour)
So essentially, it works and looks like this (note the cpu usage in bottom right, as expected some load is on the windowserver but all seems fine):
The problem
The moment we add sentry, with an existing dsn, or with the example text like this:
Sentry.init({
dsn: "https://[email protected]/0",
integrations: [new Sentry.Integrations.Vue({ Vue, attachProps: true })],
})
This is what happens - after a while, the cpu usage of the browser process jumps to 100% and the page starts to lag:
Eventually (depends on the machine, but on my mbp2017 it is about 30 secs), the browser console starts to fill with a bunch of errors (call stack size limit exceeded and 429+400 from sentry). During this, we also get rate limited by sentry (in our sentry project, running into this resulted in about 1000 events over those 30 seconds).
Reproduction
I am providing a minimal reproducible example for this here (single html file, 70 lines):
https://github.com/Zajozor/reproducible/blob/main/sentry-javascript/index.html
(Be sure to turn off uBlock or other blocker that might block sentry if you try this 😅 )
The problem happens when you open the page, and just do what is depicted on the gif above for a while (may take from 5 secs to 20 secs for it to kick in). When you comment the lines 66-69 then the problem disappears (ie. the site has expected cpu usage).
It might be that we are doing something wrong in our code, but there is literally no issue with it until you enable sentry.
Thanks for your time :)