【JavaScript】Sentryで手動で捕捉したエラーのみを検知する設定方法

自分が関わるプロジェクトで、フロントにてクリティカルな箇所でエラーが発生したときに検知したいというニーズがありました

Sentryをそのままいれようと思いましたが、フロントエンドでは検知されるエラーが多すぎて本来気づきたいエラーに気づけなくなる懸念が有りました

そのため、手動で捕捉したエラーのみを通知する設定をしましたが、案外時間がかかったので設定内容について残しておきます

Sentryの設定内容

ということで設定です。

と言っても最初は公式ドキュメントを参考にモジュールをインストールしていきます。

JavaScript | Sentry Documentation

@sentry/browserを導入

# Using yarn
yarn add @sentry/browser
# Using npm
npm install --save @sentry/browser

公式ドキュメントでは@sentry/tracingもいれておりましたが不要そうだったので今回はなしにしています。

初期設定（Sentry.init）

@sentry/browserを導入したら、下記のコードを配置します。

通常であれば、ライフサイクルのはじめのほうでinitをするのがセオリーのようですが、今回はcaptureExceptionをするときにさえ呼んでくれれば良かったので個別にjsファイルを作ってimportするようにしました。

import { init, captureException } from '@sentry/browser'

export const initializeSentry = (err) => {
  init({
    dsn: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    // ここで手動でcaptureしたエラーのみ扱うよう設定している
    integrations(integrations) {
      return integrations.filter(({ name }) => {
        return !['GlobalHandlers', 'TryCatch'].includes(name)
      })
    },
  })
}

export const noticeException = (err) => {
  return captureException(err)
}

このファイルを呼び出せば通知がされます。逆に、他の箇所で発生したエラーや例外は通知がされないようになります。（各自ご確認お願いします）

import { initializeSentry, noticeException } from '@lib/sentry'

// 初期化
initializeSentry

try {
  hogehoge
} catch {
  // 例外時のみエラー送信
  noticeException(error)
}

integrationsとは?

integrationsはSentryで例外以外のエラーを捕捉したりする機能群のことです。

それぞれ文書化されているので詳細は下記の公式ドキュメントを参照してください。

Default Integrations for JavaScript | Sentry Documentation

今回のケースでは、エラーや例外は勝手に捕捉してほしくないため、捕捉に使われていそうなintegrationであるGlobalHandlersとTryCatchをintegrationsから除外することで、手動による通知のみを有効化するよう設定しております。

defaultIntegrations

上記integrationsがすべて不要な場合は、defaultIntegrationsをfalseにすれば停止させることができます。ただ、必要な情報が取得できなくなる恐れもあるため、一度ドキュメントを呼んでおくことをおすすめします。

export const initializeSentry = (err) => {
  init({
    dsn: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    // 最悪この設定でもOKかも
    defaultIntegrations: false,
  })
}