错误类型
即时运行错误 (代码错误)
资源加载错误
常见的错误类型
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;
}
错误的捕获方式
针对即时运行错误
try-catch（代码可疑区域可增加 try-catch）
window.onerror (全局监控 js 错误异常)
1. try-catch
try {
// 可能会导致错误的代码
} catch (error) {
// 错误发生时处理
console.log(error.message);
} finally {
// 一定会执行 (无论是否发生错误)
}
TIPS: 使用了 finally，try 跟 catch 的 return 语句都会被忽略
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;
}
针对资源加载错误
object.onerror
performance.getEntries()
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);
}
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);
3. Error 事件捕获
window.addEventListener(‘error’, function(error){
//…（全局监控静态资源异常）
console.log(error);
})
跨域的 js 错误捕获
一般涉及跨域的 js 运行错误时会抛出错误提示 script error，但没有具体信息（如出错文件，行列号提示等）, 可利用资源共享策略来捕获跨域 js 错误
客户端：在 script 标签增加 crossorigin 属性（客户端）
服务端：js 资源响应头 Access-Control-Allow-Origin: *
错误上报
Ajax 请求 (会有跨域问题)
动态创建 Image 标签 (兼容完美，代码简洁，需要注意浏览器 url 长度限制)
Image 标签
(new Image()).src= ‘http://xxx.com/error?code=1002’
上报频率
错误信息频繁发送上报请求，会对后端服务器造成压力。项目中我们可通过设置采集率，或对规定时间内数据汇总再上报，减少请求数量，从而缓解服务端压力。
// 借鉴别人的一个例子
Reporter.send=function(data) {
// 只采集 30%
if（Math.random() < 0.3) {
send(data); // 上报错误
}
}
*
参考文档
《JavaScript 高级程序设计》
《如何优雅处理前端异常》
作者：以乐之名本文原创，有不当的地方欢迎指出。转载请指明出处。