阅读目录

• 什么是前端代码异常 
• window.onerror
• 写一个js报错的上报库
• 注意点：
• 缺点：

在平时的工作，js报错是比较常见的一个情景，尤其是有一些错误可能我们在本地测试的时候测试不出来，当发布到线上之后才可以发现，如果抢救及时，那还好，假如很晚才发

现，那就可能造成很大的损失了。如果我们前端可以监控到这种报错，并及时上报的话，那我们的问题就比较好解决了。所以我们今天来聊聊前端代码的异常监控

什么是前端代码异常 

一般语法错误以及运行时错误，浏览器都会在console里边体现出错误信息，以及出错的文件，行号，堆栈信息。

我们先来说手前端代码异常是什么意思。前端代码异常指的是以下两种情况：

1、JS脚本里边存着语法错误；

2、JS脚本在运行时发生错误。

类似于这种：

for(var i=0;i<l;i++){
 console.log(i);
}

那么我们如何来捕获这种异常呢，有两种方法，

第一种是try..catch

第二种是 window.onerror

由于try.catch 没法捕捉到全局的错误事件，也即是说 只有try,catch的块里边运行出错才会被你捕捉到。所以我们这里排除它的这种方案，

来采用第二种方法，也就是window.onerror方法。

window.onerror

打开浏览器自带的开发者工具，当一个错误发生时，我们可以立刻得到提示，并且知道错误发生的位置以及调用的堆栈信息。

我们可以通过 window.onerror 来捕获页面上的各种脚本执行异常，它能帮助我们获取有用的信息。但是这个方法存在兼容性问题，在不同的浏览器上提供的数据不完全一致，

部分过时的浏览器只能提供部分数据。它的用法如下:

window.onerror = function (message, url, lineNo, columnNo, error)

五个参数的含义如下：

1、message {String} 错误信息。直观的错误描述信息，不过有时候你确实无法从这里面看出端倪，特别是压缩后脚本的报错信息，可能让你更加疑惑。

2、url {String} 发生错误对应的脚本路径，比如是你的http://a.js报错了还是http://b.js报错了。

3、lineNo {Number} 错误发生的行号。

4、columnNo {Number} 错误发生的列号。

5、error {Object} 具体的 error 对象，包含更加详细的错误调用堆栈信息，这对于定位错误非常有帮助。

兼容性问题

不同浏览器对同一个错误的 message 是不一样的。

IE10以下浏览器只能获取到 message，url 和 lineNo这三个参数，获取不到columnNo 和 error

不过 window.event 对象提供了 errorLine 和 errorCharacter，以此来对应相应的行列号信息。

在使用onerror的时候，我们可以使用arguments.callee.caller 来递归出调用堆栈，这一类信息是最直接的错误信息信息，所以是必须要捕获并上报的。后面我们会用js去示范。

不同浏览器默认可获取的参数值：

写一个js报错的上报库

既然知道了window.onerror的用法，为啥我们不来写一个js库来监控我们的前端js,废话少说，写之。

实现思路：

1、收集window.onerror的五个参数

2、除了那五个参数，可以增加自定义参数

3、发送到后台服务器

我们暂且给我们的库起名为 badJsReport

原理比较简单，代码如下：

/**
 * Name: badJsReport.js
 * Version 1.1.0
 * Author xianyulaodi
 * Address: https://github.com/xianyulaodi/badJsReport
 * Released on: December 22, 2016
 */
;(function(){
 'use strict';
 if (window.badJsReport){ 
 return window.badJsReport 
 };
 /*
 * 默认上报的错误信息
 */ 
 var defaults = {
 msg:'', //错误的具体信息
 url:'', //错误所在的url
 line:'', //错误所在的行
 col:'', //错误所在的列
 error:'', //具体的error对象
 };
 /*
 *ajax封装
 */
 function ajax(options) {
 options = options || {};
 options.type = (options.type || "GET").toUpperCase();
 options.dataType = options.dataType || "json";
 var params = formatParams(options.data);
 if (window.XMLHttpRequest) {
 var xhr = new XMLHttpRequest();
 } else { 
 var xhr = new ActiveXObject('Microsoft.XMLHTTP');
 }
 xhr.onreadystatechange = function () {
 if (xhr.readyState == 4) {
 var status = xhr.status;
 if (status >= 200 && status < 300) {
  options.success && options.success(xhr.responseText, xhr.responseXML);
 } else {
  options.fail && options.fail(status);
 }
 }
 }
 if (options.type == "GET") {
 xhr.open("GET", options.url + "?" + params, true);
 xhr.send(null);
 } else if (options.type == "POST") {
 xhr.open("POST", options.url, true);
 //设置表单提交时的内容类型
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xhr.send(params);
 }
 }
 /*
 *格式化参数
 */
 function formatParams(data) {
 var arr = [];
 for (var name in data) {
 arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
 }
 arr.push(("v=" + Math.random()).replace(".",""));
 return arr.join("&");
 }
 /*
 * 合并对象，将配置的参数也一并上报
 */
 function cloneObj(oldObj) { //复制对象方法
 if (typeof(oldObj) != 'object') return oldObj;
 if (oldObj == null) return oldObj;
 var newObj = new Object();
 for (var prop in oldObj)
 newObj[prop] = oldObj[prop];
 return newObj;
 };
 function extendObj() { //扩展对象
 var args = arguments;
 if (args.length < 2) {return;}
 var temp = cloneObj(args[0]); //调用复制对象方法
 for (var n = 1,len=args.length; n <len; n++){
 for (var index in args[n]) {
 temp[index] = args[n][index];
 }
 }
 return temp;
 }
 /**
 * 核心代码区
 **/
 var badJsReport=function(params){
 if(!params.url){return}
 window.onerror = function(msg,url,line,col,error){
 //采用异步的方式,避免阻塞
 setTimeout(function(){
 //不一定所有浏览器都支持col参数，如果不支持就用window.event来兼容
 col = col || (window.event && window.event.errorCharacter) || 0;
 defaults.url = url;
 defaults.line = line;
 defaults.col = col;
 if (error && error.stack){
  //如果浏览器有堆栈信息，直接使用
  defaults.msg = error.stack.toString();
 }else if (arguments.callee){
  //尝试通过callee拿堆栈信息
  var ext = [];
  var fn = arguments.callee.caller;
  var floor = 3; //这里只拿三层堆栈信息
  while (fn && (--floor>0)) {
  ext.push(fn.toString());
  if (fn === fn.caller) {
  break;//如果有环
  }
  fn = fn.caller;
  }
  ext = ext.join(",");
  defaults.msg = error.stack.toString();
 }
 // 合并上报的数据，包括默认上报的数据和自定义上报的数据
 var reportData=extendObj(params.data || {},defaults);
 // 把错误信息发送给后台
 ajax({
  url: params.url, //请求地址
  type: "POST", //请求方式
  data: reportData, //请求参数
  dataType: "json",
  success: function (response, xml) {
  // 此处放成功后执行的代码
params.successCallBack&&params.successCallBack(response, xml);
  },
  fail: function (status) {
  // 此处放失败后执行的代码
  params.failCallBack&&params.failCallBack(status);
  }
  });
 },0);
 return true; //错误不会console浏览器上,如需要，可将这样注释
 };
 }
 window.badJsReport=badJsReport;
})();
/*===========================
badJsReport AMD Export
===========================*/
if (typeof(module) !== 'undefined'){
 module.exports = window.badJsReport;
}
else if (typeof define === 'function' && define.amd) {
 define([], function () {
 'use strict';
 return window.badJsReport;
 });
}

