Angular 5项目配置Sentry：如何在@NgModule的providers中配置指定对象？

我来帮你把这段Sentry配置代码补全并规范好，确保能在Angular 5项目中正常生效：

第一步：安装依赖 #

首先需要安装raven-js包，执行以下命令：

npm install raven-js --save
# 或者用yarn
yarn add raven-js

第二步：在AppModule中配置Sentry #

把你的代码补充完整，关键是要在@NgModule的providers数组中替换默认的ErrorHandler为自定义的RavenErrorHandler，完整代码如下：

import * as Raven from 'raven-js';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { AppComponent } from './app.component';

// 初始化Raven，替换成你自己的Sentry项目DSN
Raven
  .config('https://YOUR_SENTRY_DSN_KEY_HERE')
  .install();

// 自定义错误处理器，实现Angular的ErrorHandler接口
export class RavenErrorHandler implements ErrorHandler {
  handleError(err: any): void {
    // 捕获异常，优先传递originalError，避免Angular包装后的错误信息丢失
    Raven.captureException(err.originalError || err);
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  // 关键：替换默认的ErrorHandler为我们自定义的RavenErrorHandler
  providers: [
    { provide: ErrorHandler, useClass: RavenErrorHandler }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

关键注意点 #

• 一定要把https://KEY替换成你自己Sentry项目的DSN地址，这个可以在Sentry项目设置里找到
• 在handleError方法中，加入err.originalError || err的判断，因为Angular会把原始错误包装一层，直接传递err可能导致Sentry捕获的信息不完整
• 确保你的Angular 5版本和raven-js版本兼容，一般来说raven-js的最新版本都支持Angular 5

内容的提问来源于stack exchange，提问作者Aiden Campbell