catch-react-error

English | 简体中文

Why we create catch-react-error

Introduction

This package supports both React And React Native.

This project make it easy to protect your react source code。

We combine decorators and React Error Boundaries together.

The React Error Boundaries don't support the Server Side Rendering，so we use try/catch to deal such condition.

The catch-react-error takes only one argument,React Error Boundary Component which we provide DefaultErrorBoundary as the default one.

const catchreacterror = (Boundary = DefaultErrorBoundary) => {};

Demo

we provide some demo, so you can understand the library more clearly

client side render

cd example-client
npm install
npm run dev

server side render

cd example-server
npm install
npm run dev

How to use

1.install catch-react-error

npm install catch-react-error --save

2. Install ES7 Decorator babel plugin

npm install --save-dev @babel/plugin-proposal-decorators
npm install --save-dev @babel/plugin-proposal-class-properties

babel plugin configuration

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

3. import catch-react-error

import catchreacterror from "catch-react-error";

4. Use @catchreacterror on class component

@catchreacterror()
class Count extends React.Component {
  render() {
    const { count } = this.props;
    if (count === 3) {
      throw new Error("count is three");
    }
    return <h1>{count}</h1>;
  }
}

5. Use @catchreacterror on functionc component

function Count({ count }) {
  if (count === 3) {
    throw new Error("count is three");
  }
  return <h1>{count}</h1>;
}

const SaleCount = catchreacterror()(Count);

6. Add a CustomErrorBoundary component

• First, create an normal Error Boundary Component and change it

class CustomErrorBoundary extends React.Component {
  constructor (props) {
    super (props);
    this.state = {hasError: false};
  }

  static getDerivedStateFromError (error) {
    return {hasError: true};
  }

  componentDidCatch (error, errorInfo) {
      //do something as needed
    reportToMyLogService (error, errorInfo);
  }

  render () {
    if (this.state.hasError) {
      return <h1> Something with my app,fallback ui. </ h1>;
    }
  }

    return this.props.children;
  }
}

• Second, pass it as the argument

@catchreacterror(CustomErrorBoundary)
class Count extends React.Component {}

or

const SaleCount = catchreacterror(CustomErrorBoundary)(Count);

TODO

• curried function
• log to sentry

License

MIT.