fix(angular): Remove afterSendEvent listener once root injector is destroyed

packages/angular/src/errorhandler.ts

@@ -1,5 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import type { ErrorHandler as AngularErrorHandler } from '@angular/core';
+import type { ErrorHandler as AngularErrorHandler, OnDestroy } from '@angular/core';
 import { Inject, Injectable } from '@angular/core';
 import * as Sentry from '@sentry/browser';
 import type { ReportDialogOptions } from '@sentry/browser';
@@ -81,21 +81,28 @@ function isErrorOrErrorLikeObject(value: unknown): value is Error {
  * Implementation of Angular's ErrorHandler provider that can be used as a drop-in replacement for the stock one.
  */
 @Injectable({ providedIn: 'root' })
-class SentryErrorHandler implements AngularErrorHandler {
+class SentryErrorHandler implements AngularErrorHandler, OnDestroy {
  protected readonly _options: ErrorHandlerOptions;
 
- /* indicates if we already registered our the afterSendEvent handler */
- private _registeredAfterSendEventHandler;
+ /** The cleanup function is executed when the injector is destroyed. */
+ private _removeAfterSendEventListener?: () => void;
 
  public constructor(@Inject('errorHandlerOptions') options?: ErrorHandlerOptions) {
- this._registeredAfterSendEventHandler = false;
-
  this._options = {
  logErrors: true,
  ...options,
  };
  }
 
+ /**
+ * Method executed when the injector is destroyed.
+ */
+ public ngOnDestroy(): void {
+ if (this._removeAfterSendEventListener) {
+ this._removeAfterSendEventListener();
+ }
+ }
+
  /**
  * Method called for every value captured through the ErrorHandler
  */
@@ -119,17 +126,14 @@ class SentryErrorHandler implements AngularErrorHandler {
  if (this._options.showDialog) {
  const client = Sentry.getClient();
 
- if (client && !this._registeredAfterSendEventHandler) {
- client.on('afterSendEvent', (event: Event) => {
+ if (client && !this._removeAfterSendEventListener) {
+ this._removeAfterSendEventListener = client.on('afterSendEvent', (event: Event) => {
  if (!event.type && event.event_id) {
  runOutsideAngular(() => {
- Sentry.showReportDialog({ ...this._options.dialogOptions, eventId: event.event_id! });
+ Sentry.showReportDialog({ ...this._options.dialogOptions, eventId: event.event_id });
  });
  }
  });
-
- // We only want to register this hook once in the lifetime of the error handler
- this._registeredAfterSendEventHandler = true;
  } else if (!client) {
  runOutsideAngular(() => {
  Sentry.showReportDialog({ ...this._options.dialogOptions, eventId });

packages/angular/test/errorhandler.test.ts

@@ -546,5 +546,49 @@ describe('SentryErrorHandler', () => {
  expect(showReportDialogSpy).toBeCalledTimes(1);
  });
  });
+
+ it('only registers the client "afterSendEvent" listener to open the dialog once', () => {
+ const unsubScribeSpy = vi.fn();
+ const client = {
+ cbs: [] as ((event: Event) => void)[],
+ on: vi.fn((_, cb) => {
+ client.cbs.push(cb);
+ return unsubScribeSpy;
+ }),
+ };
+
+ vi.spyOn(SentryBrowser, 'getClient').mockImplementation(() => client as unknown as Client);
+
+ const errorhandler = createErrorHandler({ showDialog: true });
+ expect(client.cbs).toHaveLength(0);
+
+ errorhandler.handleError(new Error('error 1'));
+ expect(client.cbs).toHaveLength(1);
+
+ errorhandler.handleError(new Error('error 2'));
+ errorhandler.handleError(new Error('error 3'));
+ expect(client.cbs).toHaveLength(1);
+ });
+
+ it('cleans up the "afterSendEvent" listener once the ErrorHandler is destroyed', () => {
+ const unsubScribeSpy = vi.fn();
+ const client = {
+ cbs: [] as ((event: Event) => void)[],
+ on: vi.fn((_, cb) => {
+ client.cbs.push(cb);
+ return unsubScribeSpy;
+ }),
+ };
+
+ vi.spyOn(SentryBrowser, 'getClient').mockImplementation(() => client as unknown as Client);
+
+ const errorhandler = createErrorHandler({ showDialog: true });
+
+ errorhandler.handleError(new Error('error 1'));
+ expect(client.cbs).toHaveLength(1);
+
+ errorhandler.ngOnDestroy();
+ expect(unsubScribeSpy).toHaveBeenCalledTimes(1);
+ });
  });
 });