JavaScript代码异常监控实现过程详解

这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

JavaScript异常一般有两方面：语法错误和运行时错误。两种错误的捕获和处理方式不同，从而影响具体的方案选型。通常来说，处理JS异常的方案有两种：try...catch捕获 和 window.onerror捕获。以下就两种方案分别分析各自的优劣。

虽然语法错误本应该在开发构建阶段使用测试工具避免，但难免会有马失前蹄部署到线上的时候。

try...catch捕获

这种方案要求开发人员在编写代码的时候，在预估有异常发生的代码段使用try...catch，在发生异常时将异常信息发送给接口：

try{
//可能发生异常的代码段
}catch(e){
//将异常信息发送服务端
}

try...catch的优点是可以细化到每个代码块，并且可以自定义错误信息以便统计。

具体到上文提到的两种js异常，try...catch无法捕获语法错误，当遇到语法错误时，浏览器仍然会抛出错误Uncaught SyntaxError，但是不会被捕获，不会走进catch的代码块内。

另外，如果try代码块中有回调函数也不会被捕获，比如：

try{
var btn = $('#btn');
  btn.on('click',function(){
    //throw error
  });
}catch(e){}

上述代码中btn的监听函数里抛出的异常无法被外层的catch捕获到，必须额外套一层：

try{
var btn = $('#btn');
  btn.on('click',function(){
    try{
      //throw error
    }catch(e){}
  });
}catch(e){}

综上所述，try...catch方案的部署非常复杂，如果人工部署除了要求巨量的工作量，还跟开发人员的能力和经验有关。如果依赖编译工具部署（比如fis），那每个代码块都套一层try...catch也是非常难看的并且容易引发一些不可预估的问题。

window.onerror捕获

这种方式不需要开发人员在代码中书写大量的try...catch，通过给window添加onerror监听，在js发生异常的时候便可以捕获到错误信息，语法异常和运行异常均可被捕获到。但是window.onerror这个监听必须放在所有js文件之前才可以保证能够捕获到所有的异常信息。

window.onerror事件的详细信息参考这里。

/**
 * @param {String} errorMessage  错误信息
 * @param {String} scriptURL   出错文件的URL
 * @param {Long}  lineNumber   出错代码的行号
 * @param {Long}  columnNumber  出错代码的列号
 * @param {Object} errorObj    错误信息Object
 */
window.onerror = function(errorMessage, scriptURL, lineNumber,columnNumber,errorObj) {
  // code..
}

onerror的实现方式各浏览器略有差异，但是前三个参数都是相同的，某些低版本浏览器没有后两个参数。

最后一个参数errorObj各浏览器实现的程度不一致，具体可参考这里。

下图是被onerror捕获到的一个异常的具体信息：

综上所述，window.onerror方案的优点是减少了开发人员的工作量，部署方便，并且可以捕获语法错误和运行错误。缺点是错误信息不能自定义，并且errorObj每种浏览器的实现有略微差异，导致需统计的信息有局限性。

跨域JS文件异常的捕获

为了提高web性能，目前大部分web产品架构中都有CDN这一环，将资源部署到不同的域名上，充分利用浏览器的并发请求机制。那么在跨域JS文件中发生异常的时候，onerror监听会捕获到什么信息呢？请看下图：

只有一个稍微有价值的信息Script error，其他什么信息都没有，为什么会这样呢？

我们都知道浏览器有同源资源限制，常规状态下是无法进行跨域请求的。而script、img、iframe标签的src属性是没有这种限制的，这也是很多跨域方案的基础。但是即使script标签可以请求到异域的js文件，此文件中的信息也并不能暴露到当前域内，这也是浏览器的安全措施所致。

那么有没有办法获取到异域资源的异常信息呢？

其实很简单，目前可以说基本上所有的web产品对于js/css/image等静态资源都在服务端设置了Access-Control-Allow-Origin: *的响应头，也就是允许跨域请求。在这个环境下，只要我们在请求跨域资源的script标签上添加一个crossorigin属性即可：

<script src="http://static.toutiao.com/test.js" crossorigin></script>

