JavaScript全局错误处理

我想捕获每个未定义的函数错误抛出.JavaScript中是否存在全局错误处理工具？用例是捕获未定义的闪存函数调用.

1> Sam..：

---

如何捕获未处理的Javascript错误

将window.onerror事件分配给事件处理程序,如:

如上代码注释,如果返回值window.onerror是true那么浏览器应该抑制显示一个警告对话框.

window.onerror什么时候发生火灾？

简而言之,当1.)存在未捕获的异常或2.)发生编译时错误时引发该事件.

没有被捕的例外

抛出"一些消息"

call_something_undefined();

cross_origin_iframe.contentWindow.document ;,一个安全例外

编译错误

setTimeout("{", 10);,它将尝试将第一个参数编译为脚本

浏览器支持window.onerror

Chrome 13+

Firefox 6.0+

Internet Explorer 5.5+

Opera 11.60+

Safari 5.1+

截图:

将此添加到测试页面后,上面的onerror代码示例:

的jsfiddle:

https://jsfiddle.net/nzfvm44d/

参考文献:

Mozilla Developer Network :: window.onerror

MSDN ::处理和避免网页错误第2部分:运行时错误

返回基础知识 - JavaScript onerror事件

DEV.OPERA ::使用window.onerror更好地处理错误

窗口onError事件

使用onerror事件来抑制JavaScript错误

SO :: window.onerror没有在Firefox中触发

---

值得一提的是当手动进行`throw`时,firefox不会回复错误信息.http://stackoverflow.com/questions/15036165/catching-error-event-message-from-firefox

---

除了这个答案,我添加了错误的对象,以便我可以获得堆栈跟踪.http://stackoverflow.com/a/20972210/511438.现在我可以开发更多反馈,因为我的开发错误在页面顶部显示为一个框(因为我创建了它).

---

很好的答案.您可以使用像JSNLog这样的包来实现"通过ajax报告此错误",它会为您执行ajax和服务器端日志记录.

2> Ionuț G. Sta..：

---

这对你有帮助吗:

我不确定它如何处理Flash错误...

更新:它在Opera中不起作用,但我现在正在攻击Dragonfly以查看它的内容.关于黑客攻击蜻蜓的建议来自这个问题:

模仿窗口.使用javascript在Opera中的错误

---

通过添加msg,file_loc,line_no params,这应该为我做.谢谢!

3> SunnyRed..：

---

复杂的错误处理

如果您的错误处理非常复杂,因此可能会抛出错误,那么添加一个标志表明您是否已经处于"errorHandling-Mode"状态是很有用的.像这样:

var appIsHandlingError = false;

window.onerror = function() {
    if (!appIsHandlingError) {
        appIsHandlingError = true;
        handleError();
    }
};

function handleError() {
    // graceful error handling
    // if successful: appIsHandlingError = false;
}

否则你会发现自己陷入了无限循环.

---

或者更加自动防故障的方法是在`handleError`方法周围使用try-catch.

---

如果在错误处理中有异步调用,则不能使用try catch.所以他的解决方案仍然是很好的解决方案

4> Fizer Khan..：

---

尝试使用Atatus为现代Web应用程序提供高级错误跟踪和真实用户监控.

https://www.atatus.com/

让我解释一下如何在所有浏览器中获得相当完整的堆栈跟踪.

JavaScript中的错误处理

现代Chrome和Opera完全支持ErrorEvent的HTML 5草案规范window.onerror.在这两种浏览器中,您都可以使用window.onerror或正确绑定到"错误"事件:

// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
    console.log(message, "from", error.stack);
    // You can send data to your server
    // sendError(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (e) {
    console.log(e.error.message, "from", e.error.stack);
    // You can send data to your server
    // sendError(data);
})

不幸的是Firefox,Safari和IE仍然存在,我们也必须支持它们.由于堆栈跟踪不可用,window.onerror我们必须做更多的工作.

事实证明,我们唯一可以做的就是从错误中获取堆栈跟踪是将所有代码包装在一个try{ }catch(e){ }块中然后查看e.stack.我们可以通过一个名为wrap的函数使这个过程更容易一些,它接受一个函数并返回一个具有良好错误处理的新函数.

function wrap(func) {
    // Ensure we only wrap the function once.
    if (!func._wrapped) {
        func._wrapped = function () {
            try{
                func.apply(this, arguments);
            } catch(e) {
                console.log(e.message, "from", e.stack);
                // You can send data to your server
                // sendError(data);
                throw e;
            }
        }
    }
    return func._wrapped;
};

这有效.你手动包装的任何函数都会有很好的错误处理,但事实证明我们实际上可以在大多数情况下自动为你做.

通过更改全局定义addEventListener以便它自动包装回调,我们可以自动插入try{ }catch(e){ }大多数代码.这使现有代码可以继续工作,但增加了高质量的异常跟踪.

var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
    addEventListener.call(this, event, wrap(callback), bubble);
}

我们还需要确保removeEventListener继续工作.目前它不会因为论证addEventListener被改变了.我们只需要在prototype对象上修复此问题:

var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
    removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}

将错误数据传输到后端

您可以使用图像标记发送错误数据,如下所示

function sendError(data) {
    var img = newImage(),
        src = 'http://yourserver.com/jserror&data=' + encodeURIComponent(JSON.stringify(data));

    img.crossOrigin = 'anonymous';
    img.onload = function success() {
        console.log('success', data);
    };
    img.onerror = img.onabort = function failure() {
        console.error('failure', data);
    };
    img.src = src;
}

免责声明:我是https://www.atatus.com/的网站开发人员.

5> Lance Pollar..：

---

似乎window.onerror无法访问所有可能的错误.具体而言,它忽略了:

加载错误(响应> = 400).