Ugo

Webエンジニアのためのプログラミング情報サイト

  • 高機能モニタリングツールSentryを徹底解説！Recat・Angularアプリへの導入方法。

高機能モニタリングツールSentryを徹底解説！Recat・Angularアプリへの導入方法。

高機能モニタリングツールSentryを徹底解説！Recat・Angularアプリへの導入方法。

この記事では、高機能なモニタリングツールSentryについてその概要とアプリへの導入方法を説明する。

Webアプリケーションがより高機能で複雑性を増すなか、フロントエンドでのログ収集の必要性が高まっている。

ログの収集はバグ修正を助け、パフォーマンスの監視もできるなどメリットも多い反面、プライバシーやデータ保護の観点から注意しなければいけない点も多い。

この記事がモニタリングツールの導入を検討する企業の助けとなれば幸いだ。

目次

Sentryとは?

Sentryはサンフランシスコに本拠を置く企業「SENTRY」によって開発されているアプリケーションのモニタリングツール。

同様のツールは数多くあるがSentryはそれらの中でもっとも高機能で、もっともよく導入されている。

おもにウェブやスマートフォンを含めたフロントエンドアプリケーションのログ収集に使用されるがモバイルゲームでの導入事例も多い。

なお、ログを収集して活用するという点からGoogle Analyticsとも共通する部分があるが、Sentryはよりエラーやパフォーマンス改善といったアプリで発生する問題を解決するために使われる。

Sentryの使用例

Sentryはモニタリングツールと称されるが、高機能で様々な目的で使用することができる。

以下はその使用例だ。

  • アプリのリリース＆イシュー管理
  • アプリのパフォーマンスチェック
  • ログ解析によるユーザビリティの改善
  • ログによりバグの発生原因を分析する

カスタマイズ可能なダッシュボード

Sentryの料金体系

Sentryは機能別に4つの料金プランが用意されている。

フリーのDeveloperプランであれば無料で使用できるうえに、14日間すべての機能が使えるBusinessプランを無料で試すことができる。

Sentryの料金プランについてはこちらのページを参照してほしい。

Sentryはオンプレミス版として自前のLinuxサーバ－で動作させることもできる。

Sentryドキュメンテーション（英語）

Sentryのおもな機能

Sentryは高機能なモニタリングツールであり多くの機能を備える。

この章では代表的な機能を紹介したい。

  • チームのコラボレーション機能
  • SlackやGitLabへのインテグレーション機能
  • 条件設定が可能なアラート機能
  • カスタマイズ可能なダッシュボード
  • 環境・リリースバージョンごとのログ管理
  • バグリポートの収集機能

*料金プランにより利用できる機能は制限される。

チームコラボレーション機能

まずはチームでのコラボレーション機能について説明したい。

当然といえるかもしれないがSentryではチームを作成してプロジェクトのデータをチーム内で共有することができる。

チームメンバーの追加はメンバーのEメールアカウントに招待メールを送ることによっておこなう。

また、メンバ－ごとに違う権限を与えることもできる。

豊富なインテグレーション機能

Sentryは開発現場で使用される様々なアプリのインテグレーション機能を備えている。

SentryにはSlack・GitHubなど様々なアプリへのインテグレーション機能が用意されている。

これを使用してSlackやTeamsに自動でアラート通知をおこなったり、GitLabと連携させGitでのコミットをSentryのリリースと紐づけるなどの使い方ができる。

条件設定が可能なアラート機能

Sentryにはアラート機能が備わっており、新しいエラーが発生した際やシステムのパフォーマンスに異常が発生した際に自動でアラート送信をおこなうことができる。

アラート送信はあらかじめ設定した条件に基づきおこなわれる。

WHEN・IF・THENといった使いなれた条件式によって、複雑な条件設定も簡単におこなうことができる。　

アラートの設定画面

Sentryをアプリに導入する

Sentryをアプリに導入する方法を見てみよう。

SentryはReact・Angular・Vueなど多くの有名フレームワークで簡単に導入することができる。

アプリへの導入をおこなうまえに、Sentryへ自分のアカウントを作成してeメールアカウントの認証作業を済ませておこう。

Sentryサインアップページ

Reactアプリへの導入方法

ReactアプリへのSentryの導入方法を確認しよう。

なお、Sentryにて新しいReactプロジェクトを作成すると導入方法が表示させるのでそれを見ながら導入をおこなってもいい。

Sentryライブラリを取り込む

まずはReactプロジェクトにSentryライブラリを取り込む。

以下のコマンドを実行する。

npm install --save @sentry/react @sentry/tracing

index.jsでSentryを初期化する

プロジェクトのindex.jsファイルを開く。

Sentryライブラリのインポートを追加する。

import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

Reactアプリの起動時にSentryを初期化する。

Sentry.init({
    dsn: "{dsn}",
    integrations: [new Integrations.BrowserTracing()],
    tracesSampleRate: 1.0,
});

DSNはSentryコンソールの「Settings ⇒ Client Keys(DSN)」からコピーする。

データが送信されたか確認する

ReactアプリにてSentryが正しく導入されていれば、Sentryにてプロジェクトへの通信（transaction）が確認できるはずだ。

Angularアプリへの導入方法

AngularアプリへのSentryの導入方法を確認する。

Reactアプリと同様、新しいAngularプロジェクトを作成すると導入方法が表示させるのでそれに従って作業をおこなってもいい。

Sentryライブラリを取り込む

まずは自分のAngularプロジェクトにSentryライブラリを取り込む。

以下のコマンドを実行する。

npm install --save @sentry/angular @sentry/tracing

main.jsでSentryを初期化する

プロジェクトのmain.jsファイルを開く。

Sentryライブラリのインポートを追加する。

import * as Sentry from '@sentry/angular';
import {Integrations } from '@sentry/tracing';

Angularアプリの起動時にSentryを初期化する。

Sentry.init({
  dsn: '{dsn}',
  integrations: [
    new Integrations.BrowserTracing({
      tracingOrigins: ['localhost', 'https://yourserver.io/api'],
      routingInstrumentation: Sentry.routingInstrumentation,
    }),
  ],
  tracesSampleRate: 1.0,
});

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(success => console.log(`Bootstrap success`))
  .catch(err => console.error(err));

app.moduleでエラ－ハンドラーを設定する

app.moduleファイルを開き、ngModuleアノテーションのprovidesにSentryのエラ－ハンドラーを追加する。

  providers: [
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler({
        showDialog: true,
      }),
    },
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [Sentry.TraceService],
      multi: true,
    },
  ]

データが送信されたか確認する

AngulrアプリにてSentryが正しく導入されていれば、Sentryにてプロジェクトへの通信（transaction）が確認できるはずだ。

MENU