こんな体験ありませんか...？

アプリリリース間近のテスター確認。エラーが出た画面のスクショだけ共有される
リリース後。ユーザーがエラーに遭遇しているみたいだが、発生条件が分からない
アプリ全体のパフォーマンスを改善したい
遭遇したエラーの詳細を保存して、管理・解決したい

これ、Sentryで解決できるかもしれません！

Sentryとは？

Application Performance Monitoring & Error Tracking Software

Application performance monitoring for developers & software teams to see errors clearer, solve issues faster & continue learning continuously.

sentry.io

Sentryとはエラーの可視化、監視ツールです。ダッシュボード上でエラー発生時のスタックトレースや、リクエストデータなどを確認することができます。

サーバー側のエラー検知はやっていても、フロント側ではやってないという人も多いのではないでしょうか？

Sentry を使えば、たとえば以下のようなことが分かります

どのユーザーがどのようなエラーに直面したか？
エラーの発生する条件は？（Session Replay）
アプリのパフォーマンスはどうか？下げている機能は？（Browser Tracing）
コード上のどの部分で発生したエラーか？（ソースマップ設定）
どの環境で発生したエラーか？対応が必要なエラーか？（Tag設定）

とどのつまり、入れておいて損はないツールです！

実際に導入してみよう！

この記事は前半の導入編です。運用例は後半の記事に続きます
とりあえず、Sentryに初めてのエラーを送信するところまでやってみましょう

今回はフレームワークとしてVue3、ビルドツールとしてViteを使った環境で導入してみます
公式ドキュメントに他のフレームワークでの導入方法について詳しいので、そちらも確認してみてください

STEP 1 アカウントを用意しよう

Sentryのサインアップページにアクセスします

Debug any software issue, onboard your team, and integrate with your systems. You get 14 days free on our Business plan to start — no credit card required.

sentry.io

上記サイトにアクセスしたら、以下のような流れになります

必要項目を埋めてアカウントを作成
メール認証
アプリケーションの言語を選択&プロジェクト作成
環境別 SentrySDK のインストール方法が表示されるので、これに従ってアプリに導入

自身のアプリケーションに合った登録をしてください
※ Organization は Organization Slug というユニークな識別子に使われるので、プロジェクト名を入れたダブりにくいものにすること推奨

下記のサイトが参考になります！

Sentryで超簡単！楽々エラー監視-Sentry登録からアプリへの導入方法のすべて- - CARTA TECH BLOG

はじめにアプリを運用していくにあたって、エラーの監視は避けては通れませんよね。サーバーサイドのエラー監視については導入しているアプリケーションも多いと思いますが、フロントのエラー監視に関しては、正直監視していないことも多いのでは…？そんな今回は、Sentryというフロントエラーの監視ツールが便利で超簡単に導入できるので、ぜひ紹介したいと思います。 Sentryってどんなツールなの？など、初歩的な説明から、実際の導入方法まで。こちらを読んでもらえば、Sentryの導入もラクラクにできるはず。では、さっそく！レッツトライ！！ Sentryとは？フロントエラーの監視ツール。公式サイトはこちらh…

techblog.cartaholdings.co.jp

STEP 2 アプリケーションへのSentry導入

アプリケーションのエラー検知をSentryへ送信する設定をします
Sentryの読み込みと、dsnコードを設置します

dsnコードはSentryの管理画面から作成・確認することができます
https://YOUR_ORGANIZATION.sentry.io/

Settings > Projects > (該当プロジェクトを選択) > SDK SETUP > Client Keys
https://YOUR_ORGANIZATION.sentry.io/settings/projects/YOUR_PROJECT/keys/

dsnコードをコピーしたら、実際にエラーをSentryへ送信してみましょう！
以下は Vue3 + TypeScript + Vite のアプリケーションという想定のコードです
他の環境の場合は公式ドキュメントを参考に設定してみてください！

① SDK インストール

bash

yarn add @sentry/vue

② 設定ファイルの作成

src/plugins/SentrySetup.ts

import * as Sentry from '@sentry/vue';
import { App } from 'vue';
import { Router } from 'vue-router';
 
export const sentrySetup = (app: App, router: Router) => {
  // dsnコードと環境名を読み込み。環境変数として定義するのが望ましい
  const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN as string;
  const APP_ENVIRONMENT = import.meta.env.VITE_APP_ENVIRONMENT as string;
  const APP_URL = import.meta.env.VITE_APP_URL as string;
 
  Sentry.init({
    app,
    dsn: SENTRY_DSN,
    environment: APP_ENVIRONMENT,
    integrations: [
      Sentry.browserTracingIntegration({
          router, 
          enableInp: true // ※ 1 
      }),
    ],
    // localhostとアプリのドメイン,
    // APIサーバーのエンドポイント: APIリクエストに sentry-trace ヘッダーが付与される. 通信も含めて追跡したい場合は指定する
    tracePropagationTargets: ['localhost', APP_URL],
    beforeSend(event, hint) {
      if (event.exception) {
        // エラーをキャッチした時に追加でしたい処理があれば設定
        console.error(`[Exeption handled by Sentry]: (${hint.originalException})`, { event, hint });
      }
      return event;
    },
  });
};

※1
2024年3月13日より、INP (Interaction to Next Paint) がFID (First Input Delay) に代わってパフォーマンススコアの計算に使用されます。
Sentry SDK を最新バージョン (7.104.0+) にアップデートし、INPオプションを有効にして、更新されたパフォーマンススコアの受信を開始する必要があります。 SDKバージョン8以上の場合はデフォルトで有効になっているため指定は不要です

Automatic Instrumentation | Sentry for JavaScript

Learn what spans are captured after tracing is enabled.

docs.sentry.io

③ セットアップ処理

main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { sentrySetup } from '@/plugins/SentrySetup';
...
 
const app = createApp(App);
 
app.use(router);
sentrySetup(app, router); // Sentryのセットアップ
app.mount('#app');

準備ができたら、適当なコンポーネントで throw new Error('TEST ERROR FOR SENTRY!') してみましょう
https://YOUR_ORGANIZATION.sentry.io/issues/

管理画面でエラーが確認できたら設定終了です！
（後編につづく...）

STEP ++ アクセスできるドメインを制限しよう

デフォルト設定だと、DSNが外部に流出した場合、悪用されてしまう可能性があります
設定で正しいアクセス以外は弾いてしまいましょう

Project Settings > General Settings > CLIENT SECURITY > Allowed Domains

以下のように複数ドメインがある場合は改行で入力できます

Sentryでエラー監視を始めよう！① 導入編

こんな体験ありませんか...？#

これ、Sentryで解決できるかもしれません！#

Sentryとは？#

実際に導入してみよう！#

STEP 1 アカウントを用意しよう#

STEP 2 アプリケーションへのSentry導入#

① SDK インストール#

② 設定ファイルの作成#

③ セットアップ処理#

STEP ++ アクセスできるドメインを制限しよう#