この記事は React Native Advent Calendar 2017 の 4 日目の記事です。
TL;DR
- エラートラッキングサービス Sentry の React Native における導入方法の紹介
- Sentry を使えば、 OS ・バージョン等どのような環境でどのような問題が起きたかがわかるようになる
- どのユーザがどのようなシチュエーションで問題に遭遇したかがわかるようになる基本的な使い方を紹介
エラートラッキングの必要性とその方法
一切の問題無くアプリケーションが動作するのであればそれに越したことはありませんが、十分なテストを以てしても予期せぬ障害は起きるものですよね。
そういった問題は全て解決されるべきですが、そのためには以下が不可欠でしょう。
- 問題が発生したことに気付ける仕組み
- 問題が発生する原因を（容易に）知ることが出来る仕組み
文字通り解釈すれば前者をエラートラッキングと呼ぶのだと思いますが、後者を充実させることもトラブルシューティングのコストを下げる上で重要ですよね。
これらの仕組みを提供するサービスの一つとして 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-sentrySentry のセットアップ
$ 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 に限定する必要等はあると思います。
本記事では Sentry の導入方法と、基本的な使い方について説明しました。
プロダクトの性質に応じて、色々な工夫の仕方があるかと思います。素敵な使い方があれば、是非シェアしていただけると嬉しいです 😊
