
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to catch all JavaScript errors?
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
Followings are the syntax to catch all JavaScript errors using window.onerror method −
window.onerror = function (event, souce, lineno, colon, error) { }
OR
Window.addEventListener( "error" , ( ErrorEvent ) => { })
Here we can see both the syntaxes are doing the same thing but the in onerror receiving are five parameters while the addEventListener receiving one parameter which wraps up all the five properties of the onerror, these properties are following −
event − 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.
colon − The column number of the script file that generated the error. It is in Integer format.
error − This is the Error Object that being thrown.
Note: The window.onerror only recieves five parameters, when it comes to Element.onerror we receive only one ErrorEvent onbject.
Steps
To catch all JavaScript errors using the window.onerror event handler, follow these steps −
STEP 1 − Open your HTML file in a text editor
STEP 2 − Add an element in your HTML where you want to display the error messages. You can use a div element with an id attribute, like this:
STEP 3 − Add a script element in your HTML and define the window.onerror event handler function. This function will be called whenever an error occurs in your JavaScript code.
STEP 4 − You can use these arguments to display the error details in your HTML element.
STEP 5 − Add a button or any other element in your HTML that will trigger the error. You can use the onclick event handler to call a function that generates an error.
Example: Using the window.onerror() Method
In this example, we create an input tag and on clicking the input tag we call a function that doesn’t exist and by using the window.onerror we are printing the errors.
<html> <head> <h2> Catching all JavaScript errors using window.onerror </h2> </head> <body> <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 (error, source, lineno, colno, error) { // Print the error message let output = document.getElementById("result"); output.innerHTML += "Message : " + error + "<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 he error object output.innerHTML += "Error Object : " + error; } </script> </body> </html>
Example 2: Using the window.adEventListener() Method
This is also same as the first example but we use the addEventListener instead of onerror.
<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> num = 20; 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 he error object output.innerHTML += "Error Object : " + ErrorEvent.error; }) </script> </body> </html>
In summary, to catch all JavaScript errors, the window.onerror method or window.addEventListener method can be used. These methods act like a global try-catch statement and are triggered when an error occurs in the JavaScript code.
- Related Articles
- How to catch syntax errors in JavaScript?
- How to catch all JavaScript unhandled exceptions?
- How to catch exceptions in JavaScript?
- How to catch all the exceptions in C++?
- How to catch any JavaScript exception in Clojurescript?
- Custom Errors in JavaScript
- What are syntax errors in JavaScript?
- What are runtime errors in JavaScript?
- How to append new information and rethrowing errors in nested functions in JavaScript?
- Short TEXT for all errors occurred in SAP system
- Explain Optional Catch Binding in JavaScript.
- How to handle Geolocation errors in HTML5?
- How to display errors in PHP file?
- How to create custom errors in Golang
- How to solve “Unary operator expected” errors?
