批评前端十分捕获与举报,捕获至极

作者:计算机知识

关于

  • 微信公众号:前端呼啦圈(Love-FED)
  • 自家的博客:劳卜的博客
  • 今日头条专栏:前者呼啦圈

前者品质与那一个申报

2018/08/22 · 基础技巧 · 性能

原来的书文出处: counterxing   

/*try
     {
                        ProTestMode(FALSE, FALSE);
     }
     catch(CException *e)
     {
      TCHAR szCause[1024];
      e->GetErrorMessage(szCause,1024);
批评前端十分捕获与举报,捕获至极。      
      TRACE(_T("Exception: %s/n"),szCause);
      //AfxMessageBox(szCause);
     }*/

当遭受非常时,除了可以将13分抛出,还是能够将其擒获。抛出尽管简易,不过偶尔却只可以动用捕获来拍卖非常。假设程序境遇特别而从不捕获,则程序会平素退出。那在大多动静下是不可能被接受的,至少必要保留程序当前气象才具脱离。本实例将演示怎么着捕获多少个极度,实例运营作效果果如图

前言

Hello,我们好,又与大家照面了,本次给大家分享下前端至极监察和控制中须要通晓的特别捕获与反映机制的局部核心,同期涵盖了实战性质的参阅代码和流程。

先是,我们为何要进行特别捕获和汇报呢?

正所谓百密壹疏,一个经过了大量测试及联调的种类在有一些时候依旧会有那些东躲海南的bug存在,这种复杂而又不足预言性的难题无非通过健全的监督体制技巧管用的缩减其带来的损失,由此对此直面用户的前端来说,非凡捕获与举报是最重要的。

就算近些日子市面晚春经有1对不行完美的前端监察和控制连串设有,如sentry、bugsnag等,不过知己知彼,技艺不败之地,唯有精通原理,摸清逻辑,使用起来本事百步穿杨。

概述

对此后台开辟以来,记录日志是一种特别分布的开支习贯,平日我们会动用try...catch代码块来积极抓获错误、对于每回接口调用,也会记录下每趟接口调用的光阴费用,以便我们监察和控制服务器接口品质,实行难点排查。

刚进集团时,在开始展览Node.js的接口开荒时,小编不太习于旧贯每回排查难题都要透过跳板机登上服务器看日志,后来日益习贯了这种措施。

举个例证:

JavaScript

