Redirect to a new page when Sentry catch error

I am using Sentry and Angular.

When an error happens, and after it has been send, I would like to redirect users to an error page.

But I don’t find a proper way.

  • Redirect in beforeSend is not ok as error has not been sent, and a redirection would break it.
  • implement a custom errorHandler is a good solution, but I do not want to manually copy the already existing SentryErrorHandler. So I tried extending it, but since this service is injectable, doing a new
@Injectable({ providedIn: 'root' })
class SentryCustomErrorHandler extends SentryErrorHandler {
  constructor(@Inject('errorConfig') config: ErrorHandlerOptions) {
    super(config);
  }

  handleError(error: unknown): void {
    super.handleError(error);
    window.location.href = '/error';
  }
}

/**
 * Factory function that creates an instance of a preconfigured ErrorHandler provider.
 */
function createSentryCustomErrorHandler(config?: ErrorHandlerOptions): SentryErrorHandler {
  return new SentryCustomErrorHandler(config);
}

export { createSentryCustomErrorHandler, SentryCustomErrorHandler };

with another Injectable breaks angular.

I can’t find a way to execute code after an error is sent…

I had similar issue, solved it by removing the injectable decorator.
To pass dependencies, I used useFactory, and moved the configuration to the factory:

{provide: ErrorHandler, useFactory: createErrorNotification, deps: [MatSnackBar]},
class ErrorNotification extends SentryErrorHandler {
  constructor(@Inject('errorConfig') config: ErrorHandlerOptions, private _snackBar: MatSnackBar) {
    super(config);
  }

  handleError(error: any) {
    console.log("Handling error", error);
    console.log(this._snackBar)
    // Pass it to sentry error handler
    super.handleError(error);
  }
}

/**
 * Factory function that creates an instance of a preconfigured ErrorHandler provider.
 */
function createErrorNotification(_snackBar: MatSnackBar): SentryErrorHandler {
  return new ErrorNotification({showDialog: false}, _snackBar);
}

export { createErrorNotification, ErrorNotification };

To keep the configuration in the module, you may can write inline factory like sentry trace service:
{provide: APP_INITIALIZER, useFactory: () => () => { ... factory content with config ... }, deps: [Sentry.TraceService], multi: true,},