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:
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.stringify
of 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?
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 mailme
function and it will execute. I used the following to test:
index.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
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)
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 element is invoked. These error events do not bubble up to window, but (at least in Firefox) can be handled with a single capturing 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With