Javascript 捕获网络::ERR_NAME_NOT_RESOLVED 用于修复错误的 img 链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36512573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Catching net::ERR_NAME_NOT_RESOLVED for fixing bad img links
提问by hendry
I have a blog going for over 10 years & I would like to run a piece of Javascript on it that catches broken links. I was using:
我有一个博客已经超过 10 年了，我想在它上面运行一段 Javascript 来捕获断开的链接。我正在使用：
function trackError(e) {
var ie = window.event || {};
var errMsg = e.message || ie.errorMessage || "404 error on " + window.location;
var errSrc = (e.filename || ie.errorUrl) + ': ' + (e.lineno || ie.errorLine);
mailme([errMsg, errSrc]);
}
// Triggering an error in the console:
// You have to use something like setTimeout(function() { notThere(); }, 0);
window.addEventListener('error', trackError, true);
But that's not catching the error in a useful way. What was broken, on which line etc.
但这并没有以有用的方式捕捉错误。什么坏了，在哪条线上等等。
JSON.stringifyof the error object results just in "{"isTrusted":true}"which is useless. I noticed in Chrome there is e.path, but not in Firefox. Is there a way in Javascript to log useful information about broken image links or I need to file bugs on browser engines?
JSON.stringify错误对象的结果只是在"{"isTrusted":true}"哪个是无用的。我注意到在 Chrome 中有e.path，但在 Firefox 中没有。有没有办法在 Javascript 中记录有关损坏的图像链接的有用信息，或者我需要在浏览器引擎上提交错误？
回答by Richard Pressler
It's working. It will not stop the error from showing in Chrome in your console but it's working. Don't be bothered by the fact that you still SEE the error in Chrome. Your code is executing and you can write your mailmefunction and it will execute. I used the following to test:
它正在工作。它不会阻止错误显示在您控制台的 Chrome 中，但它正在工作。不要因为您仍然在 Chrome 中看到错误而烦恼。您的代码正在执行，您可以编写mailme函数并执行。我使用以下内容进行测试：
index.html
索引.html
<html>
<head>
<script src="./app.js"></script>
</head>
<body>
<img src="http://pictures.natalian.org/screenies/2004/sep/29/13:23:00/">
</body>
</html>
app.js
应用程序.js
var mailme = function() {
console.log('Caught!');
}
window.addEventListener('error', function(e) {
var ie = window.event || {};
var errMsg = e.message || ie.errorMessage || "404 error on " + window.location;
var errSrc = (e.filename || ie.errorUrl) + ': ' + (e.lineno || ie.errorLine);
mailme([errMsg, errSrc]);
}, true);
output (Chrome)
输出（铬）
output (Firefox)
输出（火狐）
回答by CBroe
https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onerror:
https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onerror：
When a resource (such as an
<img>or<script>) fails to load, an error event using interface Event is fired at the element, that initiated the load, and the onerror() handler on the elementis invoked. These error events do not bubble up to window, but (at least in Firefox) can be handled with a single capturing window.addEventListener.
当资源（例如
<img>或<script>）无法加载时，会在启动加载的元素上触发使用接口 Event 的错误事件，并调用元素上的onerror() 处理程序。这些错误事件不会冒泡到 window，但是（至少在 Firefox 中）可以使用单个捕获 window.addEventListener 来处理。
(Highlighting by me.)
（由我突出显示。）
So it might simply be an issue of what it says there for Firefox, is not the same for Chrome.
所以这可能只是它对 Firefox 所说的内容的问题，对 Chrome 来说是不同的。
