Article Categories

Selected Reading

How to catch all JavaScript errors?

Javascript Web Development Front End Technology

To catch all JavaScript errors, we can use the window.onerror method which acts like a global try-catch statement. The onerror event handler was the first feature to facilitate error handling in JavaScript. The error event is fired on the window object whenever an exception occurs on the page.

The onerror event handler provides three pieces of information to identify the exact nature of the error:

Error message ? The same message that the browser would display for the given error
URL ? The file in which the error occurred
Line number? The line number in the given URL that caused the error

Syntax

Following are the syntax options to catch all JavaScript errors:

window.onerror = function (message, source, lineno, colno, error) { 
    // Handle error
}

window.addEventListener("error", (ErrorEvent) => { 
    // Handle error
})

Parameters

The window.onerror method receives five parameters:

message ? The human readable error message that describes the problem in form of a string
source ? The URL of the script file that generated the error. It is also in form of a string
lineno ? The line number of the script file that generated the error. It is in Integer format
colno ? The column number of the script file that generated the error. It is in Integer format
error ? This is the Error Object that is being thrown

Note: The window.addEventListener receives only one ErrorEvent object containing all the error information.

Example 1: Using window.onerror Method

In this example, we create a button that calls a non-existent function to trigger an error. The window.onerror handler catches and displays the error details:

<!DOCTYPE html>
<html>
<head>
   <title>Catching JavaScript Errors</title>
</head>
<body>
   <h2>Catching all JavaScript errors using window.onerror</h2>
   <p>Click the following to see the result:</p>
   <form>
      <input type="button" value="Click Me" onclick="myFunc();" />
   </form>
   <div id="result"></div>
   
   <script>
      window.onerror = function (message, source, lineno, colno, error) {
         
         // Print the error message
         let output = document.getElementById("result");
         output.innerHTML += "Message: " + message + "<br>";
         
         // Print the url of the file that contains the error
         output.innerHTML += "URL: " + source + "<br>";
         
         // Print the line number from which the error generated
         output.innerHTML += "Line number: " + lineno + "<br>";
         
         // Print the column number of the error line
         output.innerHTML += "Column number: " + colno + "<br>";
         
         // Print the error object
         output.innerHTML += "Error Object: " + error + "<br><hr>";
         
         // Return true to prevent the error from displaying in console
         return true;
      }
   </script>
</body>
</html>

Message: myFunc is not defined
URL: /path/to/your/file.html
Line number: 12
Column number: 35
Error Object: ReferenceError: myFunc is not defined

Example 2: Using addEventListener Method

This example achieves the same result using addEventListener instead of onerror:

<!DOCTYPE html>
<html>
<body>
   <h2>Catching all JavaScript errors using addEventListener</h2>
   <p>Click the following to see the result:</p>
   <form>
      <input type="button" value="Click Me" onclick="myFunc();" />
   </form>
   <div id="result"></div>
   
   <script>
      window.addEventListener("error", (ErrorEvent) => {
         let output = document.getElementById("result");
         
         // Print the error message
         output.innerHTML += "Message: " + ErrorEvent.message + "<br>";
         
         // Print the url of the file that contains the error
         output.innerHTML += "URL: " + ErrorEvent.filename + "<br>";
         
         // Print the line number from which the error generated
         output.innerHTML += "Line number: " + ErrorEvent.lineno + "<br>";
         
         // Print the column number of the error line
         output.innerHTML += "Column number: " + ErrorEvent.colno + "<br>";
         
         // Print the error object
         output.innerHTML += "Error Object: " + ErrorEvent.error + "<br><hr>";
      });
   </script>
</body>
</html>

Message: myFunc is not defined
URL: /path/to/your/file.html
Line number: 12
Column number: 35
Error Object: ReferenceError: myFunc is not defined

Comparison

Method	Parameters	Browser Support	Flexibility
`window.onerror`	5 separate parameters	All browsers	Limited (can only assign one handler)
`addEventListener`	1 ErrorEvent object	Modern browsers	Better (can add multiple handlers)

Key Points

Both methods catch runtime JavaScript errors globally
addEventListener is more modern and flexible
Return true from window.onerror to prevent the error from appearing in the browser console
These handlers won't catch syntax errors or errors in async code

Conclusion

Use window.onerror or addEventListener("error") to catch all JavaScript errors globally. The addEventListener approach is preferred for modern applications due to its flexibility and cleaner syntax.

Saurabh Jaiswal

Updated on: 2026-03-15T23:18:59+05:30

12K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next