前端 JavaScript 错误收集

时间 2019-11-09

原文原文链接

前言

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

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

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

前端

解决跨域问题

script 添加 crossorigin 属性java
```
<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个参数看名字就能知道大概意思了。
error，Error Object (object) 表示当前错误对象，包含当前错误比较详细的堆栈等信息，须要比较新的浏览器才有这个参数。服务器

总结

这样咱们就能够利用 onerror 收集用户的 JavaScript 报错信息了cors

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

参考连接

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