Catch all JavaScript errors and send them to server

I wondered if anyone had experience in handling JavaScript errors globally and send them from the client browser to a server.

I think my point is quite clear, I want to know every exception, error, compilation error, etc. that happens on the client side and send them to the server to report them.

I’m mainly using MooTools and head.js (for the JS side) and Django for the server side.

Answers:

Answer

I recently tested Sentry on production and it works fine (JS and other languages like PHP)

1- It's open source (You can install it on your own server) 2- You can use the free plan (100 reports / day)

Or install it on your server: github.com/getsentry

Answer

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.

Answer

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

Answer

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
      }
   })
})
Answer

Also, the http://jslogger.com service can help with that:

Log Javascript errors and events in the cloud

from http://jslogger.com/features :

From now on you can spy on all the errors that break your site's user experience. Every Javascript error will be caught and brought to you for later debuging.

DISCLAIMER: not affiliated with the service/company.

Answer

You can try Atatus - It is a new JavaScript Error Tracking Service along with Real User Monitoring (RUM) for modern web apps.

We don’t just capture the errors, but also the user events that triggered the error. This gives you steps to reproduce the error at your end.

Alongside error capturing, we also capture the page load time and showing it across different perspectives - Geo, Browser, Page Drill Down, Page Histogram, Ajax Monitoring and Transaction Monitoring.

https://www.atatus.com/

Docs available: https://www.atatus.com/docs

Disclaimer: I am a web developer at Atatus.

Answer

The uncaught library is good free way capture all JS errors, including unhandled rejections.

Answer

You might wanna check out this new service, http://rescuejs.com/. https://bugsnag.com/

Lets you log all your javascript errors without writing server side code yourself. It also tracks browser versions and so on.

I'm not sure I would consider them 100% "enterprise ready", but it's definitely worth checking out.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.