Reactで例外を適切にキャプチャする方法

  コンストラクタ(props) {
    スーパー(小道具);
    this.state = {hasError: false };
  }

  コンポーネントDidCatch(エラー、情報) {
    // フォールバックUIを表示する
    this.setState({hasError: true });
    // エラーをエラー報告サービスに記録することもできます
    logErrorToMyService(エラー、情報);
  }

  与える（） {
    if (this.state.hasError) {
      // カスタムフォールバックUIをレンダリングできます
      <h1>問題が発生しました。</h1> を返します。
    }
    this.props.children を返します。
  }
}

<エラー境界>
  <マイウィジェット />
</エラー境界>

'react-error-boundary' から {ErrorBoundary} をインポートします。

関数 ErrorFallback({error, resetErrorBoundary}) {
  戻る （
    <div ロール="アラート">
      <p>問題が発生しました:</p>
      <pre>{エラーメッセージ}</pre>
      <button onClick={resetErrorBoundary}>もう一度お試しください</button>
    </div>
  ）
}

定数ui = (
  <エラー境界
    フォールバックコンポーネント = {ErrorFallback}
    onReset={() => {
      // エラーが再発しないようにアプリの状態をリセットします
    }}
  >
    <エラーが発生する可能性のあるコンポーネント />
  </エラー境界>
）

  ハンドルクリック() {
    試す {
      // 何かを投げる可能性がある
    } キャッチ（エラー）{
      this.setState({エラー});
    }
  }

    window.addEventListener('error', this.onError, true);
    window.onerror = this.onError

window.removeEventListener('unhandledrejection', this.onReject, true)

   ErrorBoundary.prototype.componentDidMount = 関数 () {
        // イベントキャッチ
        window.addEventListener('error', this.catchError, true);
        // 非同期コード
        window.addEventListener('unhandledrejection', this.catchRejectEvent, true);
    };

'react-error-catch' から ErrorCatch をインポートします。

定数App = () => {
  戻る （
  <エラーキャッチ
      アプリ="react-catch"
      ユーザー="cxyuns"
      遅延={5000}
      最大={1}
      フィルター={[]}
      onCatch={(エラー) => {
        console.log('エラーが報告されました');
        // 例外情報をバックエンドに報告し、動的にタグを作成します。new Image().src = `http://localhost:3000/log/report?info=${JSON.stringify(errors)}`
      }}
    >
      <メイン />
    </ErrorCatch>)
}

エクスポートデフォルト

   @methodCatch({ message: "注文の作成に失敗しました", toast: true, report:true, log:true })
    非同期createOrder() {
        定数データ = {...};
        const res = createOrder() を待機します。
        （！res || res.errCode !== 0）の場合{
            Toast.error("注文の作成に失敗しました"); を返します。
        }
        
        .......
        例外を引き起こす可能性のあるその他のコード...
        
       Toast.success("注文が正常に作成されました");
    }

  @methodCatch({ message: "注文の作成に失敗しました", toast: true, report:true, log:true })
    非同期createOrder() {
        定数データ = {...};
        const res = createOrder() を待機します。
        （！res || res.errCode !== 0）の場合{
            Toast.error("注文の作成に失敗しました"); を返します。
        }
       
        .......
        例外を引き起こす可能性のあるその他のコード...
        
       throw new CatchError("注文の作成に失敗しました。管理者に連絡してください", {
           トースト：本当、
           報告: 本当、
           ログ: 偽
       })
       
       Toast.success("注文が正常に作成されました");

    }

エクスポートインターフェースCatchOptions {
    レポート?: ブール値;
    メッセージ?: 文字列;
    ログ?: ブール値;
    トースト?: ブール値;
}

// const.ts に記述する方が合理的です export const DEFAULT_ERROR_CATCH_OPTIONS: CatchOptions = {
    報告: 本当、
    メッセージ:「不明な例外」、
    ログ: 真、
    トースト: 偽
}

"@typess/errorCatch" から CatchOptions、DEFAULT_ERROR_CATCH_OPTIONS をインポートします。

エクスポートクラスCatchErrorはErrorを拡張します{

    パブリック __type__ = "__CATCH_ERROR__";
    /**
     * キャッチされたエラー * @param message メッセージ * @options その他のパラメータ */
    コンストラクター(メッセージ: 文字列、パブリックオプション: CatchOptions = DEFAULT_ERROR_CATCH_OPTIONS) {
        super(メッセージ);
    }
}

"@components/Toast" から Toast をインポートします。
"@typess/errorCatch" から CatchOptions、DEFAULT_ERROR_CATCH_OPTIONS をインポートします。
"@util/error/CatchError" から CatchError をインポートします。


const W_TYPES = ["文字列", "オブジェクト"];
エクスポート関数 methodCatch(options: string | CatchOptions = DEFAULT_ERROR_CATCH_OPTIONS) {

    const type = typeof オプション;

    opt ​​: CatchOptions; を設定します。

    
    if (options == null || !W_TYPES.includes(type)) { // null または文字列またはオブジェクトではない opt ​​= DEFAULT_ERROR_CATCH_OPTIONS;
    } else if (typeof options === "string") { // 文字列 opt = {
            ...DEFAULT_ERROR_CATCH_OPTIONS、
            メッセージ: オプション || DEFAULT_ERROR_CATCH_OPTIONS.message、
        }
    } else { // 有効なオブジェクト opt ​​= { ...DEFAULT_ERROR_CATCH_OPTIONS, ...options }
    }

    戻り関数 (_target: any、_name: string、記述子: PropertyDescriptor): any {

        const oldFn = 記述子.値;

        Object.defineProperty(記述子、"値"、{
            得る（） {
                非同期関数プロキシ(...引数: any[]) {
                    試す {
                        const res = await oldFn.apply(this, args);
                        res を返します。
                    } キャッチ (エラー) {
                        // if (err instanceof CatchError) {
                        if(err.__type__ == "__CATCH_ERROR__"){
                            err = err を CatchError として返します。
                            const mOpt = { ...opt, ...(err.options || {}) };

                            （mOpt.log）の場合{
                                console.error("asyncMethodCatch:", mOpt.message || err.message , err);
                            }

                            if (mOpt.report) {
                                // やるべきこと::
                            }

                            if (mOpt.toast) {
                                Toast.error(mOpt.message);
                            }

                        } それ以外 {
                            
                            定数メッセージ = err.message || opt.message;
                            console.error("asyncMethodCatch:", メッセージ, エラー);

                            if (opt.toast) {
                                Toast.error(メッセージ);
                            }
                        }
                    }
                }
                プロキシ_bound = true;
                プロキシを返します。
            }
        })
        記述子を返します。
    }
}

  @methodCatch({ message: "注文の作成に失敗しました", toast: true, report:true, log:true })
    非同期createOrder() {
        定数データ = {...};
        const res = createOrder() を待機します。
        （！res || res.errCode !== 0）の場合{
            Toast.error("注文の作成に失敗しました"); を返します。
        }
       Toast.success("注文が正常に作成されました");
       
        .......
        例外を引き起こす可能性のあるその他のコード...
        
       throw new CatchError("注文の作成に失敗しました。管理者に連絡してください", {
           トースト：本当、
           報告: 本当、
           ログ: 偽
       })
    }

フォロー
クラスAAA{
    フォロー
    メソッド = () => {
    }
}