現在、React / Reduxアプリでエラー処理をテストしています。（私はすでにhttps://github.com/reduxjs/redux/issues/1960を読んでいます）。ReactではErrorBoundariesを実装しましたが、これは非常にうまく機能しています。未処理の例外のための空のページはもうありません。
いいえ、Reducersでエラーをスローしようとしましたが、そのままのredux状態でコンソールに記録されています。
レデューサーは純粋でなければなりません！
私は間違いなくこれをサポートすることができます。機能は「簡単」で、副作用がなく、十分にテストされている必要があります。重要なのは、レデューサーの開発者が誤った仮定をする可能性があるということです（たとえば、redux状態のプロパティが未定義になる可能性があります）。この例では、
[Error] Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'someVariableWithCanBeNullOrUndefined.someFunction')
議論することができます：少なくとも白いページはありません。しかし、アクションがすべてディスパッチされて実行されたが、正しく削減されなかったため、アプリの状態は少し厄介です。この種のエラーは簡単に監視できます。これらのプログラミングランタイムエラーを処理する方法はありますか？たぶん、ReactのErrorBoundaryでそれらを提示することさえできますか？
ログエントリのみを生成する誤ったレデューサー関数の例：
reduceSomeState(state = new SomeState(), action: SomeAction) {
throw new Error('some runtime error: e.g. a value in the state is undefined and accessed here');
}
私の知る限り、例外はレデューサーでも処理できませんconnect(mapStateToProps, mapDispatchToProps)(View)。
解決策はグローバルエラーハンドラーを設定することですが。次のようになります。
import * as React from 'react';
import {render} from 'react-dom';
import {GlobalErrorView} from '../../globalError/GlobalErrorView';
window.onerror = (event: Event | string, source?: string, lineno?: number, colno?: number, error?: Error) => {
render(
(
<GlobalErrorView
error={error}
okAction={() => window.location.reload()}
/>
),
document.getElementById('app') as HTMLElement
);
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加