Sentryでバグレポートを受け取る【React Native Expo】

Sentryとは

アプリケーションからイベントログを送信してくれるもの。
https://sentry.io/

Expoに対応している(bugsnagはExpo未対応)

導入方法

登録してプロジェクト作成

• Sentryに登録する

• 言語やフレームワークを選択、project nameを記入してCreate Projectする

• 下の方にあるPublic DSNをコピーしておく(Sentry.config('https://**********@sentry.io/***').install();みたいな所のアドレス部分)

• Sentry APIでauth tokenを作成(設定はデフォルトでOK)、auth tokenをコピーしておく

• ダッシュボードに行き、プロジェクトのsettingsタブからNameをコピーしておく

• 左上のボタンからOrganization settingsに行き、Nameをコピーしておく

Sentryをインストール、設定する

• async/awaitを利用するため、Node 7.6+であることを確認
• npm i sentry-expo --save
• App.jsに以下を追加

App.js

import Sentry from 'sentry-expo';

// Remove this once Sentry is correctly setup.
Sentry.enableInExpoDevelopment = true;

Sentry.config('your Public DSN goes here').install();

• app.jsonにpostPublish hookを追加、先ほどコピーした項目を記入してください

app.json

{
  "expo": {
    // ... your existing configuration

    "hooks": {
      "postPublish": [
        {
          "file": "sentry-expo/upload-sourcemaps",
          "config": {
            "organization": "your organization's short name here",
            "project": "your project name here",
            "authToken": "your auth token here"
          }
        }
      ]
    }
  }

動作確認

強制的にエラーを発生させてみます(Button追加)
https://docs.sentry.io/clients/javascript/usage/

App.js

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Sentry from 'sentry-expo';

// Remove this once Sentry is correctly setup.
Sentry.enableInExpoDevelopment = true;

Sentry.config('https://********@sentry.io/****').install();

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Button onPress={() => {throw new Error('sample error from expo')}} title="broken"/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Sentryのダッシュボードでエラーを確認できました