如何發送控制台消息和錯誤以提醒？

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會拋出錯誤。 它直接進入控制台，我希望它顯示在警報中，因為它適用於孩子，他們可能不會檢查控制台。 try catch塊不會捕獲錯誤。 我用eval（腳本）試了一下。

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

這確實有效，但這意味着代碼執行了兩次，這在某些情況下非常不方便。

我試過猴子修補console.error：

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

但這只有在我真正使用console.error時才有效。 不是在拋出實際錯誤時。 如果不是console.error，在真正的錯誤情況下，什么函數將錯誤發送到控制台？ 我可以訪問並更改它嗎？ 有任何想法嗎？ 幫助將非常感激。 謝謝Jenita

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時發現了這一點， FastJSLogger是一個頁面記錄器，當瀏覽器devtools有點慢時我用它。

我不顧一切地想要獲取行數，我開始嘗試使用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的引用。

Answer 2

好吧，不那么優雅但高效的方法就是“重構”你天生的控制台功能。 基本上你得到的任何錯誤或警告都是通過javascript函數輸出的，這與熟悉的console.log（）函數非常相似。 我正在談論的函數是console.warn（），console.info（）和console.error（）。 現在讓我們“重新映射”每個人做的事情：

//remap console to some other output
var console = (function(oldCons){
    return {
        log: function(text){
            oldCons.log(text);
            //custom code here to be using the 'text' variable
            //for example: var content = text;
            //document.getElementById(id).innerHTML = content
        },
        info: function (text) {
            oldCons.info(text);
            //custom code here to be using the 'text' variable
        },
        warn: function (text) {
            oldCons.warn(text);
            //custom code here to be using the 'text' variable
        },
        error: function (text) {
            oldCons.error(text);
           //custom code here to be using the 'text' variable
        }
    };
}(window.console));

//Then redefine the old console
window.console = console;

現在，通常我會強烈建議不要將這樣的東西用於生產並將其限制為調試目的，但是因為你正在嘗試開發一個顯示控制台輸出的功能，那里的線條很模糊，所以我會留下它由你決定。

Answer 3

您可以將腳本包裝在自己的try / catch中，例如：

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 = "try{"+scripts+"}catch(e){console.error(e);alert('Found this error: ' + e +'. Check the console.')}"
head.appendChild(scriptElement);