【react】Sentryを使ってバグレポート

Sentry | Error Tracking Software — JavaScript, Python, PHP, Ruby, more

Sentryはバグを自動で収集してくれたり、下記のようなクラッシュレポートを簡単に導入してくれるツール。今回は個人プランで使い心地を調査してみた。

とりあえずcomponentDidCatchで親コンポーネントにいれば描画系のエラーは集計できるだろう。

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'tekitounamojiretsu' // ここにDSNキーを入れる。設定の下の方に(DNS)という欄があるのでそれ
});

class ExampleBoundary extends Component {
    this.state = { error: null };

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.configureScope(scope => {
        Object.keys(errorInfo).forEach(key => {
          scope.setExtra(key, errorInfo[key]);
        });
      });
      Sentry.captureException(error);
    }

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

class BugComponent extends Component {
  render() {
    throw new Error("Oops") // わざとエラーを起こす
    return <div>hello</div>
  }
}

class App extends Component {
  render() {
    return (
      <ExampleBoundary>
        <BugComponent />
      </ExampleBoundary>
    );
  }
}

export default App;

エラーレポートはこんな感じで、使用したブラウザやipアドレスなんかもデフォルトで集計する。また、付属するデータも送ることができる。