有一个带有内容脚本的
Google Chrome extension,用于处理所有选项卡页面上发生的JS错误.但问题是没有一种常见的获取错误堆栈跟踪的方法不起作用.
window.addEventListener('error',function(event) {
console.log(event.error.stack); // event.error will be null
},false);
如果我在网页中调用此代码,则event.error将包含具有stack属性的Error对象.
console.log((new Error()).stack));
有没有人知道在Chrome扩展程序的内容脚本中获取错误堆栈跟踪的一些工作问题？
错误堆栈跟踪必须以字符串或数组的形式接收,这意味着不仅仅是通过调用console.trace()来控制JS控制台中的某些输出.
如何重现：
>下载https://mega.co.nz/#!ENw00YAC!92gBZEoLCO9jPsWyKht4dbjYyo0Zk-PU5YAj0h88-3Q
>将jzen.zip解压缩到某个/ jsen文件夹
>在您的Google Chrome中打开chrome：//扩展程序,启用开发者模式http://i.imgur.com/5x5D6NP.png
>单击加载解压缩的扩展按钮,然后选择/ 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,但在网页上下文中捕获时,它具有所需的信息.因此,解决方案是在网页上下文中捕获事件并使用消息传递将其传递到内容脚本.
// 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);
使用的技术描述如下：
> https://stackoverflow.com/a/9517879/1507998
> https://stackoverflow.com/a/9636008/1507998
