react-native-error-boundaryを使ってみた

ReactNativeのアプリで原因不明のアプリのクラッシュが結構発生していました。
クラッシュの原因は頑張って特定できましたが、問題はSentryに情報が記録されていないことでした。

どうしようかなと思ったけど、Reactがコンポーネントないの処理のエラーハンドリングにError Boundaryを使うのをみてこれはReact Nativeでも使えばいいんだろうなと。

ReactNativeでも componentDidCatch を使えるのでError Boundaryが使えるわけですが、関数コンポーネントにしたかったので今回はreact-native-error-boundaryを使うことにしました。

ErrorBoundaryのFallbackComponentに指定するコンポーネントのなかでSentryのcaptureExceptionを実行すればSentryに記録することが出来ました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


// src/compnents/ErrorHandler/index.tsx

import React from 'react'
import {Text, View, Button} from 'react-native'
import ErrorBoundary from 'react-native-error-boundary'
import * as Sentry from '@sentry/react-native'

interface FallbackProps {
  error: Error
  resetError: () => void
}

const ErrorFallback: React.FC<FallbackProps> = ({error}) => {
  Sentry.captureException(error)
  return (
  <View>
    <Text>エラーが発生しました</Text>
    <Text>{props.error.toString()}</Text>
    <Button onPress={props.resetError} title={'Try again'} />
  </View>
  )
}

export const ErrorHandler: React.FC = ({children}) => (
  <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
)