JavaScript onerror Event: Handling Errors

The onerror event in JavaScript is a critical tool for handling errors that occur during the execution of your scripts or the loading of resources on a web page. This event is triggered when a JavaScript runtime error occurs, or when certain HTML elements (like images and scripts) fail to load. Properly using the onerror event allows you to gracefully manage issues, provide feedback to users, and even log errors for debugging purposes. This guide will explore the nuances of the onerror event, how to use it effectively, and its various applications in web development.

What is the onerror Event?

The onerror event is a global event handler available on the window object. It’s triggered when an error occurs within a script, during resource loading, or when an exception is thrown that isn’t caught by a try...catch block. Understanding how to use onerror is essential for creating robust and resilient web applications.

Purpose of the onerror Event

The primary purposes of the onerror event are to:

• Catch Uncaught Errors: Detect and handle errors that aren’t caught by try...catch blocks, preventing your script from halting abruptly.
• Handle Resource Loading Errors: Capture failures in loading external resources such as images, scripts, and stylesheets.
• Provide User Feedback: Display user-friendly messages when errors occur, improving the user experience.
• Error Logging: Log error details to a server or console for debugging and monitoring.

Syntax of onerror Event

The onerror event can be handled in two main ways: using the window.onerror property or using an HTML element’s onerror attribute for resource loading failures.

Handling Global JavaScript Errors

When using it as a global event handler, the syntax is:

window.onerror = function(message, source, lineno, colno, error) {
  // Error handling logic here
};

The parameters passed to the onerror handler are:

Parameter	Type	Description
`message`	String	The error message (string).
`source`	String	The URL of the script or resource where the error occurred.
`lineno`	Number	The line number where the error occurred in the resource.
`colno`	Number	The column number where the error occurred in the resource.
`error`	Object	The error object (if available), providing additional information about the error.

Note: The error parameter may not be supported in all browsers. Check browser support for accurate details. 💡

Handling Resource Loading Errors

For HTML elements such as <img> and <script>
, you can use the onerror attribute directly in the HTML:

<img src="image.jpg" alt="My Image" onerror="handleImageError(event)">
<script src="script.js" onerror="handleScriptError(event)">
</script>

In this case, the onerror handler receives an event object with details about the error.

Examples of onerror Usage

Let’s explore some practical examples of how to use the onerror event in JavaScript and HTML. Each example includes a snippet of HTML and JavaScript and also shows what happens when an error is triggered.

Catching Uncaught JavaScript Errors

This example demonstrates how to catch and log uncaught JavaScript errors:

<div id="errorDisplay1"></div>
<script>
  window.onerror = function (message, source, lineno, colno, error) {
    const errorDiv_1 = document.getElementById("errorDisplay1");
    errorDiv_1.innerHTML =
      "Error: " +
      message +
      "<br>Source: " +
      source +
      "<br>Line: " +
      lineno +
      "<br>Column: " +
      colno;
    console.error("Error caught:", message, source, lineno, colno, error);
    return true;
  };

  function causeError() {
    throw new Error("This is a test error.");
  }
</script>
<button onclick="causeError()">Cause Error</button>

Output:

When the button is clicked, the causeError function will throw a new Error object.
This will trigger the global onerror event handler, which will display the error message, source, line, and column number in the errorDisplay1 element and also output the error to the console.

Note: The return true; statement in the onerror handler prevents the default browser error message from appearing. ⚠️

Handling Image Loading Errors

This example demonstrates how to handle errors when an image fails to load:

<img id="brokenImage" src="nonexistent.jpg" alt="Broken Image" onerror="handleImgError_2(event)"
  style="border:1px solid black;"
  >
<div id="errorDisplay2"></div>
<script>
  function handleImgError_2(event) {
    const errorDiv_2 = document.getElementById("errorDisplay2");
    errorDiv_2.innerHTML = "Error loading image: " + event.target.src;
    event.target.src = "https://dummyimage.com/100x100/000/fff";
    console.error("Image failed to load:", event.target.src);
  }
</script>

Output:

When the brokenImage fails to load, the handleImgError_2 function will be called. The onerror handler will:

• Display a message in the errorDisplay2 div with a text message and the URL of the broken image.
• Replace the broken image with a placeholder image (dummyimage).
• Write to the console about error.

Handling Script Loading Errors

This example shows how to handle errors when a script fails to load:

 <div id="errorDisplay3"></div>
  <script id="brokenScript" src="nonexistent.js" onerror="handleScriptError_3(event)" >

</script>
<script>
  function handleScriptError_3(event) {
    const errorDiv_3 = document.getElementById("errorDisplay3");
    errorDiv_3.innerHTML = "Error loading script: " + event.target.src;
    console.error("Script failed to load:", event.target.src);
    event.target.remove() // Remove the broken script element to prevent further issues
  }
</script>

Output:

When the brokenScript fails to load, the handleScriptError_3 function will be called. The onerror handler will:

• Display an error message in the errorDisplay3 div.
• Write to console.
• Remove the brokenScript element that failed to load, preventing further issues.

Using try...catch With onerror

You can combine try...catch blocks with onerror for comprehensive error handling. try...catch handles synchronous errors, while onerror handles both synchronous and asynchronous errors.

<div id="errorDisplay4"></div>
<script>
    window.onerror = function(message, source, lineno, colno, error) {
    const errorDiv_4 = document.getElementById("errorDisplay4");
    errorDiv_4.innerHTML = "Global Error: " + message + "<br>Source: " + source + "<br>Line: " + lineno;
      return true;
  };
  function causeErrorWithTryCatch() {
      try{
        throw new Error("This error caught by try catch.");
      } catch (e) {
          console.log("Error caught using try catch: ", e.message)
        }

      try {
        // this will not be caught
        setTimeout(() => {
            throw new Error("This Async error won't be caught with try catch")
        }, 100)
      } catch(e){
          console.log("Try catch will not catch async errors: ", e.message)
      }
  }
</script>

<button onclick="causeErrorWithTryCatch()">Cause Error With Try Catch</button>

Output:

When the button is clicked, the causeErrorWithTryCatch function will:

• First throw an error that will be caught using try...catch
• Then create an async error that will not be caught by try...catch, instead it will go to the global error handler.

Note: try...catch blocks can catch synchronous errors, whereas onerror can catch both synchronous and asynchronous errors.

Real-World Applications of onerror

The onerror event is crucial for various applications:

• Error Monitoring: Logging errors to a server-side service for tracking and analysis.
• User Feedback: Displaying informative error messages to users, such as “Failed to load image,” rather than letting the app break silently.
• Fallback Mechanisms: Implementing backup resources when primary resources fail, such as using a placeholder image when a real one does not load.
• Graceful Degradation: Preventing errors from breaking the functionality of a page, ensuring a more consistent user experience.

Browser Support

The onerror event is widely supported across all major web browsers, ensuring reliable error handling for most users.

Note: Check the compatibility of specific features, such as the error parameter, for older browsers if needed. 🧐

Conclusion

The onerror event is an essential tool for building robust and resilient web applications. By handling errors gracefully, you can enhance the user experience, improve the reliability of your code, and gain valuable insights into issues that may arise during runtime or resource loading. Understanding how to use the onerror event effectively will empower you to create better, more stable web experiences. Happy coding!