专栏首页拂晓风起JS 拦截/捕捉 全局错误 全局Error onerror

JS 拦截/捕捉 全局错误 全局Error onerror

 移动Web开发过程中,在真机测试时,往往会遇到一些PC调试无法重现的问题,这时候我们需要在手机上拦截错误,并有相应的输出。

公司和网上都有类似的工具/类库,但如果纯粹一个简单的调试,或许不需要引入工具或类库,我们只需要知道全局拦截的原理。

其实很简单,就是window.onerror

语法:

onerror=handleErr

function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

浏览器是否显示标准的错误消息,取决于 onerror 的返回值。如果返回值为 false,则在控制台 (JavaScript console) 中显示错误消息。反之则不会。

实例:

下面的例子展示如何使用 onerror 事件来捕获错误:

<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}

function message()
{
adddlert("Welcome guest!")
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>

另外,如果我们想在chrome控制台中直接模拟这个过程,会发现,直接使用throw new Error,无法触发这个onerror,这个可能是因为控制台的环境跟页面环境不一样。

但换一个方式,就可以触发了:

setTimeout(function(){throw new Error}, 1000)

:p

真够机智

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.cnblogs.com/kenkofox复制
如有侵权,请联系 yunjia_community@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 前端异常捕获和定位

    开发阶段,通过详细的报错信息,我们可以快速定位并解决问题。在生产,通过异常监控,根据异常埋点信息,我们可以第一时间知道异常信息,不至于造成严重后果。

    GopalFeng
  • web前端监控的三个方面探讨

    以 init 为程序的入口,代码中所有同步执行出现的错误都会被捕获,这种方式也可以很好的避免程序刚跑起来就挂。

    smy
  • 如何用正确的姿势去高效的解决前端异常,用实践造就答案

    前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。

    挨踢小子部落阁
  • 如何优雅处理前端的异常?

    前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。

    桃翁
  • 如何优雅处理前端异常?

    对于 JS 而言,我们面对的仅仅只是异常,异常的出现不会直接导致 JS 引擎崩溃,最多只会使当前执行的任务终止。

    grain先森
  • 如何优雅处理前端异常?

    前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。

    Nealyang
  • 如何优雅处理前端异常?(史上最全前端异常处理方案)

    前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。

    前端迷
  • 前端异常的捕获与处理

    ? 这是第 89 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~

    政采云前端团队
  • JavaScript异常如何处理

    在前端的开发工作当中,我们对于异常的处理可能关注的不是太多,因为js有基本的异常处理能力,很多错误会直接抛出来,打开控制台就能看到。但是如果因为异常导致网站卡死...

    OECOM
  • 一道不一样的前端架构师最终面试题 【实用系列】

    本次写作来源于一次面试,前端架构师岗位,最后面试官临时给我掏出了一道比较少见的面试题 ,终究斩获offer ,虽然这道题并不难,但是考察的东西挺有趣,加上近期有...

    Peter谭金杰
  • vue前端异常监控sentry实践

    但是onerror事件无法捕获到网络异常的错误(资源加载失败、图片显示异常等),例如img标签下图片url 404 网络请求异常的时候,onerror无法捕获到...

    CS逍遥剑仙
  • vue前端异常监控sentry实践

    但是onerror事件无法捕获到网络异常的错误(资源加载失败、图片显示异常等),例如img标签下图片url 404 网络请求异常的时候,onerror无法捕获到...

    csxiaoyao
  • springboot 如何优雅的抛出异常

    之前项目的异常是一层一层抛出去及其麻烦,并且每个层都要try catch 然后把错误信息包装返回到最顶层 ,从service一层一层抛出去。人都写傻了,后面发现...

    全栈程序员站长
  • # 异常处理

    与其它语言一样,dart提供类try/catch来来接异常信息,防止未处理的异常而导致后面的代码无法正常运行。

    用户1175783
  • Carson带你学Android:RxJava功能性操作符

    今天,我将为大家详细介绍RxJava操作符中最常用的 功能性操作符,并附带 Retrofit 结合 RxJava的实例Demo教学,希望你们会喜欢。

    Carson.Ho
  • Js捕获异常的方法

    JavaScript的异常主要使用try catch finally语句以及窗口对象window的onerror事件来捕获。

    WindrunnerMax
  • Flutter | 异常处理

    在了解 Flutter 异常捕获之前需要先了解一下 Dart 的异常处理以及 Dart 的单线程模型,只有知道了代码的执行流程,我们才能只要该在什么地方去捕获异...

    345
  • Nuxt 踩坑记

    Nuxt 是一个服务端渲染框架,与普通的前后端分离不同(需要同时开两个端口进行开发),而 Nuxt 只需要开一个服务端的端口。默认是 3000。使用 Nuxt ...

    Innei

扫码关注云+社区

领取腾讯云代金券