前端监控错误日志（vue，uniapp）

需求:

1. 前端监控错误，需要错误内容以及页面的定位
2. 发送服务器
3. 包括后台（vue）和小程序(uniapp，h5)

方案——后台（VUE）：

一、 js前端异常监控

1.错误类型分析

• Js一般的运行错误
• 捕获网络请求的相关错误
• 捕获Promise错误
• 资源加载的错误

2.使用方法如下：

1. Vue专门的错误警告的方法Vue.config.errorHandler（Vue提供只能捕获其页面生命周期内的函数，比如created,mounted）

Vue.config.errorHandler = function (err) {
console.error(‘Vue.error’,err.stack)
// 逻辑处理
};

2. 使用window.onerror和window.addEventListener(‘error’)捕获。（用于捕捉网络请求、资源加载错误或者是vue自身捕捉错误方式外无法捕捉的错误）

window.onerror = function (msg, url, lineNo, columnNo, error)
{
// 处理error信息
}

window.addEventListener(‘error’, event =>
{
console.log(‘addEventListener error:’ + event.target);
}, true);
true代表在捕获阶段调用，false代表在冒泡阶段捕获。使用true或false都可以

3. 使用专门的window.addEventListener(‘unhandledrejection’)，捕获处理，（用于捕捉promise被reject并且错误信息没有被处理时，抛出的unhandledrejection）

window.addEventListener(‘unhandledrejection’, event =>
{
console.log(‘unhandledrejection:’ + event.reason); // 捕获后自定义处理
});

具体写法，结合获取的当前的时间点

const errors = []
const getTimestamp = () => {
  return format.toDate(new Date())
}

Vue.config.errorHandler = error => {
  errors.push({time: getTimestamp(), content: error.stack})
}

window.onerror = (message, source, lineno, colno, error) => {
  errors.push({time: getTimestamp(), content: error.stack})
}

window.addEventListener('error', event => {
  errors.push({time: getTimestamp(), content: event.error.stack})
})

window.addEventListener('unhandledrejection', event => {
  errors.push({time: getTimestamp(), content: event.reason})
})

setInterval(()=>{
  console.log(errors)
  if(errors.length > 0){
    const length = errors.length
    utils.post('接口名', {logs:errors}).then(response => {
      errors.splice(0,length)
    }, error => {
      console.log('保存日志报错了')
    })
  }
},3000)

方案——小程序（UNIAPP, h5）

1. 移动端需要监控的地方

• Js一般的运行错误
• 页面内的请求
• 资源加载的错误
  -用户数据统计（用户操作系统版本）

2. 初步使用方法如下：

全局使用onError函数收集异常信息（简单收集）

小程序App()生命周期里提供了onError函数，可以通过在onError里收集异常信息

 App({
      // 监听错误
      onError: function (err) {
          // 上报错误
          swan.request({
          url: "https://url", // 自行定义报告服务器
          method: "POST",
          errMsg: err
          })
      }
  })  

Vue+sentry前端异常监控

https://www.cnblogs.com/qiezuimh/p/11440506.html
https://www.zhuqiming.cn/sentry-for-vue.html

小程序fundebug监控
https://www.fundebug.com