我们封装了原生ajax,还有将上报的参数对象合并。并暴露了一个全局方法 badJsReport

使用方法:

1、将badJsReport.js加载到其他的js之前

2、简单的使用方法：（这个执行方法要放在其他代码执行之前）

badJsReport({
 url:'http://www.baidu.com', //发送到后台的url *必须
})

3、如果需要新增上报参数，或者要知道发送给后台的回调。可以用下面的方法

badJsReport({
 url:'http://www.baidu.com', //发送到后台的url *必须
 data:{}, //自定义添加上报参数，比如app版本，浏览器版本 -可省略
 successCallBack:function(response, xml){
 // 发送给后台成功的回调，-可省略
 },
 failCallBack:function(error){
 // 发送给后台失败的回调，-可省略
 }
})

注意点：

1、对于跨域的JS资源，window.onerror拿不到详细的信息，需要往资源的请求添加额外的头部。

静态资源请求需要加多一个Access-Control-Allow-Origin头部，也就是需要后台加一个Access-Control-Allow-Origin，同时script引入外链的标签需要加多一个crossorigin的属性。这样就可以获取准确的出错信息。

2、因为代码的最后return true，所以如果有错误信息，浏览器不会console出来，如果需要浏览器console，可以注释掉最后的return true

缺点：

对于压缩之后的代码，我们得到错误的信息，但是我们却无法定位到错误的行数，比如jquery的源码压缩，总共才3行。这样就很难定位到具体的地方了，因为一行有很多很多的代码。

代码我放到了github上：https://github.com/xianyulaodi/badJsReport

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js  # 异常监控  # js前端埋点监控解析  # JavaScript架构搭建前端监控如何采集异常数据  # JavaScript架构前端监控搭建过程步骤  # JavaScript架构前端不能没有监控系统原因  # 使用Javascript监控前端相关数据的代码  # JS前端监控采集用户行为的N种姿势  # 报错  # 错误信息  # 加多  # 行号  # 自定义  # 发送到  # 发送给  # 回调  # 我们可以  # 错了  # 递归  # 发生错误  # 捉到  # 器上  # 让你  # 放在  # 尤其是  # 那就  # 很难  # 有很多 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 实例解析angularjs的filter过滤器  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  Laravel观察者模式如何使用_Laravel Model Observer配置  laravel怎么使用数据库工厂（Factory）生成带有关联模型的数据_laravel Factory生成关联数据方法  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  如何快速使用云服务器搭建个人网站？  大学网站设计制作软件有哪些,如何将网站制作成自己app？  如何正确下载安装西数主机建站助手？  JS弹性运动实现方法分析  黑客入侵网站服务器的常见手法有哪些？  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  Laravel如何编写单元测试和功能测试？（PHPUnit示例）  Laravel如何实现本地化和多语言支持？（i18n教程）  高防服务器租用指南：配置选择与快速部署攻略  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  Linux系统运维自动化项目教程_Ansible批量管理实战  如何在香港服务器上快速搭建免备案网站？  如何在云指建站中生成FTP站点？  如何正确选择百度移动适配建站域名？  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  如何在Windows虚拟主机上快速搭建网站？  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  如何在阿里云购买域名并搭建网站？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  利用 Google AI 进行 YouTube 视频 SEO 描述优化  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  JavaScript如何操作视频_媒体API怎么控制播放  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  长沙做网站要多少钱,长沙国安网络怎么样？  油猴 教程,油猴搜脚本为什么会网页无法显示？  文字头像制作网站推荐软件,醒图能自动配文字吗？  高端企业智能建站程序：SEO优化与响应式模板定制开发  简历没回改：利用AI润色让你的文字更专业  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  如何用腾讯建站主机快速创建免费网站？  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  非常酷的网站设计制作软件,酷培ai教育官方网站？  Java遍历集合的三种方式  Laravel如何使用Eloquent进行子查询