前端 JavaScript 毛病网络

2024年1月25日 246次阅读 来源: 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个参数看名字就可以晓得也许意义了。
error，Error Object (object) 示意当前毛病对象，包括当前毛病比较细致的客栈等信息，须要比较新的浏览器才有这个参数。

总结

如许我们就可以够应用 onerror 网络用户的 JavaScript 报错信息了

完全的 JavaScript 毛病网络体系见下面的参考链接。

参考链接

原文地点：https://uedsky.com/2016-09/catch-javascript-error/
猎取最好浏览体验并介入议论，请接见原文

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