Sentry 捕获错误时重定向到新页面

Posted 2023-02-21

【中文标题】Sentry 捕获错误时重定向到新页面

【英文标题】：Redirect to a new page when Sentry catch error

【发布时间】：2021-12-21 23:14:55

【问题描述】：

我正在使用 Sentry 和 Angular。

发生错误时，在发送后，我想将用户重定向到错误页面。

但是我没有找到合适的方法。

beforeSend 中的重定向不正确，因为尚未发送错误，并且重定向会破坏它。 实现自定义errorHandler 是一个很好的解决方案，但我不想手动重新编码SentryErrorHandler 我尝试扩展它，但由于该服务是可注入的，所以做一个新的

@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 ;

与另一个 Injectable 打破角度。

我找不到执行代码的方法after 发送错误...

【参考方案1】：

sentry-error-handler.class.ts

import  ErrorHandler, Injectable, isDevMode  from '@angular/core';
import  BrowserOptions, captureException, configureScope, init  from '@sentry/browser';
import  User  from '@sentry/types';

export class SentryErrorHandlerOptions 
  private readonly _options: BrowserOptions;

  get options(): BrowserOptions 
    return this._options;
  

  constructor(options: BrowserOptions) 
    this._options = options;
  


@Injectable( providedIn: 'root' )
export class SentryErrorHandlerService 
  setUser(sentryUser: User): void 
    configureScope(scope => 
      scope.setUser(sentryUser);
    );
  


@Injectable()
export class SentryErrorHandler implements ErrorHandler 

  constructor(
    options: SentryErrorHandlerOptions
  ) 
  
    init(
      ...options.options,
      beforeSend: (event: any) => 
        return event;
      
    );
  

  handleError(error: any): void 
    this.captureException(error);
    console.error(error);
    window.location.href = '/error';
  

  /**
   * Wrapper - do not send errors in DevMode (ng serve)
   * @param exception
   * @private
   */
  private captureException(exception: any): void 
    if (isDevMode()) 
      return;
    
    captureException(exception);
  

sentry-error-handler.module.ts

import  ErrorHandler, InjectionToken, ModuleWithProviders, NgModule, Optional, SkipSelf  from '@angular/core';
import  CommonModule  from '@angular/common';
import  SentryErrorHandler, SentryErrorHandlerOptions  from './sentry-error-handler.class';
import  BrowserOptions  from '@sentry/browser';

export const FOR_ROOT_SENTRY_OPTIONS_TOKEN = new InjectionToken<BrowserOptions>('forRoot() SentryErrorHandler options');

@NgModule(
  imports: [CommonModule]
)
export class SentryErrorHandlerModule 
  constructor(@Optional() @SkipSelf() parentModule: SentryErrorHandlerModule) 
    if (parentModule) 
      throw new Error(
        'SentryErrorHandlerModule is already loaded. Import it in the AppModule only using .forRoot(...)'
      );
    
  

  /**
   * This module have to be initialized by using forRoot()
   * @param options
   */
  static forRoot(options: BrowserOptions): ModuleWithProviders<SentryErrorHandlerModule> 
    return 
      ngModule: SentryErrorHandlerModule,
      providers: [
        // Translate raw OPTIONS to SentryErrorHandlerOptions,
        // so later we can inject it into factory function
        
          provide: FOR_ROOT_SENTRY_OPTIONS_TOKEN,
          useValue: options
        ,
        
          provide: ErrorHandler,
          useClass: SentryErrorHandler
        
      ]
    ;
  

在 app.module.ts 里面

SentryErrorHandlerModule.forRoot(
          dsn: 'DSN FOR YOUR ACCOUNT',
          environment: environment.envName,
          release: environment.version
        )