https://github.com/Fundebug/fundebug-react-demo

演示React项目如何接入Fundebug错误监控服务
https://github.com/Fundebug/fundebug-react-demo

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Fundebug/fundebug-react-demo
• Owner: Fundebug
• Created: 2018-10-29T11:50:44.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-09-10T22:50:04.000Z (about 5 years ago)
• Last Synced: 2024-07-31T12:07:40.773Z (3 months ago)
• Language: JavaScript
• Size: 157 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• favorite-link - 演示 React 项目如何接入 Fundebug 错误监控服务。

README

        
## [Fundebug](https://www.fundebug.com/)监控[React](https://facebook.github.io/react/)应用错误

### 安装[fundebug-javascript](https://www.npmjs.com/package/fundebug-javascript)

```js

npm install fundebug-javascript

```

### 配置apikey

```js

var fundebug=require("fundebug-javascript");

fundebug.apikey="API-KEY"

```

其中，获取**apikey**需要[免费注册](https://www.fundebug.com/team/create)帐号并且[创建项目](https://www.fundebug.com/project/create)。

### 配置ErrorBoundary

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

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

```javascript

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 
出错了!
;

    }

    return this.props.children;

  }

}


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

```

### 参考

- [Fundebug文档 - 监控React](https://docs.fundebug.com/notifier/javascript/framework/react.html)