前端 JavaScript 毛病网络

媒介

近来有个页面写好后在 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/
猎取最好浏览体验并介入议论,请接见原文

    原文作者:brook
    原文地址: https://segmentfault.com/a/1190000006847668
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