Sentry で始める快適エラートラッキング on React Native

エラートラッキングの必要性とその方法

一切の問題無くアプリケーションが動作するのであればそれに越したことはありませんが、十分なテストを以てしても予期せぬ障害は起きるものですよね。

そういった問題は全て解決されるべきですが、そのためには以下が不可欠でしょう。

• 問題が発生したことに気付ける仕組み
• 問題が発生する原因を（容易に）知ることが出来る仕組み

文字通り解釈すれば前者をエラートラッキングと呼ぶのだと思いますが、後者を充実させることもトラブルシューティングのコストを下げる上で重要ですよね。

これらの仕組みを提供するサービスの一つとして Sentry があります。
React Native で使える物だと、他にも Bugsnag 、Crashlytics 等があり、比較については他の記事等に譲りますが、個人的にはSentryで必要十分に思っています。

Sentryを導入する

アカウントを作成し、公式のドキュメントに従います。本節ではその内容をさっくりとご紹介します。

なお、バージョンは以下の通りです。

react-native@0.49.5
react-native-sentry@0.30.2

また、以下では Expo を使用しない場合の導入方法について説明します。 Expo を使用している場合は此方に従ってください。

Sentryのアカウント登録

此方からアカウント登録を行います。

登録すると、以下のような画面になります。画面に従って project を作成しましょう。

project を作成すると、初期セットアップの案内が始まります。

この案内に従ってセットアップを進めていきます。

react-native-sentry のインストール

$ npm install react-native-sentry --save
# yarn を使用している場合は
$ yarn add react-native-sentry

Sentry のセットアップ

$ react-native link react-native-sentry

いつもの linking に加え、対話形式での Sentry のセットアップが始まります。

この際求められる情報は以下です。なお、 iOS と Android それぞれについて求められますが、同一で問題ありません。

• DSN (クライアントキー)
• Sentry Server URL
• Organization name / Project name
• Auth Token

DSN は、 project 毎に存在するキーです。上述の初期セットアップ案内画面の下部にある Client Configuration の項で確認できる URL が DSN です。

あるいは、作成した project の Project Settings https://sentry.io/${organization_name}/${project_name}/settings にあるクライアントキー(DSN)からも確認できます。

Sentry Server URL は、自前で Sentry サーバを建てる場合に設定します。そうでなければ、デフォルトの https://sentry.io/ で良いでしょう。

Organization name / Project name はそのままです。

Auth Token は Sentry にイベントを投げるための Auth Token です。これは project や organization でなく、アカウントから発行します。此方から発行し、得られた token を入力します。

以上でセットアップは完了です。

Sentryにイベントを飛ばしてみる

セットアップを終えた段階で、 Crash した際にはイベントが記録されるようになっています（正確にはイベントが送信・記録されるのは次回起動時）。

しかし例えば、 「 Crash はしないが、適切なエラーハンドリングが出来ず、汎用的なエラーメッセージを表示する」ようなことがあるとすれば、それも Crash 同等にトラックすべきことであると言えます。

そういった場合はドキュメントに従い、以下のようにしてイベントを送信します。

import { Sentry, SentrySeverity } from 'react-native-sentry';

// Error を渡す時
Sentry.captureException(error, {
  tags: {
    // 補足情報
    scene: 'SomeScene', // e.g. どの画面か
    fooState: state.foo // e.g. 関連する State はどのような状態か
  }
}

// メッセージを渡す時
Sentry.captureMessage(message, {
  level: SentrySeverity.Warning
}

基本的には Error があるのであれば captureException を、そうでなければ captureMessage を使えば良いと思います。

また、第二引数にオプションを渡すことができ、例えば tags に渡したオブジェクトは Sentry 上で補足情報 (タグ) として表示されます。また、 level で Error / Warning と分けられます。

補足情報を充実させる

ユーザ情報を付け加える

例えばユーザ認証があるアプリであれば、「どのユーザがエラーを起こしたか」という情報は有益でしょう。

これは Context についてのドキュメントと 上述のドキュメントに従い、以下のように書けます。

// ログイン時に呼ぶ
Sentry.setUserContext({
  id: userId
});

// ログアウト時に呼ぶ
Sentry.setUserContext({
});

このようにすることで、冒頭の画像のように、ユーザ情報がタグの項に表示されるようになります。

その他の情報を付け加える

ユーザ情報以外についても、 以下のようにsetTagsContext を使って自由にタグを付け加えることができます。

Sentry.setTagsContext({
  environment: 'PRODUCTION'
});

なお、 TagsContext を使えば UserContext は不要のようにも見えますが、 UserContext を使用すると、「何人のユーザが起こしたか」等、タグ以外の部分でも情報が利用されるという違いがあります。

ユーザの動きを記録する

ユーザがどのような操作を経てエラーに至ったかがわかれば有り難いですよね。Breadcrumbs （パンくずリスト）はそのための機能で、デフォルトでは 以下が時系列に表示されます。

• http リクエスト（url, status code）
• console のログ（log, warn, error）

タグと同じく、任意のイベントを Breadcrumbs に仕込むことができます。

以下は Redux における Action を Breadcrumbs に記録する例です。

Sentry.captureBreadcrumb({
  category: 'Action',
  message: action.type,
  data: {
    // 任意の補足情報
    payload: action.payload
  }
});

これを呼び出すことで、以下のような表示が得られます。

もし全 Action を記録するのであれば、 middleware にするのが良いでしょう。ただし、 payload も送るようにする場合、個人情報等が含まれていない Action に限定する必要等はあると思います。