Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 08 Jun, 2020
Geek Week

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




<!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
  });
}

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :