JavaScript Error Monitoring

By  on  

One of the reasons I love front-end development is the reason many server-side developers hate it:  the difference in browser implementations, the different implementation dates, and the ability to hang yourself with bad JavaScript.  I enjoy the hell out of this battle despite having no control over the browser environment but I'm not crazy -- I always have a safety net to detect errors quickly.  That safety net?  TrackJSTrackJS allows me to detect JavaScript errors in real time, telling me what browser the user is navigating with, which pages the error occurs, and much more.

TrackJS is a sponsor of this blog and I'm proud to represent!  Before using TrackJS I was trying to do error tracking via Google Analytics but that wasn't going well -- I wasn't getting the detail I wanted which isn't surprising considering GA is a generic analytics tool not fine tuned for error reporting.  TrackJS, on the other hand, built for tracking JavaScript errors and it does the task quite well.  I've used their service for over a year now and owe them many thanks for saving my behind!

Thank You TrackJS

TrackJS has alerted me to many issues over the past few years, including:

  • Piloting multiple Service Worker related WordPress plugins created by Mozilla
    • Watch out for Safari's lack of native Promise and arrow function support!
  • JavaScript API updates (...or lack of) by browsers
    • Safari is the new Internet Explorer 6...
  • Error detection for advertisement blocking
    • Roughly 15% of my requests to BSA fail which I now thanks to TrackJS

      Messages

  • JavaScript library errors
    • Maybe my build system shouldn't be pulling the latest version without me testing first....

What's awesome is that I got alerted to these issues via my nightly TrackJS email so I could get to them within hours of a push.  I can configure my TrackJS panel to notify me off issues earlier but for this blog I'm happy with the nightly ping.

New Features

TrackJS has recently implemented some solid new features that make collaborating and data management easier:

  • Sharing: From any error, you can now generate a shareable link. You can use this link to share error details with colleagues, or post them publicly and ask questions online.
  • Metadata API: Allows you to add any arbitrary key-value about the current environment. For example, the user's permission level or the current server. Once this information is provided, you can slice and dice your errors by nearly any way you can conceive.
  • Global Filter: Across the UI, an "Add to Filter" button has been added. You can see this in messages, users, browsers, or metadata. You can choose any single item from these and filter the rest of the UI by this property. For example, add Safari to your filter, and then see all the messages that have impacted Safari.

At a Glance

A few look-ins at my TrackJS panel:

Error Detail

Error Detail

Messages

Messages

Urls

Urls

Browsers

Browsers

Share

Share

Nightly Email

Email

Try TrackJS!

TrackJS is a sponsor but more so a service I've trusted to keep me in the loop about my site's JavaScript stability and performance.  Browser change, implementations change, user actions change; it's good to know I can see where the errors are happening so I can fix my busted code!

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    Sexy Opacity Animation with MooTools or jQuery

    A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique...

  • By
    Use Custom Missing Image Graphics Using Dojo

    A few months back I posted an article about how you can use your own "missing image" graphics when an image fails to load using MooTools and jQuery. Here's how to do the same using Dojo. The HTML We'll delegate the image to display by class...