How to catch all JavaScript errors and send them to server ?
Last Updated :
15 Feb, 2023
Today there are a large number of Web APIs available. One of which is GlobalEventHandlers, an OnErrorEventHandler to be called when the error is raised.
The onerror property of the GlobalEventHandlers is an EventHandler that processes error events. This is great for catching exceptions that never occur while testing. The different error events are :
- When a JavaScript runtime error occurs, window.onerror() is invoked.
- When a resource fails to load, the onerror() handler on the element is invoked. These error events can be handled with a window.addEventListener configured with useCapture set to True.
All JavaScript errors can be caught by this browser event onerror. It is one of the easiest ways to log client-side errors and report them to your servers. A function is assigned to the window.onerror as such:
Syntax:
window.onerror = function (msg, source, lineNo, columnNo, error) {
// function to execute error handling
}
The following arguments are passed to the function that's assigned to the window.onerror:
- msg : The message related to the error.
- source : The URL of the script or the document related to the error.
- lineNo: The line number.
- columnNo: The column number.
- error: The Error object related with this error.
If the return value is true, then only the error is handled.
Example:
Catching error: By using the below code we can catch all the errors.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Catch all JavaScript errors
and send them to server
</title>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Catch all JavaScript errors
and send them to server
</b>
<a href="javascript:myalert()">click here</a>
<script>
window.onerror =
function (msg, source, lineNo, columnNo, error) {
alert("Error: " + msg +
"\nScript: " + source +
"\nLine: " + lineNo +
"\nColumn: " + columnNo +
"\nStackTrace: " + error);
return true;
};
var myalert = function () {
alert(gfg);
};
</script>
</center>
</body>
</html>
Output :
Errors sending on server: After you’ve plugged into window.onerror in order to catch as much error information as possible,there’s just one last step, i.e. transmitting the error information to your servers. In the below example below, we use jQuery’s AJAX function to transmit the data to the servers:
JavaScript
function captureError(err) {
var errorData = {
name: err.name,
message: err.line,
url: document.location.href,
stack: err.stack
};
$.post('/logger/js/', {
data: errorData
});
}
Similar Reads
JavaScript Errors Throw and Try to Catch JavaScript uses throw to create custom errors and try...catch to handle them, preventing the program from crashing. The finally block ensures that code runs after error handling, regardless of success or failure.throw: Used to create custom errors and stop code execution.try...catch: Allows you to c
3 min read
How to Catch JSON Parse Error in JavaScript ? JSON (JavaScript Object Notation) is a popular data interchange format used extensively in web development for transmitting data between a server and a client. When working with JSON data in JavaScript, it's common to parse JSON strings into JavaScript objects using the JSON.parse() method. However,
1 min read
How to Print a Message to the Error Console Using JavaScript ? This article will show you how to print a message using JavaScript on the error console. There are three methods to display the error console, these are: Table of Content Using console.error() MethodUsing console.warn() MethodUsing console.info() MethodApproach 1: Using console.error() MethodThe con
2 min read
Unexpected token error for catch JavaScript In this article, we will try to understand the fact that why we receive Unexpected token errors while we are dealing with try/catch in JavaScript, and with the help of certain coding examples (in JavaScript itself) we will try to see how we may be able to resolve such token error properly. Unexpecte
3 min read
How to Catch an Error from External Library and Store it in a String in JavaScript ? When using an external library in our code, we may encounter errors. It is essential to catch these errors and handle them gracefully. In some cases, we may want to store the error message in a string for further processing or display it to the user. In this article, we will learn how to catch an er
3 min read