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
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Create a Photo Stack Effect with Pure CSS Animations or MooTools

    My favorite technological piece of Google Plus is its image upload and display handling.  You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...