Skip to content

Sentry constantly triggering change detection in Angular2+ application. #1800

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
surajpoddar16 opened this issue Dec 17, 2018 · 2 comments
Closed

Comments

@surajpoddar16
Copy link

surajpoddar16 commented Dec 17, 2018

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.

@surajpoddar16
Copy link
Author

I tried running it outside Angular zone but no help. :(

@surajpoddar16
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant