前端 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/
获取最佳阅读体验并参与讨论,请访问原文


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

Front end developer v.12

3.1k 声望
55 粉丝
0 条评论
推荐阅读
微信小程序开发一周总结
编辑器 我直接用 vscode(其它编辑器同理,预览还是用的微信开发工具),语法高亮将 wxml 设置成 html, wxss 设置成 css {代码...} 也可以安装小程序相关插件 开始写代码 首先需要完整看完微信小程序文档(框架,...

brook5阅读 10.6k评论 2

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木65阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木42阅读 7.3k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木33阅读 6.1k评论 9

Front end developer v.12

3.1k 声望
55 粉丝
宣传栏