React SSR error boundary
React 16 introduced new componentDidCatch
lifecycle method, but it is not working when you render page on server using renderToString
.
If you want just render fallback when your component throw error you can use react-ssr-error-boundary
.
Installation:
Add the latest version of react-ssr-error-boundary
to your package.json:
npm install react-ssr-error-boundary
or
yarn add react-ssr-error-boundary
Usage:
Code below will render <div>Error Fallback</div>
on server if ProblemComponent rendering fails:
{ return <ErrorFallBack fallBack= <div>Error Fallback</div>> <ProblemComponent /> </ErrorFallBack>}
If yours ProblemComponent depends on context (your are using Redux for example), you should create your own ErrorFallBack component by providing contextTypes:
const ErrorFallBack = { return <ErrorFallBack fallBack= <div>Error Fallback</div>> <ProblemComponent /> </ErrorFallBack>}