フロントエンドにSentryを導入する

Sentry Vue Vite フロントエンド 開発ツール

みなさんこんにちはraraya99です。4月にフロントエンドエンジニアとして入社し、ついに私の番がやってきました。 フロントエンドのSentry担当に任命されたため、今回は導入記事を書こうと思います。(おそらく3部作)

はじめに

弊社はフロントエンドがVue.js、バックエンドがRuby on Railsを使用しておりバックエンドでは既にSentryが導入されております。 そのためフロントエンドでのSentry導入を強く求められております。

目次

1. Sentryとは？

Sentryはエラーモニタリングとトラブルシューティングのプラットフォームです。 リアルタイムでエラー情報を収集し、開発者に通知することができます。Sentryはエラートラッキングツール以上の機能が存在します。

1.1. Sentryでできること

①エラーのリアルタイムモニタリング

アプリケーションで発生するエラーをリアルタイムでモニタリングし、その情報を詳細に収集します。

②ユーザーとエラーの関連付け

エラーが発生した際に、そのエラーがどのユーザーに影響を与えているのかを特定することができます。

③エラーの分析

収集されたエラー情報を基に、エラーの原因や影響を受けるユーザー、発生頻度などを分析することができます。

④アラートと通知

特定のエラーが発生した場合や、エラーの発生頻度が一定以上になった場合に、開発者に対してアラートや通知を送ることができます。

⑤パフォーマンスモニタリング

アプリケーションのパフォーマンスを測定し、遅延やボトルネックが発生している箇所を特定することができます。

⑥イシュートラッキングとの統合

JIRA、GitHub、GitLabなどのイシュートラッキングツールと統合することができ、エラー情報を自動的にイシューとして登録することができます。

1.2. 今回やること

上記の①エラーのリアルタイムモニタリングと②ユーザーとエラーの関連付けを行います。

2. なぜフロントエンドにSentryが必要なのか？

①ユーザー体験の向上

エラーが発生した場合、それをすぐにキャッチして修正することで、ユーザー体験を向上させることができます。

②エラーの即時検出

リアルタイムでエラーを検出することで、問題が拡大する前に対処することができます。

③デバッグ作業の効率化

詳細なエラーレポートを用いてデバッグ作業を効率的に行えます。

3. 前提条件

  • Node.jsとnpmがインストールされている
  • Vue.jsプロジェクトが既に存在する
  • Sentryアカウントが既に存在する

4. 導入手順

公式の手順書を参考にしながら作業を進める Vue | Sentry Documentation

4.1. インストール

npm install --save @sentry/vue

4.2 設定

設定値は随時見直し中です。契約プランや環境にあわせた設定をする必要があります。

Sentry.init({
  Vue:          app,
  dsn:          '**************************************************************************',
  environment:  env,
  integrations: [
    new Sentry.BrowserTracing({  // ブラウザでのトレーシング（パフォーマンス測定等）を有効にする
      routingInstrumentation: router ? Sentry.vueRouterInstrumentation(router) : undefined,  // Vue Routerのトレーシングを有効にする
      }),
      new Sentry.Replay(),
    ],
    tracesSampleRate:         1.0,  // トレーシングのサンプリングレート（この場合、100%のトランザクションが取得される）
    replaysSessionSampleRate: 0.1,  // セッションのリプレイサンプリングレート（10%のセッションでリプレイが取得される）
    replaysOnErrorSampleRate: 1.0,  // エラーが発生した場合のセッションリプレイサンプリングレート（100%のエラーセッションでリプレイが取得される）
});

5. エラー通知

エラーハンドラの設定、Vue3移行中のためVue2とVue3のエラーを仕分けできるようにtagを付けました。

import { captureException } from '@sentry/browser';

captureException(err, { tags: { framework: 'Vue3' });

6. エラー通知のカスタマイズ

ユーザー情報を追加(ユーザ情報のstoreに格納するとき、あわせてセット)することによって、エラーを起こしたユーザの特定が可能になります。

// Sentryにユーザー情報をセット
Sentry.setUser({
  id: user.id,
  group:  user.group,
  name: user.name,
  email:  user.email,
});

7. エラー確認

Sentryダッシュボードでエラー取得を確認。様子見してたところ数日でSessionReplayの契約上限を突破したため、エラー取得方法を見直し 4.2の設定値を変更しました。

7.1 設定値の見直し(環境毎に設定値を変更)

暫定的に下記対応を行いました。 今後は本番環境でもReplayを取得する予定です。不要なエラーを取得しないようにしたりするなどの対応が落ち着いてからになります。STG環境はドックフーディグで使用しているため、新機能のエラー検知やデグレ検知のために残しております。

本番環境

ひとまずsessionReplayを取得しないように変更しました。

STG環境

エラーが発生した場合のセッションリプレイサンプリングレートを100%->10%に変更しました。

replaysOnErrorSampleRate: 1.0
↓
replaysOnErrorSampleRate: 0.1

7.2 SessionReplayとは

問題の発生前、発生中、発生後にユーザーのブラウザで何が起きていたかをビデオのように再現する機能で、エラーや遅延の問題の根本原因に早く気づくことができます。アプリケーションの DOM 状態を巻き戻して再生し、マウス・クリック、スクロール、ネットワーク・リクエスト、コンソール・エントリなどを確認できます。

docs.sentry.io

7.3 ユーザのプライバシー大丈夫？

大丈夫です！ビデオはマスキングされて再生されるためユーザのプライバシーは保護されます。デフォルトでは 「*」 で置き換えた状態で表示されます。マスキング内容を細かく設定することも可能で下記画像のように全てをマスキングしたり、input要素や画像などをマスキングするなども指定できます。プライバシーに配慮しつつ、エラー対応をスピーディーに行えるようにする必要があります。(今後の課題)

マスキング

docs.sentry.io

8. まとめ

  • フロントエンドにSentryを導入することで、エラーモニタリングが格段に効率化されます！
  • 導入は非常にシンプルで、大きな効果を発揮します！

...と言いたいところですが、まだまだ使いこなせておらず不要なエラーが多く改善の余地がたくさんあり、順次対応予定です。

9. 今後行いたいこと

③のエラーの分析から順次対応していく予定です。

SentryにsourceMapを連携

エラー画面で元のコードを参照できるようにします。その際、本番環境でSourceMapを公開しないように設定要！

エラーの分類とハンドリング

重要なエラーに素早く気づくためにslackやissueにアラートを設定する予定です。しかし、全てのエラーをアラートしていたらキリがないので通知するエラーレベルを設定します。「fatal」だけや「fatalとerror」など。

docs.sentry.io

docs.sentry.io