AngularにSentryを導入する

• Angular5(@angular/* 5.2.0)
• sentry(https://sentry.io)

1. 何ができるか？

• 発生した例外を検知できる
• 例外は管理コンソールで確認できる
• OSやブラウザ等の環境情報が取れる
• スタックトレース
• issue化、statusやassign管理
• Slack通知

2. 導入

とりあえずhttps://sentry.io にアクセスしてプロジェクトを作ってAngularを有効にしたりします

$ npm install raven-js --save

3. 初期化と検知設定

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import * as Raven from 'raven-js';

Raven.config('https://[e-mail]/xxxxxx').install();
export class RavenErrorHandler implements ErrorHandler {
  handleError(err:any) : void {
    Raven.captureException(err);
  }
};

@NgModule({
  providers: [
    { provide: ErrorHandler, useClass: RavenErrorHandler },
  ],
})

4. 環境を設定する

初期化までやってしまえば、例外のキャプチャは開始されます
何かしらの例外が発生すると、https://sentry.io に表示されます

ただ、このままだとローカルでのng serve時などの例外も全て検知されてしまいます
environmentsを定義して、developmentやproductionのみ検知する等の対策が必要です

4-1. environemtnsを定義する

Angularではsrc/environments/environment.{env}.tsのように設定ファイルを置いておくと、
ng serve --{env}で設定を切り替える事ができます

今回は、devとprodの2環境を用意して、prodのみエラー検知ができるようにします

src/environments/environemtn.prod.ts

export const environment = {
  production: false,
  development: true,
};

src/environments/environemtn.dev.ts

export const environment = {
  production: false,
  development: true,
};

4-2. ng serveやng buildで環境を切り替える

prod環境で実行、ビルドする場合

$ ng serve --prod
$ ng build --prod

dev環境で実行、ビルドする場合

$ ng serve --dev
$ ng build --dev

もちろんステージング等の環境を増やしていく事もできます
オプションをつけない、つまりenvironment.tsをdev環境にしてしまう手もあります

4-3. 検知設定を変更

export class RavenErrorHandler implements ErrorHandler {
  handleError(err:any) : void {
    if (environment.production) {
      Raven.captureException(err);
    }
  }
};

これで本番環境のみ、例外を検知するようになります

べんり

本番環境で起きた不具合や例外をいち早く検知できるのは非常にありがたいです
特にデータに依存するような例外だと、再現性がなくデバッグに非常にコストがかかります

そういった例外を詳細に確認できたり通知できたりするのでかなり便利です