@doochik/babel-plugin-transform-react-ssr-try-catch

Wraps render() method in React.Component with try-catch statement

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@doochik/babel-plugin-transform-react-ssr-try-catch
403.0.14 years ago5 years agoMinified + gzip package size for @doochik/babel-plugin-transform-react-ssr-try-catch in KB

Readme

Build Status
@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 event 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",
        }]
    ]
}

Options

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