A catch-all for JavaScript errors

Question

I've lost count of the number of times I've had to ask my users if there are any errors in the browser's console, and every time I have to go through the process of asking what browser they're using, no not the operating system, the browser. Google is a search engine, what browser are you using? Have you tried another? Are your browsers up to date? You haven't updated since 2009? Okay, you've updated now? Still not working. Hmm. Are you sure you're even on the right page? Okay, so there was no problem, you were just expecting it to do something it wasn't going to do anyway.

What I'd like is for a way to catch all JavaScript errors and have them presented on the page in some way, for instance a notification popup that says "hey, an error happened, copy this stuff and it can get fixed!"

Any... any pointers? Before I go completely insane?

Answer 1

You have a couple options:

1. Exception handlers allow you to catch exceptions at higher levels of your code that were not handled locally.

2. Also window.onerror(fn) will catch some errors in the page and you can log them when that event fires.

3. Along with any error, you can also retrieve the browser information from the user agent string and log that too so you don't have to ask the user stuff they don't always know.

4. Many desktop programs offer a diagnostic screen that reports a whole bunch of system info that tech support often wants to know. You could create such a similar page for your web app if you wanted. it could gather everything it can discern about the individual system and put it all in one copyable text field. In a pinch the user could either read info from that screen or email it to someone in support.

You can combine all of these with some sort of internal logging system (perhaps the last N errors to Local Storage) and some UI to see them.

Answer 2

Any approach relying on the user to do any of these things will fail:

• remember exactly what they did, what the computer did, and what they wanted it to do to high precision
• know what is installed on their computer
• report detailed technobabble error messages by copy/paste to email. That's WORK.

Instead, you need a log file, directory, or perhaps a database table on the server where messages -- essentially automated bug reports -- are collected.

Code that can fail or returns a possible error condition in a variable needs to be written to check for the error messages -- so much code lacks this even though it is best practice -- and then send the error messages into your collection device.

This assumes, of course, that after an error the code still works well enough to send the automated bug report. But with a web app that is often not a heroic assumption.

The first time I adopted this approach was back in 2001 on PHP on some university research code, with a "bugs" mySQL table to collect all the errors. Worked wonders for code quality.

This is more difficult to implement in browser Javascript, since a run time error can stop the page and try/catch blocks can sometimes disguise what is failing. But quite a bit can still be done.