前端异常日志捕获-定位偶现问题

其实已经有很多文章有写过这几种实现方法了。

有些消费者端偶现的问题，严重影响了消费体验，但是作为开发要求消费者把手机邮过来联调的概率更小。为了能重现用户的链路，看下控制台有没有报错。可以全局拦截报错信息，并传入后台。

前端异常拦截

vue

// 1. errorHandler
// 2. warnHandler
// 3. renderError
// 4. errorCaptured

window.onerror

1. 可以捕捉语法错误，也可以捕捉运行时错误；
2. 可以拿到出错的信息，堆栈，出错的文件、行号、列号；
3. 只要在当前页面执行的js脚本出错都会捕捉到，例如：浏览器插件的javascript、或者flash抛出的异常等。
4. 跨域的资源需要特殊头部支持。

window.onerror = function(message, source, lineno, colno, error) { }

• message：错误消息（字符串）。在HTML onerror=""处理程序event（sic！）中可用。
• source：引发错误的脚本的URL（字符串）
• lineno：发生错误的行号（数值）
• colno：发生错误的行的列号（数值）
• error：错误对象（对象）

try catch中的console

业务属性强的，在try catch中的报错，自己写异常等级及加载机制组件，配置变量来看是否需要上报，和log4j的debug info类似。在我的项目中，对于异常的场景都是有用try catch包裹并且使用console.error进行错误日志打印的。

// 备份原有的console
var _console = console
// 自定义console，重写error方法
myConsole.error = (...arg)=>{_console.error(...arg),collect(...arg)}
myConsole.info = _console.info
// 自定义console覆盖已使用的console
window.console = myConsole;

Nginx错误日志

通过nginx日志获取,nginx中可生成access.log日志，包含所有请求接口的响应值。异常如404、401等

后端存储

1. 记录日志，用日志系统如ELK进行查询
2. 存入MongoDB，设置过期时间，不占用大内存，非结构化数据
3. 主动告警，当某种错误到达一定数量，主动发送邮件或者短信通知用户。