javascript - 你如何发送控制台消息和错误来提醒？

Question

我想将错误传递给警报，以警告用户他们在代码中犯了错误，即使他们没有打开控制台也是如此。

    var doc=(frame.contentWindow.document || obj.contentDocument|| obj.contentWindow);
    var head = doc.getElementsByTagName('head')[0];
    var scriptElement = doc.createElement('script');
    scriptElement.setAttribute('type', 'text/javascript');
    scriptElement.text = scripts;

    try{
        head.appendChild(scriptElement);
    }
     catch(e){ alert("error:"+e.message +"  linenumber:"+e.lineNumber);}

当脚本包含错误时，appendChild 会抛出错误。虽然它直接进入控制台，但我希望它显示在警报中，因为它是给 children 的，他们可能不会检查控制台。 try catch block 不捕获错误。 我用 eval(scripts) 试过了。

   try{
   eval(scripts);} catch(e){ alert("error:"+e.message +"  linenumber:"+e.lineNumber);}

这确实有效，但这意味着代码被执行了两次，这在某些情况下非常不方便。

我尝试用猴子修补控制台。错误:

       console.log=function(){alert("taking over the log");}
       console.error=function(){alert("taking over the log");}

但这只有在我真正使用 console.error 时才有效。不是在抛出实际错误时。 如果不是 console.error，如果出现真正的错误，哪个函数会将错误发送到控制台？我可以访问它并更改它吗？ 有任何想法吗？帮助将不胜感激。 谢谢珍妮塔

Answer 1

虽然 try ... catch 将处理脚本最初运行的代码，但正如 Jenita 所说，它不会捕获语法错误，而且它也不会捕获抛出的错误通过稍后执行的回调函数(在 try-catch 完成后很久)。这意味着传递给 setTimeout 或 addEventListener 的任何函数都没有错误。

但是，您可以尝试不同的方法。在窗口上注册错误监听器。

window.addEventListener("error", handleError, true);

function handleError(evt) {
    if (evt.message) { // Chrome sometimes provides this
      alert("error: "+evt.message +" at linenumber: "+evt.lineno+" of file: "+evt.filename);
    } else {
      alert("error: "+evt.type+" from element: "+(evt.srcElement || evt.target));
    }
}

当回调函数抛出异常时调用。但它也会触发一般的 DOM 错误，例如图像加载失败，您可能对此不感兴趣。

它也应该在出现语法错误时触发，但只有当它能够首先运行时，所以你应该将它放在一个单独的脚本中，与可能包含拼写错误的脚本分开! (脚本后面的语法错误将阻止同一脚本顶部的有效行运行。)

不幸的是，我从未找到从 Firefox 中的 evt 获取行号的方法。 (编辑:四处看看，我想它现在可能就在那里。)

---

我在尝试编写 FastJSLogger 时发现了这一点，当浏览器 devtools 有点慢时我使用的页面内记录器。

急于捕获行号，我 started to experiment带有 setTimeout 和 addEventListener 的包装器，将围绕这些调用重新引入 try-catch。例如:

var realAddEventListener = HTMLElement.prototype.addEventListener;

HTMLElement.prototype.addEventListener = function(type,handler,capture,other){
    var newHandler = function(evt) {
        try {
            return handler.apply(this,arguments);
        } catch (e) {
            alert("error handling "+type+" event:"+e.message +"  linenumber:"+e.lineNumber);
        }
    };

    realAddEventListener.call(this,type,newHandler,capture,other);
};

显然，这应该在注册任何事件监听器之前完成，甚至可能在加载 jQuery 等库之前完成，以防止它们在我们能够替换之前获取对真实 addEventListener 的引用