返回

技术深扒 | 全局Javascript异常捕捉方案

前端


一个流量巨大的前端页面面临的浏览器环境是非常复杂的,尤其是在移动端页面(Android的碎片化所致)。面对如此多样的浏览器环境,常规的测试是无法完全覆盖的。我们需要一种页面脚本异常监控机制作为补充,保证能够发现前端页面脚本异常的原因。有很多种情况会导致Javascript抛出异常,比如访问不存在的属性或方法、除以零、语法错误、超时等。这些异常会中断页面的执行,并可能导致页面崩溃。

为了捕获这些异常,我们需要在页面中注入一个异常处理程序,当异常发生时,这个处理程序会将异常信息发送到我们的服务器。我们可以使用JavaScript的window.onerror事件来实现异常处理程序。window.onerror事件会在窗口中发生错误时触发,它会将错误信息作为参数传递给事件处理程序。

window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, error) {
  // 将错误信息发送到服务器
};

我们可以使用XMLHttpRequest对象将错误信息发送到服务器,也可以使用Fetch API。

var xhr = new XMLHttpRequest();
xhr.open("POST", "/log-error", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({
  errorMessage: errorMessage,
  scriptURI: scriptURI,
  lineNumber: lineNumber,
  columnNumber: columnNumber,
  error: error
}));

在服务器端,我们可以将错误信息存储到数据库中,以便以后分析和修复。我们也可以使用错误信息来触发警报,以便在发生严重错误时及时通知我们。

除了捕获异常之外,我们还可以使用JavaScript的console.error()方法来记录错误信息。console.error()方法会将错误信息输出到浏览器的控制台。我们可以使用这个方法来记录一些非致命的错误信息,以便在开发和调试过程中进行分析。

console.error("An error occurred:", error);

通过使用这些技术,我们可以捕获页面中全局Javascript异常,并将其发送到服务器进行分析和存储。这可以帮助我们发现和修复前端页面脚本异常,并提高页面的稳定性。