关于移动 App H5 页面里的 JavaScript 异常捕获

自 HTML5 标准正式发布之后,其得天独厚的跨平台特性吸引了众多开发者的目光。

伴随着 HTML5 的发展,JavaScript 的重要性也在逐步增加,要说现在哪门语言最火的话,那一定是 JavaScript 了。 学了JavaScript 成为全栈工程师,迎娶白富美,步入人生巅峰,想想也是醉了。

但有个问题:很多开发者却并未考虑过收集 JavaScript 出错时抛出的异常信息。因为只要 JavaScript 异常后 App 不会崩溃,当没有发生过就好了。

或许,在浏览器时代,让用户刷新下页面,可以解决异常问题。但是在移动 App 的 H5 页面,一但出现异常将导致程序无法正常运行,用户也不是那么容易可以通过刷新来解决问题的。

这里,我们就简单介绍 JavaScript 的异常处理方式。

一般地,对于 JavaScript 异常,可以通过下列两种方式处理:

  • try-catch 主动 catch 异常处理或上报
  • window.onerror 监听错误事件捕获未处理的异常
  • 用 try-catch 语句捕获异常
try {   
    function();
} catch(e) {   
    console.log(e); 
    // report error maybe
}

>

  • 通过监听 window.onerror 事件捕获异常
window.onerror = function (errorMsg, url, lineNumber) {  
    console.log('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber);   
    // report error maybe
}

上述的方法只能获取到出错信息,url 及行号信息。

所幸在新的标准草案里,window.onerror 添加了两个参数:列号和异常堆栈

>

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {   
    console.log('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber + ' Column: ' + column + ' StackTrace: ' +  errorObj);
}

目前新的标准草案已经被主流的浏览器所支持,但是在移动平台里,新标准目前只被 Android 支持,所以可以在 Android 的 webview 里获取到完整的异常信息。

但是 iOS 平台的 WebView,还无法获取到堆栈信息,针对 iOS 平台,建议是发现异常信息后,在出错函数内用 try-catch 方式主动上报异常,以此解决信息缺失问题。

关于JS的异常捕获,想更详细了解的同学可以看看这篇文章:如何捕获和分析 JavaScript Error

http://www.cnblogs.com/cathsfz/p/how-to-capture-and-analyze-javascript-error.html

目前,Bugly 新发布的 JS 异常捕获能力同时支持上述的两种方案,如果是用 try-catch 捕获的,可以通过我们提供的主动上报接口进行上报

>

try {   
    function();
} catch (e) {
    Bugly.reportException(e);
}
  • 未被 try-catch 捕获的 JS 异常,我们也会通过 window.onerror 收集并上报,同时我们也采集了一些可以辅助发现问题的信息,如 userAgent 等,协助开发者发现问题。

更多信息可以查阅Bugly SDK使用指南:iOS , Android


本文系腾讯Bugly独家内容,转载请在文章开头显眼处注明注明作者和出处“腾讯Bugly(http://bugly.qq.com)”

腾讯Bugly 最专业的质量跟踪平台

为您定期分享应用崩溃解决方案

原文发布于微信公众号 - 腾讯Bugly(weixinBugly)

原文发表时间:2015-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

LNMP一键安装包下腾讯云“动态加速”服务的正确使用姿势

许多站长是使用 LNMP 一键安装包来搭建在云主机的上的系统环境,本人的个人小站也是如此。最近在使用腾讯云的动态加速服务,而在这个 LNMP 环境下使用踩了点坑...

83133
来自专栏blackheart的专栏

[解读REST] 5.Web的需求 & 推导REST

衔接上文[解读REST] 4.基于网络应用的架构风格,上文总结了一些适用于基于网络应用的架构风格,以及其评估结果。在前文的基础上,本文介绍一下Web架构的需求,...

20710
来自专栏向治洪

携程Android App的插件化和动态加载框架

携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验。本文将详细介绍Andro...

19410
来自专栏编程

高级运维工程师学习路线

信息安全公益宣传,信息安全知识启蒙。 ? 运维工程师在前期是一个很苦逼的工作,在这期间可能干着修电脑、掐网线、搬机器的活,显得没地位!时间也很碎片化,各种零碎...

4927
来自专栏高性能服务器开发

(八)高性能服务器架构设计总结4——以flamigo服务器代码为例

一个项目的服务器端往往由很多服务组成,就算单个服务在性能上做到极致,支持的并发数量也是有限的。举个简单的例子,假如一个聊天服务器,每个用户的信息是1k,那对于一...

1255
来自专栏coolblog.xyz技术专栏

MyBatis 源码分析系列文章合集

我从七月份开始阅读MyBatis源码,并在随后的40天内陆续更新了7篇文章。起初,我只是打算通过博客的形式进行分享。但在写作的过程中,发现要分析的代码太多,以至...

1.3K7
来自专栏小狼的世界

Ajax与REST

REST(Representational State Transfer)是一种开发思想,互联网不断发展,富媒体越来越多的应用,不断地冲击着我们的应用,使应用的...

1052
来自专栏DevOps时代的专栏

这些工具都没用过?还谈什么 DevOps

导语: DevOps 越来越流行,越来越成为加快产品研发速度、提升团队效率的有效工具。现在,在开发、测试、部署、交付、维护以及监控分析等工作中,有越来越多的开源...

41015
来自专栏数据和云

【Windows最近肿么了】32TB的Win10源码遭泄露?

黑客泄露微软 Win 10 大量源代码,数据超过 32 TB 据 TheRegister 报道,已经有多达 32TB 的微软 Windows 操作系统的内部核心...

3398
来自专栏轮子工厂

C/C++、Java和Python开发工具一网打尽

在我们埋头于代码死磕的时候,会发现一个好的开发工具往往会起到事半功倍的效果,本帖子总结了C语言与Java几个比较流行的开发工具,希望能对大家有用。

2002

扫码关注云+社区

领取腾讯云代金券