window.onerror vs addEventListener error in JavaScript

JavaScript provides two primary mechanisms for globally intercepting uncaught runtime errors: the legacy window.onerror property and the modern window.addEventListener('error') method. While both listen for unhandled exceptions across your application, they differ significantly in how they handle multiple listeners, their ability to capture resource loading failures, and the signature of their callback parameters. Understanding these differences is essential for implementing robust client-side error tracking and monitoring.

Key Differences

1. Multiple Handlers vs. Single Handler

window.onerror is an event handler property. Assigning a new function to it overwrites any previously defined error handler. This can lead to conflicts when using third-party scripts or libraries that also attempt to hook into global errors.
window.addEventListener('error', ...) is an event listener. It allows you to attach multiple independent error-handling callbacks to the window object without overwriting existing listeners.

2. Resource Loading Errors

window.onerror cannot catch errors triggered by failed resource loading (such as broken <img>, <script>, or <link> tags) because those errors do not bubble up to the window object.
window.addEventListener('error', callback, true) can capture resource loading errors if you set the useCapture parameter to true. This captures the error event during the event capturing phase before bubbling would typically occur.

3. Callback Signatures

window.onerror receives individual parameters:

window.onerror = function(message, source, lineno, colno, error) {
  console.log({ message, source, lineno, colno, error });
  return true; // Prevents the default browser error output
};

window.addEventListener('error') receives a single ErrorEvent object (or an Event object for resource errors):

window.addEventListener('error', function(event) {
  console.log({
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    error: event.error
  });
});

4. Preventing Default Browser Handling

In window.onerror, returning true from the function suppresses the browser’s default error logging in the console.
In window.addEventListener('error'), you must call event.preventDefault() to suppress the default error behavior.

Comparison Summary

Feature	`window.onerror`	`window.addEventListener('error')`
Listener Type	Property assignment	Event listener
Multiple Listeners	No (overwrites previous)	Yes
Resource Errors (`<img>`, `<script>`)	Cannot capture	Can capture (with `useCapture: true`)
Callback Arguments	Separate parameters (`message`, `source`, etc.)	Single `ErrorEvent` object
Prevent Default Handling	`return true;`	`event.preventDefault();`

When to Use Which

Use window.addEventListener('error', callback, true) for modern error monitoring, analytics libraries, or when you need to capture failed resource loads alongside script execution errors.
Use window.onerror only when maintaining legacy codebases or ensuring compatibility with very old browser environments where DOM Level 2 event listeners are not fully supported.