全局记录jQuery错误（事件和DOM错误）

Question

由于现今的系统越来越偏向于Javascript (jQuery, AJAX等)，我们一直试图为这些内容增加更多错误日志记录。

---

我的疑虑在于，在jQuery中，当普通DOM操作 / jQuery事件被创建或执行时，window.onerror无法捕捉到这些情况，而这可能会有助于通过将它们记录在服务器上来更快地调试生产中的错误。

在这篇2008年的文章 (.onerror & jQuery绑定try/catch{})中，他们向jQuery.bind()事件甚至是document.ready事件添加了try/catch {}。 现在，随着所有内容都通过.on()事件进行，这篇文章已经过时了，但我觉得逻辑仍然可行...

有人尝试在自己的项目中实现这样的jQuery重写(try/catch系统)吗？

基本上，我想要继续从CDN使用jQuery，只需要在我们的一个JS文件中 - 扩展/覆盖.on() / $(document).ready() /等事件以进行这些更改。

jQuery.fn.extend({ // <-- can this be extended / overwritten ?
    on: function(etc etc) {
        // same code just add the additional
        try {
            // try to execute the original .on()
        }
        catch (ex) {
            // log any errors / info (where/why/etc)
        }
    }
});

// or even some sort of try/catch for $(document).ready()?

其他典型的错误日志格式：（当然也要记录浏览器/操作系统/查询字符串等）

window.onerror = function (msg, url, line) {
    // Log General Javascript Errors
    // this won't log jQuery internal errors
};

$.ajaxSetup({ // Log AJAX Errors
    error: function (jqXHR, ajaxSettings, thrownError) { }
});

- Mark Pieszak - Trilon.io

Answer 1

我们在window.onerror和jQuery ajax错误中向服务器报告JavaScript错误，而不会覆盖jQuery，这样做效果很好。如果您想覆盖jQuery函数，可以执行以下操作：

$.fn.oldOn = $.fn.on;
$.fn.on = function(a,b,c,d,e,f) {
    try {
        $(this).oldOn(a,b,c,d,e,f);
    }
    catch (ex) { ... }
};

- Craig Celeste

---

我可能表达不清楚，抱歉。我们使用了您建议的错误处理程序，没有覆盖try/catch，并发现它运行良好。但是如果您想要覆盖它，您可以这样做。我会更新答案。 - Craig Celeste

糟糕，愚蠢的错误。应该是$(this).oldOn(...)，而不是$.oldOn(...)。你需要使用$(this)来为新函数设置'this'。http://jsfiddle.net/Y5Jcu/1/ - Craig Celeste

非常好，你真是太棒了！既然你已经有了.onerror和ajaxError，那么现在应该将这些东西添加到你的系统中！ - Mark Pieszak - Trilon.io

确认。首先，那个jsfiddle没有测试回调函数中的错误捕获。实际上，它没有抛出任何错误需要被捕获。它什么也没测试。其次，这个解决方案不能捕获回调函数中的错误。它只能在注册回调函数时捕获错误，这是毫无意义的。要捕获回调函数中的错误，你必须将回调函数包装在try语句中。第三，这会丢弃$.fn.on的返回值，这会破坏使用方法链接的任何代码。请参考ravenjs，了解如何包装jquery事件处理程序的示例。 - user1009908

是的，这很糟糕。这只是一个快速回应，关于如何用包装器替换jquery函数，没有考虑问题的错误处理部分。它没有实际用途。看到使用它的人的反应，我现在感到后悔，但它已经锁定了。 :( - Craig Celeste