Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Catch all JavaScript errors and send them to server [closed]

People also ask

How do you catch error messages in JavaScript?

JavaScript try and catchThe try statement allows you to define a block of code to be tested for errors while it is being executed. The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.

How do you handle errors in catch block?

Place any code statements that might raise or throw an exception in a try block, and place statements used to handle the exception or exceptions in one or more catch blocks below the try block. Each catch block includes the exception type and can contain additional statements needed to handle that exception type.

Does try catch stop execution?

The “try… First, the code in try {...} is executed. If there were no errors, then catch (err) is ignored: the execution reaches the end of try and goes on, skipping catch . If an error occurs, then the try execution is stopped, and control flows to the beginning of catch (err) .


I'd check out window.onerror

Example:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

Keep in mind that returning true will prevent the firing of the default handler, and returning false will let the default handler run.


If your website is using Google Analytics, you can do what I do:

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

A few comments on the code above:

  • For modern browsers, the full stack trace is logged.
  • For older browsers that don't capture the stack trace, the error message is logged instead. (Mostly earlier iOS version in my experience).
  • The user's browser version is also logged, so you can see which OS/browser versions are throwing which errors. That simplifies bug prioritization and testing.
  • This code works if you use Google Analytics with "analytics.js", like this. If you are using "gtag.js" instead, like this, you need to tweak the last line of the function. See here for details.

Once the code is in place, this is how you view your users' Javascript errors:

  1. In Google Analytics, click the Behavior section and then the Top Events report.
  2. You will get a list of Event Categories. Click window.onerror in the list.
  3. You will see a list of Javascript stack traces and error messages. Add a column to the report for your users' OS/browser versions by clicking the Secondary dimension button and entering Event Label in the textbox that appears.
  4. The report will look like the screenshot below.
  5. To translate the OS/browser strings to more human-readable descriptions, I copy-paste them into https://developers.whatismybrowser.com/useragents/parse/

enter image description here


Don't try to use third party services instead try for your own.

The Error Handlers can catch the below scenarios,

  1. Uncaught TypeError can't be captured
  2. Uncaught ReferenceError can't be captured eg: var.click()
  3. TypeError can be captured
  4. Syntax error can be captured
  5. ReferenceError can be captured

To Catch Javascript Errors:

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

To Capture AngularJS Errors:

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})