[React-native + expo]エラー監視ツールSentryを導入してみた

10484 ワード
sentry react-native expo sentry テキストリンク

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
エンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

はじめに

アプリを運用していくにあたって、エラーの監視をどのツールで行うか検討した結果
ドキュメント(Expo, sentry)の豊富さだったり、React Native のサポートだったり、そもそもの使いやすさの面 + 価格が 5000/month が free ということで、相性の良さそうな Sentry を選びました。

Sentryとは？

フロントエラーの監視ツール。
公式サイトはこちら
https://sentry.io/welcome/

今回はreact-native側で起きるエラーをSentryで監視します。

導入フロー

Sentryのアカウント設定などはこの記事を参考に進めました！
Expo(React Native)でSentryを利用してみる

Sentryの設定が完了したらExpoのドキュメントを参考に App.tsxとapp.jsonに必要なcodeを追記すれば完了です。
Using Sentry

動作確認の為、ボタンを押しSentryでエラー確認できたらOKです。

App.tsx
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import * as Sentry from 'sentry-expo';

//Sentry初期化
Sentry.init({
  dsn: 'https://[email protected]',
  enableInExpoDevelopment: true,
  debug: true
});

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center' }}>
        <Text>App</Text>
        <Button
          title="throw error"
          onPress={() => {
            throw new Error('test error'); //button pushでエラー発生させる
          }}
        />
      </View>
    );
  }
}

export default App;

React-nativeのエラーを検知するようにcodeを追記

Sentryを導入して試しにReact-native側のエラーを検知できるかテストしましたが
ドキュメントに書いてある基本設定だけではreact-nativeのエラーを検知することができませんでした。

React-nativeでの設定を追加

@sentry/react-nativeを yarn add @sentry/react-nativeコマンドで追加し
最上位の App.tsx で Comonent を SentryNative.ErrorBoundaryでwrapします。
これで子 Component 以下で発生するエラーを補足することができます。

App.tsx
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import * as Sentry from 'sentry-expo';
+ import * as SentryNative from '@sentry/react-native';

//Sentry初期化
Sentry.init({
  dsn: 'https://[email protected]',
  enableInExpoDevelopment: true,
  debug: true
});

export default class App extends React.Component {
  render() {
    return (
     + <SentryNative.ErrorBoundary showDialog>
         <View style={{ flex: 1, justifyContent: 'center' }}>
          <Text>App</Text>
          <Button
            title="throw error"
            onPress={() => {
              throw new Error('test error'); //button pushでエラー発生させる
            }}
          />
         </View>
     + </SentryNative.ErrorBoundary>
    );
  }
}

export default App;

これで、React-nativeで発生したエラーを補足してエラーを表示することが出来るようになります。

参考記事

・僕の考える最強のReact Native開発ライブラリ等（2020年11月末版）
・react + react native(Expo)でエラーハンドリングどうやる？
・FlutterアプリでSentryとFirebase Crashlyticsにエラーレポートを送りアプリの品質改善に役立てる