FE.B-异常监控原理

caikeal 发布于2019-08-23 15:09 / 1448人阅读

摘要：错误主要有类语法错误脚本错误监控方式有种异常处理处理异常的能力有限，只能捕获到运行时的非异步错误，对于语法错误和异步错误就显得无能为力。

js错误主要有2类：语法错误、脚本错误;
监控方式有2种：try-catch、window.onerror

try-catch 异常处理

try-catch处理异常的能力有限，只能捕获到运行时的非异步错误，对于语法错误和异步错误就显得无能为力。

try{
error // <- 未定义变量
} catch(e) {
console.log("捕获到错误");
console.log(e);
}
//输出:
//ReferenceError: error is not defined

try {
var error = "error"； // <-大写分号
} catch(e) {
console.log("捕获不到错误");
console.log(e);
}
//输出：
//Uncaught SyntaxError: Invalid or unexpected token

try{
setTimeout(function () {
error // <- 异步错误
}, 0)
} catch(e) {
console.log("捕获不到错误");
console.log(e);
}
//输出：
//Uncaught ReferenceError: error is not defined

window.onerror 异常处理

window.onerror 捕获异常的能力比 try-catch稍强一点，无论是异步还是非异步的错误，onerror都能捕获到运行时的错误

/**
 * @param {String}  msg    错误信息
 * @param {String}  url    出错文件
 * @param {Number}  row    行号
 * @param {Number}  col    列号
 * @param {Object}  error  错误详细信息
 */
 window.onerror = function (msg, url, row, col, error) {
  console.log("捕获到运行时同步错误了");
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
error; // <- 未定义变量
//输出：
//捕获到错误了
//{msg: "Uncaught ReferenceError: error is not defined", ...}

 window.onerror = function (msg, url, row, col, error) {
  console.log("捕获到异步错误了");
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
setTimeout(() => {
  error; // <- 未定义变量
});
//输出：
//捕获到异步错误了
//{msg: "Uncaught ReferenceError: error is not defined", ...}

在实际使用中，onerror主要用来捕获预料之外的错误，try-catch则是用来在可预见情况下监控特定的错误，两者结合使用更加高效

但是对于语法错误，window.onerror还是捕获不了，所以我们在写代码的时候要尽可能避免语法错误，不过一般这种错误比较容易察觉。

除了语法错误不能捕获之外，网络异常的错误也是不能捕获的



输出：
GET http://localhost:8081/404.jpg 404 (Not Found)

这是因为网络请求是没有事件冒泡的，所以需要在捕获阶段才能捕获到异常，虽然这样可以捕获到网络的异常，但无法判断http的状态，比如该异常是404还是500，想要知道这个状态就必须和服务日志一起排查了。



输出：
GET http://localhost:8081/404.jpg 404 (Not Found)
我知道错误了
{msg: Event, url: undefined, row: undefined, col: undefined, error: undefined}

Promise的错误没有使用catch去捕获的话，上述的方式都是不能捕获到错误的。但通过监听unhandledrejection事件，可以捕获未处理的Promise错误。但是需要注意的是，这个事件是有兼容问题的。

window.addEventListener("unhandledrejection", function(e){
    e.preventDefault()
    console.log("我知道 promise 的错误了");
    console.log(e.reason);
    return true;
});
new Promise((resolve, reject) => {
    reject("promise error");
});
输出：
我知道 promise 的错误了
promise error

说完这些捕获异常的方式之后，该说说异常上报的常用方法了。

异常上报

当我们拿到报错信息之后，就需要上报这些异常信息，我们上报的方式通常有两种方法：

通过Ajax发送数据

通过动态创建img标签的形式

function report(error) {
  var reportUrl = "http://xxxx/report";
  new Image().src = reportUrl + "error=" + error;
}

script error 脚本错误

在一个域下引用了其他域的脚本，又没有去做额外的配资，就很容易产生Script error。说到最后这就是因为浏览器的同源策略产生的。所以最好我们还是使用跨源资源共享机制( CORS )

// http://localhost:8080/index.html



// http://localhost:8081/test.js
setTimeout(() => {
  console.log(error);
});

GPU云服务器云服务器 java异常程序监控监控云服务器异常云服务器内存异常监控异常处理异常

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

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

FE.B-前端性能优化

摘要：缓存长缓存随机名字长缓存策略可并行请求数避免重定向，一次重定向至少浏览器缓存不超过数据不安全存取防止出错关闭浏览器失效合理减少视觉交互反馈节流，防抖视觉欺诈分页预加载资源图片，慎用编码响应式图像字体异步加载异步加载其他系列二 http 缓存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

Anshiii 2019-08-30 15:55 评论0 收藏0
FE.B-前端性能优化

摘要：缓存长缓存随机名字长缓存策略可并行请求数避免重定向，一次重定向至少浏览器缓存不超过数据不安全存取防止出错关闭浏览器失效合理减少视觉交互反馈节流，防抖视觉欺诈分页预加载资源图片，慎用编码响应式图像字体异步加载异步加载其他系列二 http 缓存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

Scliang 2019-08-02 14:13 评论0 收藏0
FE.B-前端性能优化

摘要：缓存长缓存随机名字长缓存策略可并行请求数避免重定向，一次重定向至少浏览器缓存不超过数据不安全存取防止出错关闭浏览器失效合理减少视觉交互反馈节流，防抖视觉欺诈分页预加载资源图片，慎用编码响应式图像字体异步加载异步加载其他系列二 http 缓存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

tyheist 2019-08-26 13:31 评论0 收藏0
vivo统一告警平台设计与实践

摘要：告警当一个问题通过告警系统将消息以短信电话邮件等方式告知给用户时，我们称之为一条告警。图统一告警系统结构图告警收敛对于告警平台每天会产生数以万计的告警，这些告警对于运维或开发人员都需要去分析甄别优先级并处理故障。一、背景一套监控系统检测和告警是密不可分的，检测用来发现异常，告警用来将问题信息发送给相应的人。v...

Rocko 2021-11-22 14:56 评论0 收藏0