Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

zekchan/react-ssr-error-boundary

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

React SSR error boundary

NPM version codecov Dev Dependency Status

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>
}