🥇React フロントエンドアプリケーションのバグを Sentry リモート監視

私たちは React で Sentry を使用することを検討しています。

この記事は、例を使用して Sentry エラーを報告することから始まるシリーズの一部です。 Часть1.

Reactの実装

まず、このアプリケーションに新しい Sentry プロジェクトを追加する必要があります。セントリーのウェブサイトより。この場合は React を選択します。

React を使用してアプリケーションに Hello と Error の XNUMX つのボタンを再実装します。まずはスターターアプリケーションを作成します。

npx create-react-app react-app

次に、Sentry パッケージをインポートします。

yarn add @sentry/browser

そしてそれを初期化します:

反応アプリ/src/index.js

...
import * as Sentry from '@sentry/browser';

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://[email protected]/1289887',
    release: RELEASE,
  });
}
...

観察：

開発中、コンソールなどの問題を監視するための他のメカニズムがあるため、Sentry は実稼働ビルドに対してのみ有効になります。

次に、Hello ボタンと Error ボタンを実装し、アプリケーションに追加します。

反応アプリ/src/Hello.js

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

export default class Hello extends Component {
  state = {
    text: '',
  };
  render() {
    const { text } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Hello
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      text: 'Hello World',
    });
    try {
      throw new Error('Caught');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

反応アプリ/src/MyError.js

import React, { Component } from 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Error
        </button>
      </div>
    )
  }

  handleClick = () => {
    throw new Error('Uncaught');
  }
}

反応アプリ/src/App.js

...
import Hello from './Hello';
import MyError from './MyError';

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <Hello />
        <MyError />
      </div>
    );
  }
}

export default App;

問題 (ソースマップ)

次のように入力して、本番ビルドで Sentry をテストできます。

yarn build

そして、ビルドフォルダーから次のように入力します。

npx http-server -c-1

私たちがすぐに遭遇する問題は、Sentry のエラーレコードが縮小されたバッチ内の行番号を参照していることです。あまり役に立ちません。

Sentry サービスは、エラーを受信した後に削減されたパケットのソースマップをプルすることでこれを説明します。この場合、ローカルホストから実行しています (Sentry サービスからはアクセスできません)。

ソリューション (ソースマップ)

この問題の解決策は、パブリック Web サーバーからアプリケーションを実行することです。 XNUMX つの簡単な返信ボタンで GitHub Pages サービス (無料) を使用できます。通常、使用する手順は次のとおりです。

フォルダーの内容をコピーします ビルド フォルダに ドキュメント リポジトリのルートディレクトリ内。
オンにする GitHubページ リポジトリ (GitHub から) で docs フォルダーを使用します マスター 枝
変更を GitHub にプッシュする

注意: 何を使用する必要があるかを理解した後 作成-作成-アプリ アプリケーションを起動するホームページ機能。最終的には、package.json に次のコードを追加しました。

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

実行中のアプリケーションの最終バージョンは、次の場所から入手できます。

https://larkintuckerllc.github.io/hello-sentry/

捕まえた虫のイラスト

「Hello」ボタンをクリックする手順を見てみましょう。

次のようなエラーが表示されます。

観察：

このバグレポートはこれ以上に明確ではありませんが、 ブラボー.

説明されないエラーの図

同様に、ボタンのクリックについても見てみましょう エラー.

次のようなエラーが表示されます。

原因不明エラーの処理の改善 (レンダリング)

誤差制限の導入

ユーザーインターフェイスの一部で JavaScript エラーが発生しても、アプリケーション全体が中断されることはありません。 React ユーザーのこの問題を解決するために、React 16 では「エラー境界」と呼ばれる新しい概念が導入されています。

エラー境界は、子コンポーネントツリー内の任意の場所で JavaScript エラーをキャッチし、それらのエラーをログに記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック UI をレンダリングする React コンポーネントです。エラー境界は、レンダリング中、ライフサイクルメソッド内、およびその下のツリー全体のコンストラクター内でエラーを捕捉します。

...

未検出のエラーに対する新しい動作

この変化は重要です。 React 16 以降では、どのエラー境界にも捕捉されなかったエラーは、React コンポーネントツリー全体がアンマウントされることになります。

- ダン・アブラモフ - React 16 でのエラー処理

これに気づくまでにしばらく時間がかかった重要な説明は、 上記の動作は、render メソッド (またはライフサイクルメソッドのいずれかで) でスローされたエラーでのみ機能します。。たとえば、エラー境界を使用しても、ボタンでは何の役にも立ちません。 エラー; このエラーはクリックハンドラーにありました。

レンダリングエラーの例を作成し、エラー境界を使用してエラーをより適切に処理してみましょう。

反応アプリ/src/MyRenderError

import React, { Component } from 'react';

export default class MyRenderError extends Component {
  state = {
    flag: false,
  };
  render() {
    const { flag } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Render Error
        </button>
        { flag && <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      flag: true,
    });
  }
}

観察：

ボタンを押すと、 反応する 表示されます フラグ.バステッド.インチキ、エラーが発生します
エラー境界がなければ、コンポーネントツリー全体がアンマウントされます。

次に、エラー境界コードを記述します (新しいライフサイクルメソッドを使用します) コンポーネントDidCatch); これは基本的に、Dan Abramov の記事で示されている例です。

反応アプリ/src/ErrorBoundary.js

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

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(err, info) {
    this.setState({ hasError: true });
    Sentry.captureException(err);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

最後に、このコンポーネントを使用します。

反応アプリ/src/App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

ただし、[エラーのレンダリング] ボタンをクリックするとフォールバック UI が表示され、Sentry にエラーが報告されます。

Завершение

これがお役に立てば幸いです。

PS オリジナルへのリンク

PS Sentry 経由の Telegram チャット https://t.me/sentry_ru

出所： habr.com

React フロントエンドアプリケーションのバグを監視する Sentry リモート監視

コメントを追加します返信をキャンセル

React フロントエンド アプリケーションのバグを監視する Sentry リモート監視

コメントを追加します 返信をキャンセル

React フロントエンドアプリケーションのバグを監視する Sentry リモート監視

コメントを追加します返信をキャンセル