<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]

FAQs

What is hx-monitor?

Is hx-monitor well maintained?

Package last updated on 11 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

hx-monitor

HXMonitor SDK

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

使用方式

Related posts

Socket for Jira Is Now Available

Socket Named Top Sales Organization by RepVue