ReactNativeにSentryを導入する（バグレポート・イベントログ収集）

なぜSentryか

SentryはReact Nativeに対応したバグレポート・イベントログ収集ツールです。
類似ツールでReact Nativeに公式で対応しているものはあまりなく、ほとんどのサービスがコミュニティのラッパーでの対応ですが、Sentryならセットアップも簡単です。

例えば、おなじみのfetchやconsoleログがちゃんと認識されてログに残ります。

Sentryに登録

https://sentry.io/signup/
上記よりチームを作成します。

以下のコマンドで自動セットアップ

アカウントの作成が完了したら、以下のURLにあるように、2行のコマンドだけでセットアップが完了します。
https://sentry.io/settings/tenova/projects/react-native/install/react-native/

yarn add react-native-sentry
react-native link react-native-sentry

react-native linkの際にブラウザが開き、自動セットアップが開始します。

ユーザーをidentificateする

どのユーザーがエラーを起こしたかを確認するために、idなどを設定します。

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

Sentry.setUserContext({
    id: 'XXXXXXXX',
});

// ログアウト時には空で実行
Sentry.setUserContext({
});

移動履歴を追跡する

captureBreadcrumbを使って画面遷移をトラッキングします。

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

...
  componentDidMount() {
    Sentry.captureBreadcrumb({
      category: 'Mounted',
      message: 'XXXScreen is mounted',
      data: {
        payload: 'meta sample'
      }
    });
  }
...

以下のように、エラーが起きる前にTopScreenがマウントされていることがわかります。

任意のメッセージを送る

デフォルトでconsole.warningやconsole.errorは認識されますが、そのほかに任意でイベントを送りたい場合はcaptureMessageが使えます。

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

Sentry.captureMessage('some warning', {
  level: SentrySeverity.Warning
}

Sentry.captureMessage('critical error', {
  level: SentrySeverity.Error
}

まとめ

初めてSentryを使ったのですが、思った以上にReact Nativeにちゃんと対応していて驚きました。
今の所React Native向けのバグレポートではSentryが一番使いやすいです。