Output the rendered contents of a page on a JavaScript error

Question

I'm having problems with getting decent JavaScript error invormation in a Production environment.

When I'm developing I can just attach a debugger and (usually) fix the problem.

When I get the same error in a production environment however at best I see is an error report that looks like this:

Error: Object doesn't support this property or method
Url: SomePage
Line: 42
Char: 13

Which doesn't help me very much - I can't see the rendered page and so I have no idea what line 42 looks like.

Is there any way for me to log the entire rendered page contents whenever an error like this occurs? (So line 42 of the output is the line where the error occured)

While I'm at it, are there any other techniques that I can use to help with getting useful error information from JavaScript (without need to break into the debugger) - failing that is there any way that I can structure my JavaScript slightly differently to help getting decent debug information?

I'm predominantly interested in IE - this is the browser that tends to cause me most problems.

Answer 1

I don't think you'll be able to get the exact original HTML source of the page back in all pages and all browsers.

Regarding debugging, you could use a logging library such as log4javascript (disclaimer: I wrote it) and intersperse logging calls in your code. log4javascript enables you to send logging messages back to the server via Ajax.

Answer 2

Unfortunately, IE has by default the most utterly useless error reporting. The script and line number reported in the error are essentially guaranteed to be absolutely wrong. You can, however, install the IE developer tool bar (for IE7 and older, it's built into IE8) from Microsoft, which can help track down the error source.