Expo(React Native)でSentryを利用してみる


ExpoへのSentry導入方法。非常に簡単なのですが、ネット記事と少々やりかたが変わっているようだったのでメモ。

## Sentryとは

Sentryはエラートラッキングシステムで、アプリでおこるエラーを収集・閲覧・アラート発火等ができる。サーバサイド系のエラーはサーバに残るけどアプリとかはわからないのでエラートラッキングシステムが必要となる。

Sentryはいろいろな言語に対応しているが、React Nativeにも対応しており、かつ、Expoでは標準でSentryと連携するためのモジュールを提供しているのでそれを利用してみる（RNとExpoでは若干導入方法が異なる）。

## 準備

### Sentryへの登録

何はなくともまずはsentryに登録します。

### サーバ利用（設定）情報の入手

トラッキング対象のアプリでSentryを使うにはAuth TokenやらDSNといった情報が必要になるので取得します。

* Auth Token(API Key) → アカウント(Organization)に１つで、手動でCreateする必要がある
* DSN → プロジェクトに１つ（プロジェクトを作れば自動生成される）
* その他、Project名とかOrganization名とかあるけど、調べるほどのものではない

これらの情報は初期ウィザード中でも取得できますが、後からでも取得できます。

### Auth Token

こんな画面があるので生成、取得します。

![スクリーンショット 2019-12-15 10.24.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/4f33c4fe-ac99-bf4e-02ea-e68f41192202.png "スクリーンショット 2019-12-15 10.24.17.png")


### DSN

こんな画面があるので取得します。


![スクリーンショット 2019-12-15 10.25.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/a615d4b1-1e58-34d7-d4d4-fce2105872f2.png "スクリーンショット 2019-12-15 10.25.06.png")



## プロジェクトの作成

適当にUIを見てればわかります。入会時は自動的にウィザードが起動するかもしれません。
React-Native用のプロジェクトを作っておきます。

![スクリーンショット 2019-12-15 10.01.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/2ba7d383-27d5-02fa-99ad-689c626bd55c.png "スクリーンショット 2019-12-15 10.01.31.png")



## Expoにコードを仕込む

基本的には[Expoページ](https://docs.expo.io/versions/latest/guides/using-sentry/)の通りにやればよいだけ。いじるファイルはApp.jsとapp.jsonの２つ。

### App.js

初期化とエラーの発生。初期化にはDSN情報が必要です。

```diff:App.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
+import * as Sentry from 'sentry-expo';

+//Sentry初期化
+Sentry.init({
+  dsn: 'https://04770839cdf74bfca91ea8xxxxxxxxxx@sentry.xxxxxxxxxx',
+  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>
    );
  }
}

```

### app.json

app.jsonにhookを追加し、各種情報を設定します。

```diff:app.json
{
  "expo": {
    "name": "test",
    "slug": "test",
    "privacy": "public",
    "sdkVersion": "36.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
+    "hooks": {
+      "postPublish": [
+        {
+          "file": "sentry-expo/upload-sourcemaps",
+          "config": {
+            "organization": "xxxxxxxxxx",
+            "project": "test",
+            "authToken": "e38ab7b80e8b424584673d18ac04c3e9743b7287967b4cf08857c8xxxxxxxxxx",
+            "url": "option"
+          }
+        }
+      ]
+    }
  }
}
```

### 動作確認

エラーが発生するとSentryに表示されるようになります。

![スクリーンショット 2019-12-15 10.18.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/2324d02c-3843-41f2-8651-808df72a34ac.png "スクリーンショット 2019-12-15 10.18.31.png")

## その他

デフォルトでエラー時にメールが送信されるようです（当然On,Off可）。またSlackと連携してエラーを通知することも可能です。