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
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

  • By
    Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...

  • By
    Duplicate DeSandro’s CSS Effect

    I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate:  use some simple JavaScript goodness to inject unicorns into their page.