DEPRECATED: This feature was already implemented on the original source since v3.0.0, so please use from https://github.com/doochik/babel-plugin-transform-react-ssr-try-catch instead, Sorry for the inconvenience!

Babel plugin to wrap render() method in React.Component with try-catch statement.

Motivation

React 16 has error handling but for client rendering only.

This plugin performs simple transform which wraps render() method with try-catch. Just make sure to put ERRORBOUNDARY_render() method in your Class-based components. Example:

// MyComponent.js
class MyComponent extends React.PureComponent {
  ERRORBOUNDARY_render() {
    return <p>An error happened. Please try again later!</p>;
  }

  render() {
    return <div />;
  }
}

That component will be transformed to:

// MyComponent.js
class MyComponent extends React.PureComponent {
  render() {
    try {
      return this.__originalRenderMethod__();
    } catch (e) {
      return this.ERRORBOUNDARY_render(e, this.constructor.name);
    }
  }

  ERRORBOUNDARY_render() {
    return <p>An error happened. Please try again later!</p>;
  }

  __originalRenderMethod__() {
    return <div />;
  }
}

Actually, this is a temporary solution until React has support error handling in SSR.

Installation

npm install --save-dev dwicao-babel-plugin-transform-react-ssr-try-catch

Usage

.babelrc

{
  "plugins": [
    ["dwicao-babel-plugin-transform-react-ssr-try-catch"]
  ]
}