请问 js 如何捕获错误的调用栈（像 php 那样的详细）？

Question

请问 js 如何捕获错误的调用栈（像 php 那样的详细）？

发布于
2024-03-14 北京

如何捕获 js 错误的调用栈，我现在捕获错误的内容如下：

$_REQUEST = array (
'app_id' => 'A6125757481738',
'auth_code' => 'c9f0f8',
'access_token' => 'ec47cc',
'time_now' => '1710323849',
'client' => 'h5',
'ver' => '1.1',
'sid' => '12ef4dbe86f4a22de46e7f57d5456598',
'action' => 'reportErrorToS',
'app_ver' => '0.0.29',
'msg' => '{"line":2,"column":18280,"error":"Uncaught TypeError: Cannot read properties of null (reading \'querySelector\')","url":"https://www.taobao.top/style.php?t=js&p=record&v=1710307222","info":{},"curl":"https://www.taobao.top/record.html"}',
)

我页面的 js 是压缩的，现在这个错误报告非常的不容易定位，我上报错误的代码如下：

window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) {
    reportErrorToS(JSON.stringify({
        line: lineNumber,
        column: columnNumber,
        error: encodeURIComponent(errorMessage),
        url: encodeURIComponent(scriptURI),
        info: errorObj,
        curl: encodeURIComponent(location.href)
    }));
};

我想请问一下能否像 php 那样打印整个调用栈，从最开始的入口处一直调用到具体的错误处。

前端 javascript

html5 vue.js html

阅读 639

AI BotBETA

在 JavaScript 中，你可以使用 Error 对象的 stack 属性来获取错误的调用栈。然而，需要注意的是，这个特性并非所有浏览器都支持，而且在一些情况下，例如当错误发生在异步回调中时，调用栈可能不会包含你期望的全部信息。

以下是如何使用 Error.stack 来获取错误调用栈的示例：

window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) {
    var error = new Error();
    if (error.stack) {
        // 如果有 stack 属性，就使用它
        reportErrorToS(JSON.stringify({
            line: lineNumber,
            column: columnNumber,
            error: encodeURIComponent(errorMessage),
            url: encodeURIComponent(scriptURI),
            stack: encodeURIComponent(error.stack), // 添加 stack 属性
            info: errorObj,
            curl: encodeURIComponent(location.href)
        }));
    } else {
        // 如果没有 stack 属性，就使用你原来的方式
        reportErrorToS(JSON.stringify({
            line: lineNumber,
            column: columnNumber,
            error: encodeURIComponent(errorMessage),
            url: encodeURIComponent(scriptURI),
            info: errorObj,
            curl: encodeURIComponent(location.href)
        }));
    }
};

这段代码首先创建了一个新的 Error 对象，然后检查它是否有 stack 属性。如果有，就将 stack 属性添加到错误报告中。如果没有，就使用你原来的错误报告方式。

然而，由于 JavaScript 的错误处理和调试能力相较于 PHP 等一些其他语言有所不足，因此有时可能无法获取完整的调用栈信息。在这种情况下，你可能需要依赖一些第三方库，如 Error.stackTraceLimit 或 longjohn，它们可以提供更详细的调用栈信息。

最后，对于压缩的 JavaScript 代码，你可能需要一种方式来解压或映射错误消息中的行号和列号，以便在源代码中找到实际的位置。这通常可以通过 Source Maps 来实现，它们是一种将压缩后的代码映射回其原始源代码的方法。

1 个回答

得票最新

linong

29.2k1266132

发布于
2024-03-14 北京

更新于
2024-03-14

你需要用 sourcemap 文件才能还原。

https://docs.fundebug.com/notifier/javascript/sourcemap/