/** * 获取列表数据 * @parma req, res */ exports.getList = async function (req, res) { //获取请求参数 const openId = req.session.userinfo.openId; logger.info(`handler getList, user openId is ${openId}`); try { // 得到列表数据 const startTime = new Date().getTime(); let res = await List瑟维斯.getListFromDB(openId); logger.info(`handler getList, ListService.getListFromDB cost time ${new Date().getTime() - startDate}`); // 对数据管理,重临给前端 // ... } catch(error) { logger.error(`handler getList is error, ${JSON.stringify(error)}`); } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 获取列表数据
* @parma req, res
*/
exports.getList = async function (req, res) {
    //获取请求参数
    const openId = req.session.userinfo.openId;
    logger.info(`handler getList, user openId is ${openId}`);
 
    try {
        // 拿到列表数据
        const startTime = new Date().getTime();
        let res = await ListService.getListFromDB(openId);
        logger.info(`handler getList, ListService.getListFromDB cost time ${new Date().getTime() - startDate}`);
        // 对数据处理,返回给前端
        // ...
    } catch(error) {
        logger.error(`handler getList is error, ${JSON.stringify(error)}`);
    }
};

以下代码常常会现出在用Node.js的接口中,在接口中会总结查询DB所耗费时间间、亦只怕计算RPC服务调用所耗费时间间,以便监测品质瓶颈,对品质做优化;又大概对极其使用try ... catch当仁不让抓获,以便随时对标题举办回想、还原难点的现象,举办bug的修复。

而对在此以前端来讲吧?能够看以下的情景。

前不久在开始展览二个须求开辟时,有的时候发掘webgl渲染印象退步的情形,也许说影像会并发深入分析失败的情事,大家或者一向不知道哪张印象会深入分析或渲染退步;又或如近些日子费用的此外3个需要,我们会做二个关于webgl渲染时间的优化和影象预加载的急需,若是缺少品质监控,该怎么计算所做的渲染优化和影象预加载优化的优化比例,如何表明本人所做的事情具备价值啊?或者是由此测试同学的黑盒测试,对优化前后的光阴开始展览录屏,分析从进来页面到印象渲染实现到底经过了不怎么帧图像。那样的数目,大概既不精确、又比较片面,设想测试同学并不是确实的用户,也无从恢复真实的用户他们所处的网络情形。回过头来发现,我们的品种,尽管在服务端层面做好了日志和性质总结,但在前者对这多少个的监察和控制和性情的总括。对于前端的天性与非常申报的取向索求是有不可缺少的。

图片 1

不行捕获方法

可怜捕获

对以前端来讲,我们须要的要命捕获无非为以下三种:

  • 接口调用景况;
  • 页面逻辑是否错误,比方,用户进入页面后页面显示白屏;

对于接口调用景况,在前者经常要求申报客户端相关参数,举例:用户OS与浏览器版本、请求参数(如页面ID);而对此页面逻辑是或不是错误难点,平时除了用户OS与浏览器版本外,供给的是报错的库房消息及现实报错地点。

Java中抓获分外是经过try、catch和finally 二个块来成功的。在那之中try块是不可缺少的,catch和finally块能够采取叁个或多少个。try块用来放置或者出现难点的言辞,借使在try块中或许出现八个可怜,则最佳提供四个catch块来实行捕获。这样可以本着分化的不行提供区别的处理方案。如若try块中等射程序的可怜和率先个catch块捕获的不得了不相称,JVM将相比较第一个catch块,由此及彼,直到出现相配的收尾。假使未有找到相配的,分外对象将抛给调用该方法的法子。

1. try catch

一般,为了认清一段代码中是否存在十一分,大家会那一写:

try {
    var a = 1;
    var b = a   c;
} catch (e) {
    // 捕获处理
    console.log(e); // ReferenceError: c is not defined
}

采取try catch可以很好的破获相当并对应进行相应管理,不至于让页面挂掉,然而其设有部分害处,比方须求在捕获分外的代码上进行李包裹装,会促成页面臃肿不堪,不适用于整个项目标十一分捕获。

特出捕获方法

 

2. window.onerror

绝对来说try catch来讲window.onerror提供了大局监听万分的效果:

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
    console.log('errorMessage: '   errorMessage); // 异常信息
    console.log('scriptURI: '   scriptURI); // 异常文件路径
    console.log('lineNo: '   lineNo); // 异常行号
    console.log('columnNo: '   columnNo); // 异常列号
    console.log('error: '   error); // 异常堆栈信息
};

console.log(a);

如图:
图片 2

window.onerror即提供了大家错误的新闻,还提供了不当行列号,能够精准的开始展览定点,如此就如就是大家想要的,可是接下去就是填坑进程。

全局捕获

能够因此全局监听非常来捕获,通过window.onerror或者addEventListener,看以下例子:

JavaScript

window.onerror = function(errorMessage, scriptU帕杰罗I, lineNo, columnNo, error) { console.log('errorMessage: ' errorMessage); // 至极音信console.log('scriptU昂科雷I: ' scriptU哈弗I); // 卓殊文件路线console.log('lineNo: ' lineNo); // 极度行号 console.log('columnNo: ' columnNo); // 非凡列号 console.log('error: ' error); // 卓殊饭店音讯// ... // 十分上报 }; throw new Error('那是叁个荒谬');

1
2
3
4
5
6
7
8
9
10
window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
  console.log('errorMessage: ' errorMessage); // 异常信息
  console.log('scriptURI: ' scriptURI); // 异常文件路径
  console.log('lineNo: ' lineNo); // 异常行号
  console.log('columnNo: ' columnNo); // 异常列号
  console.log('error: ' error); // 异常堆栈信息
  // ...
  // 异常上报
};
throw new Error('这是一个错误');

图片 3

通过window.onerror事件,能够获取实际的那么些音讯、十分文件的UGL450L、格外的行号与列号及特别的旅社音信,再捕获十分后,统一举报至大家的日志服务器。

亦或是,通过window.addEventListener主意来进展特别申报,道理同理:

JavaScript

window.add伊芙ntListener('error', function() { console.log(error); // ... // 极度上报 }); throw new Error('那是三个不当');

1
2
3
4
5
6
window.addEventListener('error', function() {
  console.log(error);
  // ...
  // 异常上报
});
throw new Error('这是一个错误');

图片 4

编写制定类CatchExceptions,在此类的main()方法中示范了try、catch和finally块的用法。代码如下:

本文由bwin必赢发布,转载请注明来源

关键词: 基础技术 C++/C