对前端异常window error捕获的全面总结

对于前端的异常捕获,我们都会知道onerror事件,但针对window的error事件的用法,其实是有区别的。

方式一: window.onerror = handleOnError

1. 能捕获到js执行错误,不能捕获带有src的标签元素的加载错误。

2. 参数对应5个值(错误信息,所在文件,行,列,错误信息)

3. 函数体内用return true可以不让异常信息输出到控制台

方式二:  window.addEventListener

1. 为捕获状态时(第三个参数为true)能捕获到js执行错误,也能捕获带有src的标签元素的加载错误。

为冒泡状态时(第三个参数为false)能捕获到js执行错误,不能捕获带有src的标签元素的加载错误。

2. 参数对应1个值,异常事件,错误信息都在里面

3. 函数体内用preventDefault可以不让异常信息输出到控制台

示例代码:

<!doctype html><html>
<head>
<script type="text/javascript">
window.onerror = handleOnErrorwindow.addEventListener(‘error‘, handleListenerError, false);
function handleOnError(msg,url,h,l,e)
{
  // some code
  return true // 阻止浏览器console输出
}function handleListenerError (eventErr){  // some code  eventErr.preventDefault() // 阻止浏览器console输出}
function message1()
{
  aalert("hello!")
}
function message2()
{
  throw new Error(‘hello‘)
}
function message3()
{
  console.log(a)
}
function message4()
{
  xhr = new XMLHttpRequest();
  xhr.open(‘GET‘,url)
  xhr.onreadystatechange=state_Change;
  xhr.send()
}
function state_Change()
{
  if (xhr.readyState==4)  {
    if (xhr.status==200)
      {
      message3()
      } else {
        // somecode
      }
  }
}
</script>
</head>
<body>
<input type="button" value="异常1" onclick="message1()" />
<input type="button" value="异常2" onclick="message2()" />
<input type="button" value="异常3" onclick="message3()" />
<input type="button" value="异常4" onclick="message4()" />
<script type="text/javascript" src="abc.js"></script>
<img src="abc.png"/>
</body>
</html>

原文地址:https://www.cnblogs.com/liyongquan/p/9180562.html

时间: 2024-10-08 16:13:16

对前端异常window error捕获的全面总结的相关文章

异常监控:教你如何优雅的处理前端异常

前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人. 一.为什么要处理异常? 异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情. 增强用户体验: 远程定位问题: 未雨绸缪,及早发现问题: 无法复线问题,尤其是移动端,机型,系统都是问题: 完善的前端方案,前端监控系统: 对于 JS 而言,我们面对的仅仅只是异常,异常的出现不会直接导致 JS 引擎崩溃,最多只会使当前执行的任务终止. 二.需要处理哪些异常? 对于前端来说,

谈谈前端异常捕获

作为一个前端开发人员,每次看到浏览器控制台信息里面红通通的报错信息是不是都很紧张......不要怕,下面我们就来讨论一下前端的异常捕获. 异常捕获,相对于其他知识点可能没那么被重视,特别是对于前端程序员.但不得不说,这又是一个不得不面对的知识点. 为什么要捕获异常 首先,我们为什么要进行异常捕获和上报呢? 正所谓百密一疏,用程序员的话来说就是:天下不存在没有bug的程序(不接受反驳 ?? ).即使经过各种测试,还是会存在十分隐蔽的bug,这种不可预见的问题只有通过完善的监控机制才能有效的减少其带

如何优雅处理前端异常?

前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人. 一.为什么要处理异常? 异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情. 增强用户体验: 远程定位问题: 未雨绸缪,及早发现问题: 无法复线问题,尤其是移动端,机型,系统都是问题: 完善的前端方案,前端监控系统: 对于?JS?而言,我们面对的仅仅只是异常,异常的出现不会直接导致?JS?引擎崩溃,最多只会使当前执行的任务终止. 二.需要处理哪些异常? 对于前端来说,

前端异常监控解决方案研究

摘要: 异常监控不复杂也不简单啊... 原文:前端异常监控解决方案研究 作者:frustigor 前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如果出现异常,有可能是前端引起,也有可能是后端引起,需要有一个机制,将前后端串联起来,使监控本身统一于监控系统.因此,即使只讨论前端异常监控,其实也不能严格区分前后端界限,而要根据实际系统的设计,在最终的

Flex获取url参数异常(Error #2060)

解决办法:chrome在服务器上运行才会获取到值,在本地打开会报安全沙箱异常(Error #2060) 1 private function getParameter(name:String):String{ 2 if (ExternalInterface.available) { 3 try{ 4 var query:String = ExternalInterface.call("window.location.search.substring", 1); 5 var pairs:

前端异常监控 - BadJS

前端异常监控 - BadJS 简介:BadJS 是 web 前端异常监控解决方案,提供一种 web 页面的脚本错误监控.上报.统计.查看等系统化的跟踪解决方案.目前BadJS覆盖了腾讯课堂.公众号.邮箱等公司40+业务,支持脚本错误捕获.上报.统计.告警.定时发送邮件报表等各项能力.BadJS 已在 Github上开源(https://github.com/betterjs)

异常:Error resolving template &quot;xxx&quot;, template might not exist or might not be accessible...解决办法

简单表述:控制台出现了这个异常:Error resolving template "xxx", template might not exist or might not be accessible by any of the configured Template Resolvers 解决办法:在报出这个异常的方法上添加注解@ResponseBody 讲一下个人理解:这个注解就是用来区别 方法的返回值字符串 和 视图解析器解析的页面名字字符串 的冲突的,举个例子:方法A返回的字符串s

异常:error 0152: No Entity Framework provider found for the ADO.NET provider with invariant name &#39;System.Data.SqlClient&#39;

error 0152: No Entity Framework provider found for the ADO.NET provider with invariant name 'System.Data.SqlClient' error 0152: No Entity Framework provider found for the ADO.NET provider with invariant name 'System.Data.SqlClient'. Make sure the pro

异常apxs:Error: Command failed with rc=65536

当编译mod_evastive,报出 "apxs:Error: Command failed with rc=65536" 解决方法: 将mod_evasive20.c文件里 142.146.158.165.180.187.208.212.215.221.222.228行对应的remote_ip修改成client_ip 保存 重新 安装即可 重新编译: /usr/local/apache2/bin/apxs -i -a -c ./mod_evasive20.c 异常apxs:Error