0

現在、redux アクションを処理する非同期関数がいくつかある反応アプリがあります。これらのアクションはすべてこのAct関数にラップされ、予期しないエラーがログに記録され、よりユーザーフレンドリーなエラーが UI コードに送信され、ユーザーに表示されます。

export function Act<R>(
    callback: (dispatch: Dispatch, getState: () => ReduxState) => Promise<R>
): typeof callback {
    return async (dispatch, getState) => {
        try {
            // if the callback works fine, just return it's value
            return await callback(dispatch, getState);
        } catch (e) {
            if (e instanceof UserError) {
                // we are expecting the action to throw these, although should still be logged
                console.log(`async callback threw user error: ${e}`);
                // propogate to UI code.
                throw e;
            } else {
                // Some exception happened that wasn't expected, log a traceback of the error
                console.trace(`Error in Async Action: ${e}`);
// HERE IS WHERE I WANT TO IMPROVE ^
                // since the error thrown will likely be shown to the user just show a generic message
                throw new UserError('something went wrong');
            }
        }
    };
}

これは正常に動作 console.traceしていますが、エラーが UI に到達しないか、または

私が本当にやりたいことは、これらのアクションで予期しないエラーがスローされ、開発モードがオンになっている場合に、これがフローティング プロミスである場合に表示されるエラー オーバーレイを表示することです。

私はreportRuntimeErrorreact-error-overlay から使用しようとしましたが、次のようにログに記録されたため、明らかに正しくインポートしませんでしたundefined:

import { reportRuntimeError } from 'react-error-overlay'; // didn't work and couldn't find type definitions for the module

そのモジュールの型定義を見つけることができなかったものを試しnpm install @types/react-error-overlayてみましたが、これを行うのに適切な場所であるかどうかはわかりません。

最初にスローされたエラーを表示し、UI コードによって処理される別のエラーを返す方法はありますか?

4

1 に答える 1

0

質問を書いている途中で、React が処理されないエラーをスローする Promises のオーバーレイを表示することに気付いたので、表示したいエラーをスローし、どこにも処理しないという約束をする必要がありました。

else {
    // This gets logged as an Unhandled Promise Rejection
    // so React will show the overlay for it as well.
    void Promise.reject(e);
    throw new UserError(fallbackErrorMessage);
}
于 2019-03-10T23:23:15.387 に答える