读书笔记(04) - 错误监控 - JavaScript高级程序设计

读书笔记(04) - 错误监控 - JavaScript高级程序设计

错误类型

  1. 即时运行错误 (代码错误)

  2. 资源加载错误

常见的错误

1. 类型转换错误

建议使用全等===操作符

2.数据类型错误

建议加强类型判断

// 数组倒序
function reverseSort(value) {
if (value instanceof Array) {
// 使用instanceof验证数据类型
// (基础类型用typeof, 引用类型用instanceof)
value.sort();
value.revere()
}
}
3. 通信错误

url参数编码错误造成,建议使用encodeURIComponent()对url参数数据进行编码

// 错误的url参数
// http://www.xxx.com/?redir=http://www.xxx.com?a=b&c=d // 针对redir后面的参数字符串进行编码 // 封装一个处理方法(摘自书中代码)
function addQueryStringArg(url, name, value) {
if (url.indexOf('?') < 0) {
url += '?';
} else {
url += '&';
}
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}

错误的捕获方式

针对即时运行错误
  1. try-catch(代码可疑区域可增加try-catch

  2. window.onerror (全局监控js错误异常)

1. try-catch
try {
// 可能会导致错误的代码
} catch (error) {
// 错误发生时处理
console.log(error.message);
} finally {
// 一定会执行(无论是否发生错误)
}

TIPS: 使用了finallytrycatchreturn语句都会被忽略

function testFinally() {
try {
return 2;
} catch (error) {
return 1;
} finally {
return 0;
}
} // testFinally 最终返回 0

TIPS: try-catch只能捕获同步运行的代码错误,无法检测语法和异步错误

(语法可借助ESlint工具在开发阶段提示解决)

2. window.onerror

遵循DOM0级事件,window.onerror事件处理程序不会创建event对象,但可以接收三个参数message(错误信息), url(错误文件url), line(行号)

window.onerror = function(message, url, line){
console.log(message, ulr, line);
};

在事件处理程序中返回false,可以阻止浏览器报告错误的默认行为

window.onerror = function(message, url, line) {
return false;
}
针对资源加载错误
  1. object.onerror

  2. performance.getEntries()

  3. Error事件捕获 (全局监控静态资源异常)

1. object.onerror

如script,image等标签src引用,会返回一个event对象

TIPS: object.onerror不会冒泡到window对象,所以window.onerror无法监控资源加载错误

var img = new Image();
img.src = 'http://xxx.com/xxx.jpg';
img.onerror = function(event) {
console.log(event);
}

读书笔记(04) - 错误监控 - JavaScript高级程序设计

2. window.performance.getEntires()

适用高版本浏览器,返回已成功加载的资源列表,然后自行做比对差集运算,核实哪些文件没有加载成功

var result = [];
window.performance.getEntries().forEach(function (perf) {
result.push({
'url': perf.name,
'entryType': perf.entryType,
'type': perf.initiatorType,
'duration(ms)': perf.duration
});
});
console.log(result);

读书笔记(04) - 错误监控 - JavaScript高级程序设计

3. Error事件捕获
window.addEventListener('error', function(error){
//...(全局监控静态资源异常)
console.log(error);
}, true); // 默认false为冒泡阶段触发,true为捕获阶段触发

跨域的js错误捕获

一般涉及跨域的js运行错误时会抛出错误提示script error,但没有具体信息(如出错文件,行列号提示等), 可利用资源共享策略来捕获跨域js错误

  1. 客户端:在script标签增加crossorigin属性(客户端)

  2. 服务端:js资源响应头Access-Control-Allow-Origin: *

错误上报

  1. Ajax请求 (会有跨域问题)

  2. 动态创建Image标签 (兼容完美,代码简洁,需要注意浏览器url长度限制)

Image标签
(new Image()).src= 'http://xxx.com/error?code=1002'
上报频率

错误信息频繁发送上报请求,会对后端服务器造成压力。

项目中我们可通过设置采集率,或对规定时间内数据汇总再上报,减少请求数量,从而缓解服务端压力。

// 借鉴别人的一个例子
Reporter.send=function(data) {
// 只采集30%
if(Math.random() < 0.3) {
send(data); // 上报错误
}
}

参考文档

作者:以乐之名本文原创,有不当的地方欢迎指出。转载请指明出处。

上一篇:Libcurl的编译_HTTP/HTTPSclient源代码演示样例


下一篇:07_数据库创建,添加c3p0操作所需的jar包,编写c3p0-config.xml文件,编写User.java,编写jdbcUtils.java实现操作数据库的模板工具类,UserDao编写,Dao