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

文章图片
coding 错误类型

即时运行错误 (代码错误)
资源加载错误

常见的错误 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; }

针对资源加载错误

【读书笔记(04)|读书笔记(04) - 错误监控 - JavaScript高级程序设计】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); }

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

文章图片
object.onerror 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);