关于移动 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 最专业的质量跟踪平台

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