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

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:



  1. msg : The message related to the error.
  2. source : The URL of the script or the document related to the error.
  3. lineNo: The line number.
  4. columnNo: The column number.
  5. 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

function captureError(err) {
  var errorData = {
    name: err.name, 
    message: err.line, 
    url: document.location.href,
    stack: err.stack 
  };
  $.post('/logger/js/', {
    data: errorData
  });
}

chevron_right


full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.