错误类型

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: 使用了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;}

针对资源加载错误

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);}

 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);}, 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); // 上报错误    }}

---

参考文档

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