Sentryでフロントエンドのエラー監視

  • Web
  • NuxtJS
  • ReactJS

Sentryというアプリケーションで発生するエラーをトラッキングできるサービスがあります。アプリケーションに専用のモジュール・ライブラリを導入することで発生した時刻、環境(OS、ブラウザ)などの情報がSentryのサーバーに送信されます。そして、Sentryの管理画面で送信されてきたエラーが確認できるようになっています。

UIが見やすく、エラー1つ1つにメンバーをアサインできるのでチーム開発での課題管理に良いのかなと思います。(自分は個人用途でしか使ったことがないので、深いことは言えないです😉)

数年前ぐらいから使っているWebサイトをちらほら見かけますね。やはり導入するメリットを感じている人は多そうですね!

導入はとても簡単です。公式のドキュメントに導入するライブラリと記述するコードがまとまっています。

今回はNuxt.jsとReact.jsのプロジェクトに導入する手順を簡単に紹介しようと思います。(なぜこの2つかというと、ちょうど導入する機会があったため)

まずは登録

Sentryでアカウントを作りましょう。

https://sentry.io/

無料で利用できますが、チーム(複数人)で課題管理する場合は有料になります。詳細は公式サイトを参照されたし。

プランによってはエラーログの保存期間、件数も上限があります。もし会社のプロダクトに導入するといった場合はよく吟味された方が良いかと思います。

導入

冒頭でも述べましたが、Nuxt.jsとReact.jsのプロジェクトを対象にします。

Nuxt.jsのプロジェクト

専用のモジュールが提供されています。(コミュニティに感謝ですね)

https://sentry.nuxtjs.org/ にAPIやオプションが載っています。基本的にはページにあるように設定すれば良いかと思います。

まずは専用のモジュールを導入しましょう!

yarn add @nuxtjs/sentry

nuxt.config.js に次のように書き足しましょう。

{
  modules: ['@nuxtjs/sentry'],
  sentry: {
    // ここはSentryの管理画面でDSNを確認できるので、それをコピペしてください.
    dsn: 'https://{XXX}@{YYY}.ingest.sentry.io/{ZZZ}',
    // 任意: 開発モードの時は無効化しておく. (お好みで)
    disabled: process.env.NODE_ENV == 'development',
  },
}

ひとまず、最低限の設定は完了です。

ほかにもオプションがあるので、気になる方はモジュールのドキュメントをご覧ください。

基本的に自動でエラー(try - catchしていない場合)は送信されます。手動で送信する手段も提供されていますので簡単に例を示しておきます。

async asyncData({ $sentry }) {
  try {
    const data = await getArticle()
    return { title: data.title, body: data.body }
  } catch (error) {
    // エラー送信.
    $sentry.captureException(error)
  }
}

エラーが送られているか、Sentryの管理画面で確認してみましょう!

話は変わりますが、パフォーマンスをモニタリングできる機能も提供されています。これも導入は簡単です。

@sentry/tracingを別途インストールして以下のドキュメントにあるように設定を記述すればよいです。

https://sentry.nuxtjs.org/sentry/options#tracing

React.jsのプロジェクト

React.jsについては、Sentry公式ドキュメント https://docs.sentry.io/platforms/javascript/guides/react/ に詳しく載っています😅

と言いつつも、簡単ですが書いておきます。

npm install @sentry/react

index.jsindex.tsx)にて、Sentry React SDKの初期化をします。

もし直接書くのが嫌な場合は、別ファイルに記述しておいても良いかと思います。

次の記述をしましょう。

import * as Sentry from "@sentry/react";

// 本番環境でのみトラッキングする場合は、if文で分岐させる感じ.
Sentry.init({
    // ここはSentryの管理画面でDSNを確認できるので、それをコピペしてください.
    dsn: 'https://{XXX}@{YYY}.ingest.sentry.io/{ZZZ}',
});

Nuxt.jsでの説明と同じように、手動でエラー情報を送信する場合は次のようになります。

SomeService.getArticle(articleId)
  .then(response => {
    // 何もしない.
  })
  .catch(error => {
    // エラー送信.
    Sentry.captureException(error);
  });

エラーが送られているか、Sentryの管理画面で確認してみましょう!

おわりに

以上簡単でしたが、SentryをReact.jsとNuxt.jsのプロジェクトに導入する手順でした。

説明中でも簡単に触れましたが、パフォーマンスのモニタリングができたりするのでもう一歩進んだ使い方をしてみたい方は公式のドキュメントかモジュールのドキュメントを見てみましょう。

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