/fundebug-react-demo

演示React项目如何接入Fundebug错误监控服务

Primary LanguageJavaScript

Fundebug监控React应用错误

安装fundebug-javascript

npm install fundebug-javascript

配置apikey

var fundebug=require("fundebug-javascript");
fundebug.apikey="API-KEY"

其中，获取apikey需要免费注册帐号并且创建项目。

配置ErrorBoundary

React 16之前的版本，无需额外配置。

对于React 16及其以后的版本，需要在src/index.js中进行额外配置：

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

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // 将component中的报错发送到Fundebug
    fundebug.notifyError(error, {
      metaData: {
        info: info
      }
    });
  }

  render() {
    if (this.state.hasError) {
      return null
      // 也可以在出错的component处展示出错信息
      // return <h1>出错了!</h1>;
    }
    return this.props.children;
  }
}

ReactDOM.render( < ErrorBoundary > < App / > < /ErrorBoundary>, document.getElementById('root'));

参考