Catching all javascript unhandled exceptions

Question

I'm trying to find or figure out a way to display in an alert box all of the unhandled javascript exceptions in an application. I'd want all of this to be done on the client side, without using any server side code. I'm using MVC3 as an environment.

I've been researching for the last few days and haven't found exactly what I'm looking for.

I found 2 ways below that seem like they're almost what I'm looking for, except these ways are set up so that you have to pass a function name into a custom method to print the stack trace of all unhandled exceptions within that one specific function. I'm looking for a way to not have to manually pass a function name to a custom method that prints the stack trace of all of the unhandled exceptions. I'd want these custom method to just 'listen' for all unhandled exceptions within the whole application.

http://eriwen.com/javascript/js-stack-trace/

Also something similar to the previous link:

https://github.com/eriwen/javascript-stacktrace

Here's the basic code from the 2nd link above that prints the stack trace of a specified javascript function:

instrumentFunction: function (context, functionName, callback) {
    context = context || window;
    var original = context[functionName];
    context[functionName] = function instrumented() {
        callback.call(this, printStackTrace().slice(4));
        return context[functionName]._instrumented.apply(this, arguments);
    };
    context[functionName]._instrumented = original;
}

function printStackTrace(options) {
    options = options || {
        guess: true
    };
    var ex = options.e || null,
        guess = !! options.guess;
    var p = new printStackTrace.implementation(),
        result = p.run(ex);
    return (guess) ? p.guessAnonymousFunctions(result) : result;
}

So, to sum this up, do you all know of any way to have some sort of 'listener' to listen for all javascript unhandled exceptions and then print them to the screen in an alert box?

Thanks! Jason

Answer 1

You can do this by using window.onerror method.

window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
    alert("Error occured: " + errorMsg);//or any message
    return false;
}

Answer 2

In addition to

window.onerror = function (message, file, line, col, error) {
   alert("Error occurred: " + error.message);
   return false;
};
window.addEventListener("error", function (e) {
   alert("Error occurred: " + e.error.message);
   return false;
})

You can also catch all the errors fired inside a promise callback (.then()) listening for unhandledrejection event

window.addEventListener('unhandledrejection', function (e) {
  alert("Error occurred: " + e.reason.message);
})

Answer 3

You can either use window.onerror, or (amazingly!) bind to the 'error' event properly:

window.onerror = function (message, file, line, col, error) {
   alert("Error occurred: " + error.message);
   return false;
};
window.addEventListener("error", function (e) {
   alert("Error occurred: " + e.error.message);
   return false;
})

If you want to track JavaScript errors, you can try Atatus. I work at Atatus.

Answer 4

You have two event listeners that can be used for this: unhandledrejection and error.

The first one unhandledrejection:

The unhandledrejection event is sent to the global scope of a script when a JavaScript Promise that has no rejection handler is rejected; typically, this is the window, but may also be a Worker.

To have a global error handler for promises you can listen for this events:

// event is of type PromiseRejectionEvent
window.addEventListener("unhandledrejection", (event) => {
  event.preventDefault(); // This will not print the error in the console });

  console.log("Unhandled promise rejection"); 
  console.log(event.reason);
}  

In the usage notes, it mentions:

Allowing the unhandledrejection event to bubble will eventually result in an error message being output to the console. You can prevent this by calling preventDefault() on the PromiseRejectionEvent; see Preventing default handling below for an example.

Thus, if you don't want to see the message being logged by the environment, event.preventDefault() can be used.

The second one error:

The error event is fired on a Window object when a resource failed to load or couldn't be used — for example if a script has an execution error.

To have a global error handler for the other errors you can listen for this events:

window.addEventListener("error", (event) => {
  event.preventDefault(); // This will not print the error in the console

  console.log("Unhandled error");
  console.log(event.message);
});

Answer 5

Check out http://log4javascript.org it is based on Log4J. If most of your code is wrapped in try/catch statements to handle exceptions you can make use of this library as a common interface for sending output to an always available "dialog box" or logging window that your end user could see. You could even have a button that performs a window.print() to print the contents of the dialog box to the printer or PDF. Good luck.