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
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

Incredible Demos

  • By
    MooTools Wall Plugin

    One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show...

  • By
    Resize an Image Using Canvas, Drag and Drop and the File API

    Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...