/ Middleware

Fly Middleware: Bugsnag

When running modern JavaScript, much of the hard-work is done by the client - the user's browser. With small snippets, you can add big features - be careful to stay within your latency budget, though!

Today, we're happy to announce that you can now add Bugsnag to your Fly.io sites. Bugsnag automatically captures and reports on production exceptions that your site is experiencing. We'll show you how it works and how you can get it running.

Bug-snagging

Bugsnag is an invaluable tool for those looking to serve smooth user-experiences through JavaScript-based applications. While it supports many languages, like Go, PHP, Python, and Ruby, we're going to focus on the 'Browser JavaScript' platform.

With nothing more than the snippet provided through Fly Middleware, you automatically receive diagnostic data that you may glean from an HTTP header; IP, URL, browser name, version, user-agent, locale; operating system. It'll also capture the 25 events that occurred prior to the error that was discovered, creating a useful trail of breadcrumbs to follow.

That's handy! When you weave it into your code, that's when it becomes most beneficial. Let's look at a couple examples.

You can use it to handle exceptions:

try {
  // Code that may contain a bug.  
} catch (exception) {
  Bugsnag.notifyException(e, "ThisIsMyErrorName);
}

Or to leave custom breadcrumbs for future sleuthing:

Bugsnag.leaveBreadcrumb("ClickedSecretButton")

Intrigued? Indeed. Let's see how you can get this running within Fly...

Fly + Bugsnag: Fly Swatting

First things first, you'll want to headover to Bugsnag and create an account. During setup, you'll create a JavaScript property. You'll see a JavaScript snippet appear; we want to take the value provided within data-apikey:

Retrieving data-apikey from app.bugsnag.com

Next, you'll head to Fly. If you don't have an account, you should conjure one. With your site added and your DNS configured, visit the Middleware page. Find Bugsnag and click 'Configure'. Next, enter your API key, like so!

Adding Bugsnag API to Fly

With that completed, you'll see Bugsnag listed within your request life-cycle:

Bugsnag enabled

Great! Now you can add useful calls to your JavaScript application... Or, simply enjoy the benefits of the default implementation without adding your own calls.

Summary

Fly's ever-expanding library of Middleware has grown even further to include Bugsnag JavaScript. We're pleased to make it easier to get rolling; gain valuable insight into your errors and user actions in a few clicks. Signup with Fly to add streamlined and powerful Middleware. It's free to sign up, as are your first 2,000,000 requests and 100gb of transfer every month.

Kellen Evan Person

@thegoodroot

Kellen Evan Person

A polite, forest-dwelling Canadian who enjoys coding and writing. He's spent near two decades building web applications and strives to keep development fun and light-hearted.

North Vancouver, Canada