这样的话，异域的test.js文件中发生异常时便可以被当前域的onerror监听捕获到详细的异常信息。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解js前端代码异常监控

    详解js前端代码异常监控

    阅读目录 什么是前端代码异常 window.onerror 写一个js报错的上报库 注意点: 缺点: 在平时的工作,js报错是比较常见的一个情景,尤其是有一些错误可能我们在本地测试的时候测试不出来,当发布到线上之后才可以发现,如果抢救及时,那还好,假如很晚才发 现,那就可能造成很大的损失了.如果我们前端可以监控到这种报错,并及时上报的话,那我们的问题就比较好解决了.所以我们今天来聊聊前端代码的异常监控 什么是前端代码异常  一般语法错误以及运行时错误,浏览器都会在console里边体现出错误信息

  • 浅谈NodeJs之数据库异常处理

    本文介绍了NodeJs之数据库异常处理,分享给大家,具体如下: NodeJs版本:4.4.4 数据库链接错误 使用nodejs处理异常最麻烦不过,这里我抛开nodejs提供的domain和一些第三方库专门处理的东西.操作数据库是我们常用的功能.通过回调,我们这里会有很多err出没. 如下: var pool = require('../db.js'); var runtimeLog = require('../log.js').getLogger('runlog'); var Promise =

  • JavaScript中的事件与异常捕获详析

    事件处理 [onClick]单击事件.[onMouseOver]鼠标经过事件.[onMouseOut]鼠标移出事件.[onChange]文本内容改变事件.[onSelect]文本被框选事件.[onFoucus]得到光标事件.[onBlur]光标失去事件.[onLoad]网页加载事件(在body标签中添加).[onUnload]网页关闭事件(在body标签中添加或者使用window.onload=function(){} ) 事件注册及监听 1. DOM0级事件处理 在标签中添加onClick或其

  • Nodejs异步回调之异常处理实例分析

    本文实例讲述了Nodejs异步回调之异常处理.分享给大家供大家参考,具体如下: 目前我们项目的Nodejs异常是通过express next 到 errorhandler 中间件去处理的, 原本以为此方法可以捕获到所有的异常,但事实发现并非如此. 下面以一个异常举例子: req.get('',function(req, res, next){ var a = undefined.b; // 产生了一个exception }) req.use(function(){req, res, next}{

  • Springboot2.0处理自定义异常并返回json

    Springboot2.0处理自定义异常并返回json

    这篇文章主要介绍了Springboot2.0处理自定义异常并返回json,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1. 编写自定义异常类 package cn.jfjb.crud.exception; /** * @author john * @date 2019/11/24 - 9:48 */ public class UserNotExistException extends RuntimeException { public Use

  • Nodejs监控事件循环异常示例详解

    Nodejs监控事件循环异常示例详解

    开场白 最近在学习 libuv,也了解了一些 Node.js 中使用 libuv 的例子.当然,这篇文章不会去介绍 event loop,毕竟这些东西在各个论坛.技术圈里都被介绍烂了.本文介绍如何正确使用 Event loop,以及即使发现程序是否异常 block. 基础 event loop 的基础想必各位读者都比较熟悉了.这里我引用官方的图,简单介绍两句,作为前置准备: event loop是作为单线程实现异步的方式之一.简而言之,就是在一个大的 while 循环中不断遍历这些 phase,

  • javascript中的try catch异常捕获机制用法分析

    本文实例讲述了javascript中的try catch异常捕获机制用法.分享给大家供大家参考,具体如下: 1.跟Java一样,JavaScript也具有try catch块,进行异常捕获的机制. (1)典型的try catch语句 try{ } catch{ } finally{ } 跟java中一样,JS中最为典型的try catch语句也同样分为了三个部分,try用于捕获异常,catch用于处理异常,而finally用于关闭资源等后续操作. 举例: try{ throw "error&qu

  • SpringBoot学习之全局异常处理设置（返回JSON）

    SpringBoot学习--全局异常处理设置(返回JSON) 需求 现在习惯使用ajax的方式发起请求,所以经常需要服务端返回一个json或者字符串. 控制全局的异常处理. 如果在单个方法中使用try,catch把方法包裹起来,工作量大,而且会异常的抛出而导致@Transactional注解的方法事务不会回滚. 说明 使用@ControllerAdvice注解 使用@ExceptionHandler注解 @ControllerAdvice 该注解是spring2.3以后新增的一个注解,主要是用来

  • 简单学习5种处理Vue.js异常的方法

    错误大全 为了测试各种异常处理技巧,我故意触发三种类型的错误. 第一种:引用一个不能存在的变量: <div id="app" v-cloak> Hello, {{name}} </div> 上述代码运行后不会抛出错误,但是在控制台会有[Vue warn]消息. 111111111111111111 你可以在Codepen查看例子完整代码. 第二种:将变量绑定到一个被计算出来的属性,计算的时候会抛出异常. <div id="app" v-

  • JavaScript代码异常监控实现过程详解

    JavaScript代码异常监控实现过程详解

    这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 JavaScript异常一般有两方面:语法错误和运行时错误.两种错误的捕获和处理方式不同,从而影响具体的方案选型.通常来说,处理JS异常的方案有两种:try...catch捕获 和 window.onerror捕获.以下就两种方案分别分析各自的优劣. 虽然语法错误本应该在开发构建阶段使用测试工具避免,但难免会有马失前蹄部署到线上的时候.

  • Java 用Prometheus搭建实时监控系统过程详解

    上帝之火 本系列讲述的是开源实时监控告警解决方案Prometheus,这个单词很牛逼.每次我都能联想到带来上帝之火的希腊之神,普罗米修斯.而这个开源的logo也是火,个人挺喜欢这个logo的设计. 本系列着重介绍Prometheus以及如何用它和其周边的生态来搭建一套属于自己的实时监控告警平台. 本系列受众对象为初次接触Prometheus的用户,大神勿喷,偏重于操作和实战,但是重要的概念也会精炼出提及下.系列主要分为以下几块 Prometheus各个概念介绍和搭建,如何抓取数据(本次分享内容)

  • 分布式监控系统之Zabbix主动、被动及web监控的过程详解

    前文我们了解了zabbix的网络发现功能,以及结合action实现自动发现主机并将主机添加到zabbix hosts中,链接指定模板进行监控:回顾请参考https://www.jb51.net/article/200678.htm:今天我们来了解下zabbix的主动监控.被动监控以及web监控相关话题: 1.什么是主动监控?什么是被动监控? 我们知道获取数据的方式有两种,一种是get,一种是push:在zabbix中描述主动监控和被动监控都是站在agent的一方来描述的:我们把agent主动将数

  • JavaScript处理解析JSON数据过程详解

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包. JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):"

  • JavaScript预编译和执行过程详解

    JavaScript预编译和执行过程详解

    javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块为范围<script></script>,即每遇到一个代码块都会进行预编译>执行),了解javascript引擎的执行机理,将有助于在写js代码过程中的思路总结. 首先javascript是解释型语言,自然就是编译一行,执行一行. js运行过程分为三步:1.语法分析 2.预编译

  • JavaScript实现栈结构Stack过程详解

    JavaScript实现栈结构(Stack) 一.前言 1.1. 什么是数据结构? 数据结构就是在计算机中,存储和组织数据的方式. 例如:图书管理,怎样摆放图书才能既能放很多书,也方便取? 主要需要考虑两个问题: 操作一:新书怎么插入?操作二:怎么找到某本指定的书? 常见的数据结构: 数组(Aarray)栈(Stack)链表(Linked List)图(Graph)散列表(Hash)队列(Queue)树(Tree)堆(Heap) 注意:数据结构与算法与语言无关,常见的编程语言都有直接或间接的使用

  • javascript简单实现深浅拷贝过程详解

    javascript简单实现深浅拷贝过程详解

    前言 深浅拷贝知识在我们的日常开发中还算是用的比较多,但是之前的状态一直都是只曾听闻,未曾使用(其实用了只是自己没有意识到),所以今天来跟大家聊一聊js的深浅拷贝: 首先我们来了解一下javascript的数据类型,在ES5版本的js中我们的javascript一共有6种数据类型,分别是: Number(数值型).String(字符串).Boolean(布尔型).Object(对象,object和array都属于Object类型).null.undefined 我们日常使用的javascript

  • 基于zabbix实现监控Jenkins过程详解

    一.监控架构图 二.实现思路 在 Jenkins 上安装 Metrics 插件,使 Jenkins 暴露 metrics api: 编写python代码从api抓取数据,并将数据解析为zabbix可以识别的格式: 配置 Zabbix server 及 agent 以实现监控及告警 三.具体配置 1.安装Jenkins Metrics插件 插件下载地址:http://updates.jenkins-ci.org/download/plugins/metrics/ 安装 Metrics 插件,在系统

  • JavaScript 解析数学表达式的过程详解

    JavaScript 解析数学表达式的过程详解

    目录 概要 问题 拆解问题 解决问题 从左到右计算 计算 从左到右 + -拆分左右 * /拆分左右 ()整体 优化 完整代码 总结 概要 本文以一个 的解题思路,来分享如何解决问题. 解决的过程,可以作为解决工作中一般问题的通用思路. 希望同学有所收获. 问题 通过JS解析数学表达式字符串. (1 + (2 - (3 * 4 / 5 + 6 - (7 + 8))) + (9 - 10) * 11 + 12) + 13 表达式中包含基本的数学运算符号+ . - . * . /和()小括号,数字都是

  • 基于javascript处理二进制图片流过程详解

    今天学习怎么生成二维码,我习惯所有请求都用ajax完成 但是今天发现jquery的ajax不支持二进制,只能搞纯文本 于是百度之后手动实现这一功能 function getBinary(url, args, success) { var xmlhttp = new XMLHttpRequest(); var data = eval(args); var i = 0; for (var key in data) { if (i++ === 0) { url += '?' + key + "=&qu

随机推荐