How to handle Errors and Exceptions in Redux Reducers? - redux

Question

We are currently testing our Error Handling in our React / Redux App. (I already read https://github.com/reduxjs/redux/issues/1960). In React we implemented ErrorBoundaries and this is working pretty well: No more empty pages for unhandled exceptions.
No we tried throwing Errors in Reducers and we are seeing them logged in the console with an untouched redux state.
Reducers MUST BE pure!
I can definitely support this. The function should be "easy" with no side effects and well tested. The thing is: the reducer developer can make false assumptions (e.g. about which property in the redux state can be undefined). The example results in an
[Error] Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'someVariableWithCanBeNullOrUndefined.someFunction')
One can argue: at least no white page. But the state of the App is kind of awkward now since the actions got all dispatched and executed but were not correctly reduced. These kind of errors can easily be overseen.
Is there a way to handle these programming runtime errors? Maybe even present them in React's ErrorBoundary?
An example of an erroneous reducer function which results ONLY in a log entry:
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

To my knowledge exceptions can not be handled in reducers nor connect(mapStateToProps, mapDispatchToProps)(View).
Though a solution is to set a global error handler. One can look like this:
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
);
};