New Powerful Machines

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

    3.0.1 • Public • Published

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

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    4,677

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    19.7 kB

    Total Files

    16

    Last publish

    Collaborators

    • doochik