Let's get to know: Bugsnag

To get to know Bugsnag, you first need to understand the issue it's here to solve. So let's put ourselves in the shoes of a new up and coming SaaS startup.

In your last deploy to production, a minor, yet substantial typo slipped it's way through. Causing new users to be presented with a button, right after they sign up, which is intended to take them to the app, but instead does nothing.

It would be easy to pick up on if you had tests in that area - but you and your team focus your efforts on the actual product, and haven't tested the onboarding process for quite some time. Naughty!

When a user inevitably reports this issue to you via your support channel - they explain that the app "doesn't work". They're not telling fibs, but they're not knowledgeable with your product yet, and only give you half of the picture. So, one of your engineers takes a look; logging into the app, clicking around on a few buttons, finally concluding that everything is functioning as expected.

You have no idea whether this report is legitimate. And if it is, who else is having this issue, but don't have the time to let you know about it?

Bugsnag is a service which provides you with a real time view of errors which occur in your app, regardless of where, who, and when they happen.

Let's now re-imagine the issue, but this time with Bugsnag... and also their Slack integration.

The instant the new user clicks the broken button, the error which is preventing them from being redirected to your app is sent to Bugsnag. Because the error is brand new - and hasn't been seen before, Bugsnag issues a notification to a channel in your Slack org. All your engineers have visibility over the errors happening in real time in your app.

The engineer who made the typo spots the mistake, and immediately pushes a patch. Not only does the engineer know exactly what the typo was, they also know; where in the code it was, how many users were affected, when the error first started occurring, and which page it's happening on.

All of this information allows your engineer to replicate the issue and verify the patch has solved the issue. And because they know which user was affected - they know how to respond to the user when their support email comes through.

For more complex issues, Bugsnag offers a feature they call Breadcrumbs. It's a way of leaving a trail of events which occur in your app before the error does. Breadcrumbs are named events which have meta data attached. The full power of Breadcrumbs are really shown off in Single Page Apps (SPAs).

Let's take this example;

  • The user enters their username & password into the registration form.
  • They click the "Register" button, and a request to the server is made to create their account.
  • A breadcrumb named "Account created" is left.
  • The broken button is displayed to the user.
  • The user clicks the button.
  • An automatic breadcrumb named "UI click" is left. It also attaches some metadata, like the button text and ID.
  • Then the error occurs, causing an error report to be sent to Bugsnag.

When you take a look at the error report, you see that the; user created an account, then tried to click on a button, which then caused an error to occur (as shown below).

A screenshot of the Bugsnag Breadcrumbs view

So far this has all been front-end oriented. But in all honesty, the process is almost identical for your application's backend. Bugsnag makes it easy to integrate their hooks into your app, whether you're using JavaScript in the browser, Node.js on the server side, Ruby, Java, Swift, Go, the list goes on and on...

It's clear to me, at least, that Bugsnag truly cares about the customer experience. They've done several major re-designs over the 5 years they've been running. And if you're the kind of person that is usually put off my major product re-designs, don't be! Each step of the way their amazing team of designers and developers have kept the feel of the product alive. Every time making it easier and more intuitive to navigate.

I don't even have time in this post to explain all the other amazing features Bugsnag offer. Like; inline code, project spiking, customisable filters, their seriously incredible timeline view and project deploys.

Bugsnag is perfect for your personal projects. It starts at $0. Yes, you heard that right. It's free for up to 250 error reports a day. They also offer plans for teams of any size.

However no matter which plan you're on, your experience of Bugsnag is top tier. The team are constantly making things faster - they recently moved their entire infrastructure. Even I am feeling a noticeable performance boost, and I have to deal with New Zealand internet.

I'll finish up by saying this; there really isn't any reason not to try Bugsnag. If you haven't realised it's potential already, you certainly will by giving it a go yourself.

🍻 Here's to many more years of being in the loop.