React-router: Something similar to a 500 response but on the client.

Created on 7 Aug 2014 · 6Comments · Source: ReactTraining/react-router

So, I did something stupid (meh, it's bound to happen). Which caused the following in my console:

error

Granted, I know this means that I need to add better error handling, and I will. However, when something like this happens in production then the screen is just blank, which is not ideal for an end user.

It'd be nice if there was an error handler that got called that could deal with it so the page is not just blank. Similar to how some web servers serve up a custom page for a 500 response.

Something like <UnhandledErrorRoute handler={CustomerErrorHandler} /> no path needed since it would stand at whatever url had the error.

Source

mtscout6

Most helpful comment

+1 on this, if i'm doing some async work between screens, and there is an error, i'd like to render something but keep the url that was pushed into history as is. similar to displaying an error page from the server.

kellyrmilligan on 2 Jun 2015

👍4

All 6 comments

152 ought to do the trick :)

... when its merged.

ryanflorence on 7 Aug 2014

Then you could:

function fivehundred() {
  Router.replaceWith('500');
}

var routes = (
  <Routes onTransitionError={fivehundred}>
    <Route name="500" path="error" handler={FiveHundred}/>
  </Routes>
);

If this becomes a common pattern, maybe we provide an <ErrorRoute/>.

ryanflorence on 7 Aug 2014

Awesome, I look forward to using it thanks!

mtscout6 on 7 Aug 2014

Hi guys, looking at:
https://github.com/rackt/react-router/blob/4ec1f289962217dbd84a8f60d306cfd4d45bf561/UPGRADE_GUIDE.md#routes-ontransitionerror-onabortedtransition
the above technique is removed? Do you recommend another approach? Thanks heaps