https://github.com/doochik/babel-plugin-transform-react-ssr-try-catch
Wraps render() method in React.Component with try-catch statement
https://github.com/doochik/babel-plugin-transform-react-ssr-try-catch
Last synced: 12 months ago
JSON representation
Wraps render() method in React.Component with try-catch statement
- Host: GitHub
- URL: https://github.com/doochik/babel-plugin-transform-react-ssr-try-catch
- Owner: doochik
- License: mit
- Created: 2017-10-26T14:17:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T18:08:58.000Z (about 2 years ago)
- Last Synced: 2024-04-24T19:08:41.505Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 228 KB
- Stars: 4
- Watchers: 12
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @doochik/babel-plugin-transform-react-ssr-try-catch
Babel plugin to wrap render() method in React.Component with try-catch statement.
## Motivation
React 16 has [error handling](https://reactjs.org/blog/2017/09/26/react-v16.0.html#better-error-handling) but for [client rendering only](https://github.com/facebook/react/issues/10442).
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
### `type`
To generate ESM imports add option `type='module'`
### `errorHandler`
Path to your errorHandler module.
This is simple function with three arguments `(error, componentName, componentContext)`
```js
// SSRErrorHandler.js
module.exports = (error, componentName, componentContext) => {
// here you can log error and return fallback component or null.
}
```
### `errorRenderMethod`
Component method name to render error state
Method invokes with two arguments `(error, componentName)`
```js
// original component
class 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
;
}
}
```