Fly Edge Apps: Reporting Exceptions

When an exception happens in production, you want to know right away and you want to know what exactly happened. Sure, you can look at your logs, but there are a ton of exception reporting services out there. This post explains how to use Sentry with your Fly Edge App.

Wiring it up

In one of our example apps, DocumentUp, we use raven-js to report exceptions on Sentry.

You'll need to install Raven.js first:

npm install --save-dev raven-js

Then, import it and set it up using your app.config

import Raven from 'raven-js'

Raven.config(app.config.sentry_url, {
  environment: app.env,
  release: app.version
}).install()

In DocumentUp, we use the following configuration (.fly.yml) for this:

app: your-app-name
config:
  sentry_url: https://<token>@sentry.io/<project id>
  # ... more config

Reporting and tagging exceptions

There's no "error" event you can listen to (yet) to report exceptions. You have to wrap your code in a try/catch statement or use Raven.wrap(fn) / Raven.context(fn), more in their documentation.

Sentry wants to tag your exceptions properly. Since this is not a browser environment, or a node.js environment, it doesn't know how to automatically tag entries.

You need to manually specify the tags that interest you. For instance, this is setting a "transaction" tag on all subsequent exceptions. That's why we set it at the beginning of our FetchEvent handler.

addEventListener('fetch', function (event) {
  // set tags for the current "context"
  Raven.setTagsContext({ transaction: `${event.request.method} ${event.request.url}` })
  
  event.respondWith(async function () {
    try {
      // do your thing
    } catch (e) {
      Raven.captureException(e)
      console.error("error responding to request!", e.stack)
      return new Response("Something went wrong, we've been notified.", { status: 500 })
    }
  })
})

The second part in the example above shows how to use a try/catch to report exceptions to Sentry and then respond with something appropriate to the client.

More information on configuration, tagging and reporting exceptions here: Sentry JavaScript Client Documentation

The full source for DocumentUp is available here: https://github.com/superfly/documentup.js

How does it look?

When an exception is reported to Sentry, this is what you'll see in their dashboard:

sentry-dashboard@2x

You'll notice the stacktrace lines start with webpack://. This is because we've bundled webpack in the fly package. When you run your app locally with fly server or deploy to our edge servers with fly deploy, we're building it with webpack automatically for you.

There's a lot more you can configure to make it look better on Sentry. Refer to the docs!

Fly started when we wondered "what would a programmable edge look like"? Developer workflows work great for infrastructure like CDNs and optimization services. You should really see for yourself, though.

Jerome Gravel-Niquet

@jeromegn

Jerome Gravel-Niquet

Founder

Montréal