Help us understand the problem. What is going on with this article?

AngularにSentryを導入する

More than 1 year has passed since last update.

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://xxxxxxxx@sentry.io/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);
    }
  }
};

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

べんり

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away