Learn how to log client-side errors of plain JavaScript application to the Server.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="stacktrace.js@*" data-semver="0.5.0" src="//cdnjs.cloudflare.com/ajax/libs/stacktrace.js/0.5.0/stacktrace.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
    // This handler is used to log all client-side errors on server. Place this in head so that this runs first and
    // is ready to catch any errors. If placed at bottom, it's possible that this may not run if an error occurs before!!!
    window.onerror = function(message, url, lineNumber, columnNumber, error) {
      try {
        var stacktrace = printStackTrace({
          e: error || message
        });
        var trace = stacktrace.join('\n');

        var clientSideErrorInfo = {
          message: message,
          url: url,
          stacktrace: trace
        };

        var xhr = new XMLHttpRequest();
        xhr.open("POST", '@Url.Action("Log", "Logger")', true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(clientSideErrorInfo));
        
        console.log(clientSideErrorInfo)
      } catch (e) {
        // Don't allow for infinitely recursively unhandled errors
        return true;
      }
    };
  </script>
    <script src="script.js"></script>
  </head>

  <body>
    <h3>
      <a href="#">http://www.siddharthpandey.net</a>
    </h3>
    <h1>How to log client-side errors of plain JavaScript application to the Server?</h1>
    <p>Check the head section of this html file</p>
    
    <script type="text/javascript">
      throw new Error("Err..rrr..!!!")
    </script>
  </body>

</html>

/* Styles go here */