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:

import ErrorFallBack from 'react-ssr-error-boundary'


function App() {
  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:

import { withContext } from 'react-ssr-error-boundary'
const ErrorFallBack = withContext({ store: PropTypes.object })

function App() {
  return <ErrorFallBack fallBack={() => <div>Error Fallback</div>}>
    <ProblemComponent />
  </ErrorFallBack>
}