React 错误覆盖 - 显示一个错误然后抛出另一个错误以调用代码来处理

Question

我目前有一个 React 应用程序，其中有一些处理 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 或

我真正想做的是，当在这些操作中抛出意外错误并且开发模式处于打开状态时，它会显示错误叠加层，如果这是一个浮动承诺，则会显示该错误叠加层

我尝试使用来自 react-error-overlay 的 reportRuntimeError 但显然我没有正确导入它，因为它被记录为 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，但无法找到该模块的类型定义，我不清楚这是否是尝试这样做的正确位置。

有没有办法显示最初抛出的错误，然后 return 另一个由 UI 代码处理的错误？

Answer 1

在我写问题的一半时意识到 React 显示了 Promises 的覆盖层，这些 Promises 抛出了一个从未被处理过的错误，所以我只需要做出一个 promise 恰好抛出我想显示而不是处理的错误它在任何地方：

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);
}

React 错误覆盖 - 显示一个错误然后抛出另一个错误以调用代码来处理

React error overlay - show for one error then throw a different one for calling code to handle

error-handling

reactjs

react-redux

react-devtools