Hx-monitor NPM

HXMonitor SDK

HXMonitor SDK是一个浏览器性能信息，错误信息上报SDK

使用方式

浏览器直接使用

1.下载 dist/hx-monitor 到本地

2.使用script标签引入到html的头部（备注：放到所有js资源之前）

3.使用HXMonitor函数进行数据的监听上报

<html>
<head>
  <meta charset="UTF-8">
  <title>performance test</title>
  <script src="../dist/hx-monitor"></script>
  <script>
    HXMonitor({
        appkey: 'appkey', //Your appkey
    })
  </script>
</head>

webpack使用

1.下载

  cnpm install hx-monitor -S

2.import HXMonitor from 'hx-monitor'

import HXMonitor from 'hx-monitor'

HXMonitor({
        appkey: 'appkey', //Your appkey
})

对外方法addError()

Use vue

// in main.js 
import HXMonitor from 'hx-monitor'

HXMonitor({
        appkey: 'appkey', //Your appkey
})
// 使用此方法后vue的错误将不会在控制台打印
Vue.config.errorHandler = function (err, vm, info) {
   console.error(err) // 为方便调试
   HXMonitor.addError('vue',err)
}

Use react

// in index.js
import HXMonitor from 'hx-monitor'

HXMonitor({
        appkey: 'appkey', //Your appkey
})

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

  componentDidCatch(err, info) {
    this.setState({ hasError: true });
    // 将component中的报错发送到HXMonitor
    HXMonitor.addError('react',err)
  }

  render() {
    if (this.state.hasError) {
      return null;
      // Note: 也可以在出错的component处展示出错信息，返回自定义的结果。
    }
    return this.props.children;
  }
}

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

参数说明

参数	说明	是否必填	默认值	备注
appkey	申请的appkey	是	无	需从监控平台添加项目，并获取appkey
reportURL	数据上报的地址	否	http://localhost:3000
_isError	是否监控前端错误	否	true
_isPerformance	是否上报页面性能	否	true
_isFilterUrl	是否过滤本地的url(本地调试环境)	否	true
filterUrl	接上条，过滤的主机名列表	否	'','localhost'	''是本地直接打开的主机名，'localhost'是本地服务主机名
_isAjax	是否上报ajax错误	否	true
_isAxios	是否上报axios错误	否	false
_isChectAjaxStatus	是否上报成功接口非正常状态	否	false	上传的是接口成功后状态不对的接口，和ajaxChectStatus配合使用
ajaxChectStatus	上传上报成功接口非正常状态的条件	否	[]	传2个值。如 'code',200