Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
9K+ Views
