如何在Chrome扩展程序内容脚本中获取错误堆栈跟踪？

barbushin 发表于 Dev

巴布申

有一个Google Chrome扩展程序，content script用于处理所有标签页上发生的JS错误。但是问题在于，没有一种获取错误堆栈跟踪的常用方法不起作用。

例如，content scriptChrome扩展中有一个代码：

window.addEventListener('error', function(event) {
    console.log(event.error.stack); // event.error will be null
}, false);

如果我在网页内调用此代码，event.error则将包含Error具有stack属性的对象。

尝试使用以下方法获取堆栈跟踪的相同问题：

console.log((new Error()).stack));

有人知道在content scriptChrome扩展程序内部获取错误堆栈跟踪的某些工作问题吗？

错误堆栈跟踪必须以string或Array方式接收，这意味着不像JS控制台中的调用那样输出console.trace()。

如何繁殖：

下载https://mega.co.nz/#!ENw00YAC!92gBZEoLCO9jPsWyKht4dbjYyo0Zk-PU5YAj0h88-3Q
解压jzen.zip到某个/jsen文件夹
chrome://extensions在您的Google Chrome浏览器中打开，启用Developer mode http://i.imgur.com/5x5D6NP.png
单击Load unpacked extension按钮并选择/jsen文件夹路径
打开/jsen/content.js文件并添加console.log('JSEN', e.error.stack);到里面window.addEventListener('error', function(e) {
转到http://xpart.ru/_share/js.htm并在JS控制台中查看结果（Ctrl + Shift + J）
尝试编辑/jsen/content.js以获取正确的错误跟踪
要重新初始化Chrome扩展程序源代码，请单击http://i.imgur.com/SjFgkHA.png

连接

如您所述error，事件对象的属性是null在Content Script上下文中捕获事件时的属性，但是在网页上下文中捕获时具有必需的信息。因此，解决方案是在网页上下文中捕获事件，并使用消息传递将其传递到内容脚本。

// This code will be injected to run in webpage context
function codeToInject() {
    window.addEventListener('error', function(e) {
        var error = {
            stack: e.error.stack
            // Add here any other properties you need, like e.filename, etc...
        };
        document.dispatchEvent(new CustomEvent('ReportError', {detail:error}));
    });
}

document.addEventListener('ReportError', function(e) {
    console.log('CONTENT SCRIPT', e.detail.stack);
});

//Inject code
var script = document.createElement('script');
script.textContent = '(' + codeToInject + '())';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);