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

Null 发布于2019-08-23 13:55 / 1034人阅读

摘要：项目中我们可通过设置采集率，或对规定时间内数据汇总再上报，减少请求数量，从而缓解服务端压力。借鉴别人的一个例子只采集上报错误参考文档高级程序设计如何优雅处理前端异常作者以乐之名本文原创，有不当的地方欢迎指出。

错误类型

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

资源加载错误

常见的错误

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);
}, true);  // 默认false为冒泡阶段触发，true为捕获阶段触发

跨域的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高级程序设计》

《如何优雅处理前端异常》

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

云服务器 GPU云服务器高级程序设计-笔记读书笔记编程思想读书笔记大数据时代读书笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99769.html

读书笔记(02) - 可维护性 - JavaScript高级程序设计

摘要：解耦优势代码复用，单元测试。常用比较误区可同时判断，可用来判断对象属性是否存在。使用作判断无法进行充分的类型检查。文件中应用常量参考文档高级程序设计作者以乐之名本文原创，有不当的地方欢迎指出。 showImg(https://segmentfault.com/img/bVburXw?w=500&h=400); 编写可维护性代码可维护的代码遵循原则：可理解性（方便他人理解）直观...

k00baa 2019-08-23 13:51 评论0 收藏0
Ajax与Comet-JavaScript高级程序设计第21章读书笔记(1)

摘要：技术的核心是对象即。收到响应后，响应的数据会自动填充对象的属性，相关的属性有作为响应主体被返回的文本。收到响应后，一般来说，会先判断是否为，这是此次请求成功的标志。中的版本会将设置为，而中原生的则会将规范化为。会在取得时报告的值为。 Ajax(Asynchronous Javascript + XML)技术的核心是XMLHttpRequest对象,即: XHR。虽然名字中包含XML，但...

imingyu 2019-08-20 16:27 评论0 收藏0
002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript

摘要：文件内部使用使用到的代码引入外部文件外部代码的地址标签的位置一般情况下，标签的位置放在标签中引入代码页面结构对于需要引入很多的中间，如果把放在头部，无疑会导致浏览器呈现页面出现延迟，就是导致页面出现空白。页面结构引入代码这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第二章。 1.使用方式在HTML中使用 JavaScript 的方式有两种，第一种就是直接内...

banana_pi 2019-08-22 11:13 评论0 收藏0
001-读书笔记-JavaScript高级程序设计 JavaScript简介

摘要：由于计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。规范由万维网联盟制定。级标准级标准是不存在的，级一般指的是最初支持的。这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是欧洲计算机制造商协会的缩写，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 评论0 收藏0
《JavaScript高级程序设计》（第3版）读书笔记第1~2章

摘要：表示应该立即下载脚本，但不应妨碍页面中的其他操作可选。表示通过属性指定的代码的字符集。表示脚本可以延迟到文档完全被解析和显示之后再执行。实际上，服务器在传送文件时使用的类型通常是，但在中设置这个值却可能导致脚本被忽略。第1章 JavaScript 简介虽然JavaScript和ECMAScript通常被人们用来表达相同的含义，但JavaScript的含义比ECMA-262要多得多...

Corwien 2019-08-23 17:18 评论0 收藏0