はじめに

Angular のチュートリアルを終えて、簡単なアプリケーションの Showcase のようなものを Firebase 上に運用しています。
今回は Angular のアプリケーションに対して Sentry というerror trackingツールを組み込んでみます。

fir-angular-showcase.web.app

angular showcase

Angular でSentry を設定する

Angular に限った話ではありませんが、リリースしたアプリケーションがユーザー申告でしかエラーに気づけない。という状況はあまり好ましくありません。
今回は Sentryというトラッキングツールを利用して能動的かつ自動的にエラーを拾ってみます。

Sentryの導入については公式ドキュメントにAngularの例が書かれています。
勝ったも同然ですね。

Sentry

アカウントを作成しアプリケーションを登録すると以下の画面のように Client Keys として DSN というURLが払い出されるのでメモしておきます。
今回はシンプルに利用しますが、認証であったりかなり高機能です。

Angular

クライアントライブラリをインストールします。

$ npm install raven-js --save

Angular 側の設定もとても簡単で app.module.ts に以下をコピペするだけです。
先ほど Sentry で入手した DSN を登録してください。

import * as Raven from 'raven-js';
import { ErrorHandler } from '@angular/core';
Raven
  .config('<YOUR DSN>')
  .install();
export class RavenErrorHandler implements ErrorHandler {
  handleError(err: any): void {
    if (environment.production) {
      Raven.captureException(err);
    }
  }
}

まとめ

Angular でSentry を設定することができました。