前端错误日志收集

开发人员联系方式：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收集错误日志，然后每隔一定时间，将日志信息通过接口的形式反馈给后台。后台人员在系统中监控该用户的日志。