@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 but for client rendering only.

This plugin performs simple transform which wraps every render() method with try-catch. Example:

// MyComponent.js

class MyCompoenent extends React.PureComponent {
  render() {
    return <div/>;
  }
}

This component will be transofmed to:

// 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 <div />;
  }
}

Actually, this is temporary solution until React doesn't support error handling in SSR.

Installation

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

{
    "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)

// 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)

// original component

class TestComponent extends React.PureComponent {
    render() {
        return <div/>;
    }

    renderErrorState() {
        return <p>oops!</p>;
    }
}

// component after transformation
class TestComponent extends React.PureComponent {
    render() {
        try {
            return this.__originalRenderMethod__();
        } catch (e) {
            return this.renderErrorState(e, this.constructor.name);
        }
    }

    renderErrorState() {
        return <p>oops!</p>;
    }

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