How to catch all JavaScript errors and send them to server? - GeeksforGeeks

08 Jun, 2020
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.
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  });}
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript