Javascript Error Handling

Types of Errors

Syntax Errors

Syntax errors are errors in grammar and punctuation such as mismatched quotes or missed commas. These errors are caught quickly if you have the browser's built-in error detector in display mode or run the script through jsLint.

Runtime Errors

Runtime errors only show up as the script is executed. Common examples are calling a function that hasn't been declared (typing error or case-sensitivity issue) or division by zero. Although JavaScript is typeless, many built in objects expect and/or return specific types (eg. style.left needs string type).

Logic Errors

Logic errors are basic errors in the programmer's algorithms or procedural errors. Diagnosis only comes when incorrect results occur and solution requires mapping out the flow for test cases. The wrong scoping of a variable is an example of this kind of error.

Incorrect Operator Precedence Errors

Incorrect operator precedence errors are basic mathematical grouping errors. The best way to avoid them is with brackets to force the order that you want operations to occur explicitly.

Browser Implementation Errors

Browser implementation errors are quirks that occur in one browser but not others. See Browser Issues for more details. Test your code on all anticipated client browsers!

Global Error Handling

The window object has an event called onerror that is invoked whenever there's an unhandled error on the page.

As you can see, the event will pass 3 arguments to the invoked function. The first one is the actual error message. The second one is the URL of the file containing the error (useful if the error is in an external.js file.) The last argument is the line number in that file where the error happened.

Returning true tells the browser that you have taken care of the problem. If you return false instead, the browser will proceed to treat the error as unhandled, showing the error message and the status bar icon.

var onErrorHandler = function(message, fileName, lineNumber) {
    var element = document.createElement("p");
    element.innerHTML = "Error: " + message + "<br />File Name: " + decodeURIComponent(fileName) + "<br />Line: " + lineNumber;
    document.body.appendChild(element);
    // Returning true tells the browser that you have taken care of the problem.
    // If you return false instead, the browser will proceed to treat the error as unhandled, showing the error message and the status bar icon.
    return true;
};
 
window.onerror = onErrorHandler;

View Demo

Structured Error Handling

If anything goes wrong in the statements that are inside the try block's statements then the statements in the catch block will be executed and the error will be passed in the error variable. The finally block is optional and, if present, is always executed last, regardless if there was an error caught or not.

The error object has two important properties: name and message. The message property contains the same error message that we have seen before. The name property contains the kind of error that happened and we can use that to decide if we know what to do with that error.

function catchError() {
    var element = document.createElement("p");
    var html = "";
    try {
        var username = window.prompt("Please Enter Your Name: ", "");
        html = "Your name (" + username + ") has " + username.length + " letters.";
    } catch(error) {
        if (error.name == "TypeError")
            html = error.name + ": " + error.message + "<br />File Name: " + decodeURIComponent(error.fileName) + "<br />Line: " + error.lineNumber;
        else
            throw error;
    } finally {
        // The finally block is optional and, if present, is always executed last, regardless if there was an error caught or not.
        element.innerHTML = html;
        document.body.appendChild(element);
    }
}
 
window.onload = catchError;

View Demo

Related Posts

• Error Handling and Debugging
• Debugging