NextJS/ReactJSにsentryを導入する

Sentry とは

フロントエンドのエラー監視ツールです。
サーバサイドはサーバ側にログ出力という手段がありますが、
フロントエンドはログを保存する仕組みがなく、エラーログをサーバに送る実装をする必要があります。

それをサクッと実装できて、エラーの分析のダッシュボードもあるのが sentry。

導入

sentry にユーザ登録して、プロジェクトを作成できている前提で進めます。
公式に導入ガイド(en)があります。

パッケージのインストール

# yarn
yarn add @sentry/react @sentry/tracing

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

実装

必ず呼び出されるコンポーネントの前にSentryを初期化します。

• Reactならindex.js
• NextJSなら_app.tsx

React 編(js)

index.jsのrenderメソッドの前にSentry.init()を記述します。

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


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

NextJS 編(tsx)

NextJSはpages/_app.tsxの中に記述します。

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


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

document is not definedなどで怒られる場合は、こういう書き方もできます。

useEffect(()=>{
    if(document){
      Sentry.init({
        dsn: "**************************",
        autoSessionTracking: true,
        integrations: [
          new Integrations.BrowserTracing(),
        ],
        tracesSampleRate: 1.0,
      });  
    }
  },[])