前端 JavaScript 错误收集

brook

前言

最近有个页面写好后在 Chrome devtools 里运行正常,但是手机上运行时却出了问题,就想着在代码里添加下面的内容,到手机上显示错误消息

window.onerror = function (msg, url, lineNo, columnNo, error) {
  alert('Error: ' + msg + ' Script: ' + url + '\nPosition: ' + lineNo + ' / ' + columnNo
   + '\nStackTrace: ' +  error);
  return false;
};

可是到手机上一看,错误信息并没有打印出来,而是 Error: Script error
只好放狗 (Google) 一查,原来是跨域问题

<!--more-->

解决跨域问题

  • script 添加 crossorigin 属性

    <script crossorigin src="...">
  • 然后为 js 文件添加跨域 header Access-Control-Allow-Origin: *怎样添加?

收集 JavaScript 错误

在工作中,我们经常遇到本地无法重现的错误,我们可以将 onerror 捕获的错误信息提交到服务器,这样我们就知道用户在访问我们的网页时的 js 错误,方便 BUG 定位等。

window.onerror = function (msg, url, lineNo, columnNo, error) {
  var errorData = {
    msg: msg,
    url: url,
    lineNo: lineNo,
    columnNo: columnNo,
    error: error,
    ua: navigator.userAgent // 需要的调试的其它信息也可以收集,比如已登录的用户id
  };
  $.post('/js-logger', errorData);
  return false;
};

参数解析

msg, url, lineNo, columnNo, 这4个参数看名字就能知道大概意思了。
errorError Object (object) 表示当前错误对象,包含当前错误比较详细的堆栈等信息,需要比较新的浏览器才有这个参数。

总结

这样我们就可以利用 onerror 收集用户的 JavaScript 报错信息了

完整的 JavaScript 错误收集系统见下面的参考链接。

参考链接

原文地址:https://uedsky.com/2016-09/catch-javascript-error/
获取最佳阅读体验并参与讨论,请访问原文

阅读 8k

前端小站
CSS, javascript, gulp, front end, .etc

Front end developer v.12

3.1k 声望
55 粉丝
0 条评论

Front end developer v.12

3.1k 声望
55 粉丝
文章目录
宣传栏