エラー監視と反応してエラー境界を使う方法

バックエンドエンジニアはすべてのツールを持っています.niceエラー処理.報告計量.フロントエンドdevsについてはどうですか?確かに、我々の機能のエラーをキャッチすることができますが、エラーについては、我々の説明コードでは?例えば、反応する.いくつかの悪いコードをあなたの関数コンポーネントとアプリケーション全体のクラッシュに書き込みます.
幸いにも、フロントエンドのDEVSは、エラー処理でそれらを助けるためにますます多くのツールを得ています.実際には、反応16のリリースでは、新しいツールは、ツールボックスに特にコンポーネントのエラーを処理するように設計されました.Error Boundaries allow developers to catch and handle errors 反応の応用層の中で.反応チームの発表から:

In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.

それはすべて反応16で変更されました.しかし、あなたがプレゼンシャル層エラーから回復して、それを報告したいならば、何もあなたを助けるために箱の外にありませんでした.ここはどこですExceptionless (オープンソースのエラー処理と監視ツール)と実際にうまく一緒に動作します.
次のような反応アプリを作成する簡単なチュートリアルを実行しましょう.

エラー境界を作成する

関数コンポーネント内でエラーを強制します
そのエラーから回復する
監視サービスに報告します(例外なし)
始める
このチュートリアルでは、次のようにインストールする必要があります

ノード.J 12より大きい

国立天文台

テキストエディタ

Free account on Exceptionless

これらの場所では、我々の反応アプリを生成してみましょう.コマンドラインから次のコマンドを実行します.npx create-react-app error-boundary-exampleアプリケーションが作成されると、ディレクトリに移動し、例外のないパッケージをインストールします.
エラー境界例とNPM i＠例外
これは、アプリケーションと必要なパッケージを設定する必要があります.今、機能を誇示するために少しのコードを書きましょう.まず最初にエラー境界を設定します.

反応中のエラー境界の作成

まず最初に必要なのは、エラー境界ファイルを作成することです.これは、残りのアプリケーションのラッパーコンポーネントとして機能します.Replyアプリケーションのsrcフォルダで、ErrorBoundaryという新しいファイルを作成します.jsこれにより、コンポーネント内のエラーが発生したときにフォールバックをレンダリングできます.例外の組み込みエラー境界を使用して、実際にエラーを報告する処理を行います.あなたはすぐに表示されますが、今のフォールバックレンダリングに焦点を当てましょう.
新しいファイルの中に次を追加します.

import React from "react";

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Uh oh!</h1>
          <p>
            This wasn't supposed to happen. If you continue to see this message,
            please reach out to support.
          </p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

このファイルは、メインアプリケーションコードをラップします.それで、それは我々の構成要素の全てを通して働きます.コンポーネントのエラーが発生した場合は、アプリケーションを完全にクラッシュさせるのではなく、ここでレンダリングメソッドを使用します.あなたが好きなスタイルや情報を含めるには、この変更することができます.私は、私のものをかなり単純にしました.
さて、アプリケーションコンポーネントに接続する必要があります.
アプリケーションコンポーネントのラッピング
アプリケーション内の多くのプロバイダを持っているかもしれません.それで結構です.この新しいエラー境界コンポーネントは、トップレベルですべてをラップするだけです.あなたのインデックスに行きなさい.JSとファイルを更新します.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import ErrorBoundary from './ErrorBoundary';

ReactDOM.render(
  <React.StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

ここで、エラーを例外に報告する前に、このコードが動作することを確認しましょう.NPMのスタートを使用してアプリケーションを起動します.エラーを起こす必要があります.だから、あなたのアプリケーションに移動します.jsファイルと定義されていない変数をコンポーネント本体に追加します.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>{undefinedVariable}</p>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

デフォルトアプリケーションをエクスポート
私はundefinedvariableをコンポーネントに加えました.その変数がうまく定義されていないため、コンポーネントは壊れます.あなたのコードを保存し、アプリをチェックアウトします.そうですね.
...エラーメッセージ.何を与えるか
さて、開発モードでは、反応は画面上のエラーをレンダリングすることによってあなたを助けるためにしようとしています.ページを再表示すると、エラーが画面に表示される前に、あなたのフォールバックコンポーネントが分割されていることがわかります.このコードがプロダクション環境に展開されると、エラーが画面に表示されません.あなたはあなたの生産は、アプリケーションのクラッシュ反応を見てきたので、これを知っている.我々全員が持っている.これは、白い画面を示しています.それです.今、しかし、あなたのアプリは、フォールバック画面が表示されます.
かなりクール!
今、我々はエラーが我々のモニタリングシステムに報告されることを確認する必要があります.我々は確かにこれについての顧客からのメールを取得しますが、詳細を私たちのサポートチームは、これらのメールにも得ることができる前に問題を解決するのに役立つかもしれない.

エラーのキャプチャ

メッセージを表示できるようになりましたので、エラーを捕捉し、例外なくレポートシステムに送りましょう.
例外のないパッケージには、ExceptionLessErrorBoundaryというエラー境界ヘルパーが含まれます.我々がする必要があるすべては、我々のインデックスにこれを輸入することです.JSと我々のアプリのコンポーネントをラップします.あなたは、これのためにあなたの例外のないアカウントからあなた自身API APIをつかむ必要があります.あなたは次のことができますthis guide to do so .
コードがどのように見えるかを見てみましょう.これはあなたのインデックスを更新する必要があります.JSファイルは以下のようになります.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
  Exceptionless, 
  ExceptionlessErrorBoundary
} from "@exceptionless/react";
import ErrorBoundary from './ErrorBoundary';

const startExceptionless = async () => {
  await Exceptionless.startup((c) => {
    c.apiKey = "YOUR API KEY";
    c.useDebugLogger();

    c.defaultTags.push("Example", "React");
  });
};

startExceptionless();

ReactDOM.render(
  <React.StrictMode>
    <ErrorBoundary>
      <ExceptionlessErrorBoundary>
        <App />
      </ExceptionlessErrorBoundary>
    </ErrorBoundary>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

今すぐあなたの反応アプリと再ロードに戻ります.あなたは必ずしもそれを見ません、しかし、エラーイベントは例外的に送られました.例外のないダッシュボードを開き、例外イベントを見てください.

あなたの例外をクリックして詳細を得ることができます.この場合、我々は、変数が何であったか、そして、我々の反応アプリのための完全なスタック跡を見ます.

ラッピング

反応のエラー境界は、あなたがあなたのアプリケーションをデバッグして、すぐに固定するのを助ける強力なツールです.どのように迅速に我々はフォールバックUIをレンダリングするだけでなく、エラー監視サービスに報告するためにこれを設定することがわかります.あなたはより少ないコードを書くことができて、あなたが望むならば、エラーだけを報告することができました、しかし、私はそれをあなたに任せます.
そこにたくさんのエラー監視サービスがあり、そこにプラグインを入れることができますが、オープンソースのソリューションに興味があればExceptionless 今日.