读书笔记(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); // 上报毛病
    }
}

参考文档

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

    原文作者:以乐之名
    原文地址: https://segmentfault.com/a/1190000017279336
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