redux - 如何处理 Redux Reducers 中的错误和异常？

Question

我们目前正在 React/Redux 应用程序中测试我们的错误处理。 (我已经读过 https://github.com/reduxjs/redux/issues/1960 )。在 React 中，我们实现了 ErrorBoundaries这工作得很好:没有更多的空白页面用于未处理的异常。

不，我们尝试在 Reducers 中抛出错误，我们看到它们以未修改的 redux 状态登录到控制台。

Reducers MUST BE pure!

我绝对可以支持这一点。该功能应该是“简单的”，没有副作用并且经过良好测试。问题是:reducer 开发人员可以做出错误的假设(例如，关于 redux 状态中的哪些属性可能是未定义的)。该示例导致

[Error] Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'someVariableWithCanBeNullOrUndefined.someFunction')

可以争辩说:至少没有白页。但是应用程序的状态现在有点尴尬，因为所有 Action 都被调度和执行了，但没有正确减少。这些类型的错误很容易被监控。
有没有办法处理这些编程运行时错误？甚至可以在 React 的 ErrorBoundary 中展示它们？

一个错误的 reducer 函数的例子，它只导致一个日志条目:

reduceSomeState(state = new SomeState(), action: SomeAction) {
    throw new Error('some runtime error: e.g. a value in the state is undefined and accessed here');
}

Answer 1

据我所知，异常不能在 reducer 或 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
    );
};