Hey, I installed the new unified Sentry SDK in my Angular 7 project, and everything was working as expected, after a few days I noticed that the application performance had reduced, I tried to debug it and found that when I initialise the Sentry SDK, angular starts running change detection at an interval of few ms and it doesn't stop. I think there might be some asynchronous event that is getting captured inside Angular zone. Below are the details to reproduce this issue.
Inside your app module add the following code
export class AppModule {
constructor(applicationRef: ApplicationRef) {
//Angular change detection is run inside applicationRef.tick
//method. We are overriding this to log whenever change detection
//happens.
const originalTick = applicationRef.tick;
applicationRef.tick = function() {
const before = performance.now();
originalTick.apply(this, arguments);
const after = performance.now();
console.log("CHANGE DETECTION:", after - before);
return originalTick;
}
//Initialise Sentry with your DSN
Sentry.init({
dsn: __YOUR_SENTRY_DSN__
});
}
You can check the logs before and after commenting Sentry init part.
This has a lot of impact on our application's performance.
Please note that this issue didn't occur in the deprecated raven-js library.
I tried running it outside Angular zone but no help. :(
Seems like this issue was because of window.console being overridden by breadcrumbs.instrumentConsole, which adds breadcrumbs for console. Since this was running inside angular zone a change detection was being triggered. Now if you put console.log inside Angular's tick method or ngOnChanges or other life cycle hooks, the console.log command will inturn trigger another change detection run and so on, ending up with an infinite loop. I am closing this issue for now, and will keep sure not to leave any log inside any lifecycle hook. Though I think these things should run outside Angular's Zone.
Most helpful comment
Seems like this issue was because of window.console being overridden by breadcrumbs.instrumentConsole, which adds breadcrumbs for console. Since this was running inside angular zone a change detection was being triggered. Now if you put console.log inside Angular's tick method or ngOnChanges or other life cycle hooks, the console.log command will inturn trigger another change detection run and so on, ending up with an infinite loop. I am closing this issue for now, and will keep sure not to leave any log inside any lifecycle hook. Though I think these things should run outside Angular's Zone.