CODEWITHSUNDEEP
javascriptreactjserror-handlingredux
ralzaul
ralzaul

Reputation: 4470

React-Redux error page management

We have a react-redux project that we are trying to setup the error propagation and error page display mechanism.

What we have been doing so far is: when an error occurs in an async api call or somewhere else we fire an action and modify the root level component App. In the root level reducer we set the error field in the state with the error propagated. When an error is observed we render the error page rather than the content that we have.

So the flow is like : Component A -> A action -> App Reducer -> App component - Render errorPage.

But the problem is the state remains with the error component. And as the error field remains in the state the app goes on rendering the error page. We basically need a mechanism so that whenever a user triggers a new action or whenever the error page is rendered , that will reset the error field in the state to {}.

We could not find a good way to solve this problem. It looks like a very common one which anyone might have faced with before. In general how can we handle the async error propogation and display an error page accordingly.

Upvotes: 4

Views: 1086

Answers (2)

ralzaul
ralzaul

Reputation: 4470

The correct solution to this problem was to use:

componentWillUnmount() {
    this.props.handleErrorReset();
}

handleErrorReset function basically fires an action that triggers the reset of error values in the error state, something in line with this:

const clearErrorState = (state) => state.set('error', fromJS({}));

componentWillUnmount is basically executed right after the related component is unmounted so it is great for resetting or cleaning values in the state that are not necessary anymore.

https://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount

Upvotes: 2

Damien Leroux
Damien Leroux

Reputation: 11703

If you're using a routing system, like react-router, you could implement an error page displaying the error from the reducer) and you could have any other page removing potential existing error in the reducer.

Upvotes: 1

Related Questions