async-react-ssr-error-boundary
v1.0.3
Published
React renderToString error boundary fallback
Downloads
1
Readme
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>
}