前端错误日志收集

https://blog.csdn.net/weixin_39648546/article/details/90488550

本文链接：https://blog.csdn.net/weixin_39648546/article/details/90488550
开发人员联系方式：251746034@qq.com
代码库：https://github.com/chenjia/vue-desktop
代码库：https://github.com/chenjia/vue-app
代码库：https://github.com/chenjia/lxt
示例：http://47.100.119.102/vue-desktop
示例：http://47.100.119.102/vue-app
目的：收集前端操作过程中的错误日志，帮助分析及改善系统问题。

当前端的生产环境出现问题，希望用户能的反馈错误信息，帮助开发人员快速定位系统问题，这是每个运维人员都希望的事。但是由于行业的差异性，用户很难用专业术语准确的描述该问题，于是可以采用一些手段来帮助用户反馈该错误信息。

一、采用第三方调试工具
eruda：https://github.com/liriliri/eruda
一款类似浏览器控制台的工具，能监控日志及网络请求，绝大部分情况下可以通过该工具判断出问题的原因。而且可以动态调用是否开启该工具，其中主要查看console、network、sources。

二、前端监听错误日志，并将错误信息通过接口反馈给后台，供运维人员查看，快速分析问题原因。前端以vue开发为例：

import Vue from 'vue'
import format from './format'

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})
})

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

 

过vue的errorHandler收集错误日志，然后每隔一定时间，将日志信息通过接口的形式反馈给后台。后台人员在系统中监控该用户的日志。

————————————————
版权声明：本文为CSDN博主「风凝泪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39648546/article/details/90488550