フロントエンド・アプリでのエラートラッキング
Sentryによるエラートラッキング
Mackerelトレーシング機能はOpenTelemetryを主に利用していますが、SentryのSDKを使ってエラーを収集することもできます。
SentryのSDKを利用することによって、フロントエンドやアプリなどOpenTelemetryでは収集できない場所のデータを集めることができます。
このページではSentryを使ったエラートラッキングの方法を紹介します。
例: Reactへの導入
以下のステップで導入できます
Sentry SDKのインストール
送信先設定
1. Sentry SDKのインストール
Sentry のSDKの中から、React用のSDKを探し、インストールします。
npm install --save @sentry/react
2. 送信先設定
Sentryの初期化時、以下のように設定するとSentryからVaxilaにエラーを送信することができます。
const clientToken = "vaxila_cli_xxxxxx"
const serviceName = "frontend"
Sentry.init({
dsn: `https://${clientToken}@telemetry.vaxila-labs.com/sentry/v1/api/${serviceName}/0`,
environment: "production",
release: "v1.1.1",
autoSessionTracking: false
});
この例では次の項目を設定しています。
dsn
データの送信先です。サービス名とVaxilaのクライアントトークンを設定して
telemetry.vaxila-labs.com
へデータを送信するようにしています。
environment
環境の名前です。 productionやstagingなど、適切な名前を設定します。
release
バージョンの名前です。git のハッシュ値やタグの名前など、適切な名前を設定します。
autoSessionTracking
Sentryがセッション情報を送信するかどうかの設定です。Vaxilaはエラー以外の情報を無視するので通信量削減のため送信自体を停止するのを推奨しています。
全体像
以上でSentryへの対応は終わりです。
あとは完成したコードを既存のコードに追加するだけです。
例えば、TypeScriptを使用した場合、 src/main.tsx
は以下のようになります。
import ReactDOM from 'react-dom/client'
import * as Sentry from "@sentry/react";
import ...
const clientToken = "xxxxxx"
const serviceName = "frontend"
Sentry.init({
dsn: `https://${clientToken}@telemetry.vaxila-labs.com/sentry/v1/api/${serviceName}/0`,
environment: "production",
release: "v1.1.1",
autoSessionTracking: false
});
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
最終更新