Sentry-javascript: Angular Integration Issue - console.log calls cause Change detection to run

[ibedard16]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
  Related issue found. Re-opening, because the author closed it and it's definitely still an issue.
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

• [x] @sentry/browser
• [ ] @sentry/node
• [ ] raven-js
• [ ] raven-node _(raven for node)_
• [ ] other:

Version:

4.5.4

Description

Using Sentry in an Angular project will cause Angular's change detection to fire any time console.log is called. This is because of Sentry's breadcrumb feature, which logs whatever was logged to the console, and how that interacts with zone.js.

I do not understand all of the mechanics behind it, but zone.js triggers change detection after the code to add a breadcrumb exits. An easy way to prevent the problem would be to wrap console.log statement to runOutsideAngular, which prevents zone.js from running change detection. However, the only two ways of doing would be either wrapping every call to console.log (which would be very unwieldy and not-obvious) or override the global console.log function with a different function that calls the original function outside of Angular.

I'm not entirely certain what can be done on Sentry's side to prevent the problem, as any solution would likely be very Angular-specific, in a package meant to be used with a variety of different frameworks. As such, I'm opening issues both here and against the Angular repo.

Edit: https://github.com/angular/angular/issues/28647

Demo repro: https://github.com/ibedard16/sentry-recursion-demo
Instructions on how to run it are in the readme.

[ibedard16]

Update: leaving the demo running for long enough crashed Chrome.
I don't mean it caused the tab to crash, I mean Chrome itself - every tab and window I had opened - crashed.
That's not a good thing.

[ibedard16]

The Angular side of this issue was closed as won't fix. In the comments, the closer said

I don't think either of the two libraries [zone.js and sentry] can do much to mitigate this. ... I don't think there is a feasible fix for either side

[omares]

~In version 5.2.0 this issue still exists. Just stumbled across the problem in our application and cant find any solution besides not using any console calls. Using zone.runOutsideAngular does not fix the problem entirely as it still triggers a lot of errors.~

~I will continue to investigate, but my hopes are not high to solve this.~

~Any hints or tips on how to tackle this would be really appreciated.~

Edit: I have to revise the statement above, the issue we faced did not occur due to console.log and the custom wrapping. We had an issue in our application that caused angulars change detection to be retriggered in an endless loop. Applying a best practice (writing the result into a property of the component instead of calling the service directly inside the template) fixed the issue for us.

[ibedard16]

@omares Your issue might have been related to this other ticket of mine: https://github.com/angular/angular/issues/27804

[michelepatrassi]

same issue, does not only happens for lifecyle methods but also for getters.

There is any plan for this to be addressed?

[kamilogorek]

I'll need to find some time to dig into angular zone package to see why/how it happens.

In the meantime, if console.log breadcrumbs are not crucial, they can be separately disabled with:

```js
Sentry.init({
// ...
integrations: [new Sentry.Integrations.Breadcrumbs({ console: false })]
// ...
})

[thduttonuk]

Adding this causes an infinite loop when calling console.error

const integrations = [ new CaptureConsole({ levels: ['error'], }), ];

console.error triggers CD to run so we get in a loop if a template has an error.