31

I'm researching the possibility of automated on-page error detection via Javascript. I have found several questions where the answer allows you to catch Javascript compilation and runtime errors globally via window.onerror, but no answers mention other types of non-Javascript errors that are often reported in browser error consoles. I'm primarily interested in network errors (invalid URI's, SSL errors, HTTP errors, timeouts) and resource interpretation errors (mismatching types resulting in aborting the interpretation of the resource, parsing errors on loaded resources, etc).

I checked the performance.getEntries method, but I'm baffled to find that it does not seem to contain network requests that resulted in errors (I checked only in Chrome 29...)

I don't need full cross browser compatibility.. as long as it works on some browsers, and doesn't break the others, that's fine.

3
  • I think most of them are just warnings that cannot be detected by javascript, since the give normal results. However you might add your own handlers to each request and check those things manually.
    – Bergi
    Sep 30, 2013 at 15:54
  • Maybe it's possible to do this using service workers?
    – Flimm
    Oct 7, 2020 at 11:38
  • performance.getEntries() does seem to return network requests that failed, but there is nothing to distinguish them from network requests that succeeded. (See this issue)
    – Flimm
    Oct 7, 2020 at 12:05

2 Answers 2

2

The window.onerror handler catches Javascript errors in Chrome 13+, Firefox 6.0+, Internet Explorer 5.5+, Opera 11.60+ and Safari 5.1+. There's already a really good answer on StackOverflow which provides a lot of information about it. It does not catch failures to load resources, though.

As far as other elements (such as images) are concerned, jQuery provides an .error() method to attach an error event handler to alert the user when an image or external script fails to load. If you can't use jQuery, then another option is to preload all images / external resources via XMLHttpRequest and listen to the status (the HTTP response code) of the request (anything other than 200 OK or 304 Not Modified is something you'll want to return an error). The downside to this is that, since event handlers and such have to be attached before the page is fully loaded, anyone who has JavaScript disabled is going to be looking at a fragmented, possibly blank page.

Invalid URIs and HTTP errors are best handled server-side. A well-formed .htaccess file, combined with Apache's mod_rewrite (or an equivalent) can provide a lot of cushioning for bad requests to the server.

3
  • 1
    Unfortunately, the approach mentioned in the second paragraph is not global at all, you would have to rewrite the entire site. Invalid URI's cannot be handled server-side since the URI is invalid and will never be sent to the server. HTTP errors can be monitored if you own the server, but what if you want to check for errors loading 3rd-party resources... Sep 30, 2013 at 17:11
  • 1
    @FabioBeltramini: You don't need to rewrite the entire site. You just need to prepend it with a script that intercepts all calls to native functions (example), and watches all resources that get added to the DOM. You can dynamically add error handlers without touching your code.
    – Bergi
    Sep 30, 2013 at 18:48
  • 1
    I don't think you need jQuery at all here. You can listen to error events on <script> and <img> etc.
    – Jon
    Jan 12, 2017 at 1:43
0

No, I have not found a global approach yet, except perhaps service workers.

(Note that window.onerror only catches errors thrown in Javascript, it does not catch failure to load resources from a <script src="misspelling.js"></script> element, for example.)

Instead, you could add an onerror attribute to every element that loads a resource, but you would need to do this in the HTML sent by the server:

<script src="misspelling.js" onerror="alert('js')"></script>
<img src="misspelling.jpg" onerror="alert('img')">
<link rel="stylesheet" href="mispelling.css" onerror="alert('css')">

1
  • 2
    If you set the attribute onerror="throw this" in the HTML, now you have converted a network error to a Javascript error, which can be caught in window.onerror.
    – Flimm
    Oct 7, 2020 at 12:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.