Wraps render() method in React.Component with try-catch statement
npm install @doochik/babel-plugin-transform-react-ssr-try-catchBabel plugin to wrap render() method in React.Component with try-catch statement.
React 16 has error handling but for client rendering only.
This plugin performs simple transform which wraps every render() method with try-catch.
Example:
``js
// MyComponent.js
class MyCompoenent extends React.PureComponent {
render() {
return
This component will be transofmed to:
js
// MyComponent.js
const ReactSSRErrorHandler = require('./path/to/my/SSRErrorHandler.js');class MyCompoenent extends React.PureComponent {
render() {
try {
return this.__originalRenderMethod__();
} catch (e) {
return ReactSSRErrorHandler(e, this.constructor.name, this);
}
}
__originalRenderMethod__() {
return
;
}
}
`Actually, this is temporary solution until React doesn't support error handling in SSR.
Installation
sh
npm install --save-dev @doochik/babel-plugin-transform-react-ssr-try-catch
`Usage
You should enable this plugin only for server build. Use React 16 error boundaries from client build.
.babelrc
json
{
"plugins": [
["react-ssr-try-catch", {
// global errorHandler
"errorHandler": "./path/to/my/SSRErrorHandler.js",
// component error render method
"errorRenderMethod": "renderErrorState",
"type": "module"
}]
]
}
`Options
$3
To generate ESM imports add option
$3
Path to your errorHandler module.
This is simple function with three arguments
js
// SSRErrorHandler.jsmodule.exports = (error, componentName, componentContext) => {
// here you can log error and return fallback component or null.
}
`$3
Component method name to render error state
Method invokes with two arguments
js
// original componentclass TestComponent extends React.PureComponent {
render() {
return
;
} renderErrorState() {
return
oops!
;
}
}// component after transformation
class TestComponent extends React.PureComponent {
render() {
try {
return this.__originalRenderMethod__();
} catch (e) {
return this.renderErrorState(e, this.constructor.name);
}
}
renderErrorState() {
return
oops!
;
} __originalRenderMethod__() {
return
;
}
}
``