Sentry是一个流行的错误跟踪服务，允许跟踪您的制作应用程序中的错误。Sentry是一项付费服务，但它有一个慷慨的免费计划，在您的应用程序中，您将使用开源Raven-js客户端与Sentry接口。让我们来看看如何使用Sentry for Angular 2+应用程序。

安装

这是相当简单的开始。只需使用Yarn或npm安装Raven-js客户端：

1$ npm install raven-js --save
2
3# or with Yarn:
4$ yarn add raven-js

现在在您的应用程序模块中设置客户端：

 1[label app.module.ts]
 2import { BrowserModule } from '@angular/platform-browser';
 3import { NgModule, ErrorHandler } from '@angular/core';
 4import { AppComponent } from './app.component';
 5
 6import * as Raven from 'raven-js';
 7Raven
 8  .config('https://<YOUR-SENTRY-KEY>@sentry.io/<YOUR-PROJECT-ID>')
 9  .install();
10export class RavenErrorHandler implements ErrorHandler {
11  handleError(err: any): void {
12    Raven.captureException(err.originalError);
13  }
14}

提示：仅跟踪生产中的错误

您将希望Sentry仅跟踪您的生产应用程序中的错误，并在开发模式下将错误记录到控制台。

您可以使用类似下面的代码来提供RavenErrorHandler类作为仅在生产中的错误处理程序。请注意此处使用了环境variables：

 1[label app.module.ts]
 2// ...
 3
 4import { environment } from '../environments/environment';
 5import * as Raven from 'raven-js';
 6
 7Raven
 8  .config('https://<YOUR-SENTRY-KEY>@sentry.io/<YOUR-PROJECT-ID>')
 9  .install();
10
11export class RavenErrorHandler implements ErrorHandler {
12  handleError(err: any): void {
13    Raven.captureException(err.originalError);
14  }
15}
16
17export function provideErrorHandler() {
18  if (environment.production) {
19    return new RavenErrorHandler();
20  } else {
21    return new ErrorHandler();
22  }
23}
24
25@NgModule({
26  declarations: [AppComponent],
27  imports: [BrowserModule],
28  providers: [{ provide: ErrorHandler, useFactory: provideErrorHandler }],
29  bootstrap: [AppComponent]
30})
31export class AppModule {}

<$>[注]这就是😅。现在，生产中任何未处理的错误都将与堆栈跟踪一起报告在您的Sentry仪表板中。比依赖应用程序的用户报告问题要好得多！<$>

setUserContext

您可以使用setUserContext为Sentry设置用户上下文。这样就很容易知道是哪些用户触发了该错误：

 1// ...
 2
 3import * as Raven from 'raven-js';
 4
 5@Component({ ... })
 6export class AppComponent implements OnInit {
 7  ngOnInit() {
 8    Raven.setUserContext({
 9      username: 'Good Ol Paul',
10      email: '[email protected]',
11      id: '777'
12    });
13  }
14}

这样，错误将与有问题的用户相关联。当用户注销时，您可以通过不带参数调用setUserContext来重置上下文：

1Raven.setUserContext()

<$>[注]在真实的应用程序中，您可能希望从某种身份验证服务中设置和取消设置用户上下文。<$>

captureBreadcrumb

哨兵中的面包屑是导致错误的一系列事件。Sentry会在可能的情况下自动创建这些面包屑，但您也可以在需要的地方显式提供它们：

 1// ...
 2
 3import * as Raven from 'raven-js';
 4
 5@Component({ ... })
 6export class AppComponent implements OnInit {
 7  ngOnInit() {
 8    Raven.captureBreadcrumb({
 9      category: 'Authorization',
10      level: 'info',
11      message: 'User tried to access restricted area',
12      type: 'navigation'
13    });
14  }
15}

捕获异常

captureException允许您手动告诉Sentry捕获错误。如果您不想让Sentry作为应用的全局错误处理程序，而只是想触发手动异常捕获，则可以使用此选项：

1onChange(event) {
2  try {
3    event.target.value.map(x => {
4      console.log(x * 2);
5    });
6  } catch (e) {
7    Raven.captureException(new Error(`Oops, something went wrong: ${e}`));
8  }
9}

如上所述，vent.Target.value是一个字符串，而字符串上不存在map函数，因此Sentry将捕获以下错误：

1Oops, something went wrong: TypeError: event.target.value.map is not a function

Angular：使用 Sentry 跟踪错误

安装

提示：仅跟踪生产中的错误

更多使用示例

setUserContext

captureBreadcrumb

捕获异常