Why proxying Bugsnag (or similar service) might be a good idea?

Thu, 01 Mar 2018 19:45:00 GMT

Bugsnag is a great error monitoring service that takes care of reporting and filtering/notifying exceptions in several kind of applications. I used to use my own error reporting tool in the app I currently maintain but as I'm currently evaluating creating a new application, I started to evaluate Bugsnag to save me some time. But I stumbled upon an issue I didn't have to deal with my custom error reporting tool.

When reporting errors, it's a good idea to attach as much meaningful data as they could be quite helpful when trying to understand some errors, specially when they aren't easily reproducible. Such data include user information which I'd prefer not to expose to the front-end, including the user id.

I was initially worried about exposing the API key to the front-end, which someone could use to report errors to my account, but then I figured out I was being too paranoid and that proxying the request wouldn't prevent users from reporting errors to my account, unless I'd implement some sort of rate limit protection or disabling errors reporting for non authenticated users (after all, I'd be able to track authenticated users acting that way and take some action against them).

However, hiding from the front-end user data meant to be used only internally is important to me. That's why I decided to take a few hours to proxy browsers errors through the back-end. Here's how it was implemented using the official bugsnag-js npm package and the bugsnag Ruby gem.

In the JavaScript code, there's something like showed below. I used XMLHttpRequest rather than fetch in order to support IE11 since the polyfills are lazy loaded as required in our application and fetch may not be available when Bugsnag is initialized in the client:

import bugsnag from 'bugsnag-js';
const bugsnagClient = bugsnag({
  apiKey: '000000000000000000000000', // the actual api key will be inserted in the back-end
  beforeSend: report => {
    const original = report.toJSON(), event = {};
    let v;
    for (let k in original) if ((v = original[k]) !== undefined) event[k] = v;
    report.ignore();

    const csrf = (document.querySelector('meta[name=_csrf]') || {}).content;
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/errors/bugsnag-js/notify?_csrf=' + csrf);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.send(JSON.stringify(event));
  }
});

The back-end is a Ruby application built on top of the Roda toolkit. It uses the multi_run plugin, splitting the main applications into multiple apps (which can be seen as powerful controllers if it helps understanding how it works). These are the relevant parts of the back-end:

lib/setup_bugsnag.rb:

# frozen-string-literal: true

require 'app_settings'
require_relative '../app_root'

if api_key = AppSettings.bugsnag_api_key
  require 'bugsnag'

  Bugsnag.configure do |config|
    config.api_key = AppSettings.bugsnag_api_key
    config.project_root = APP_ROOT
    config.delivery_method = :synchronous
    config.logger = AppSettings.loggers
  end
end

app/apps/errors_app.rb:

# frozen-string-literal: true

require 'json'
require_relative 'base_app'
require 'bugsnag_setup'

module Apps
  class ErrorsApp < BaseApp
    private

    def process(r)
      super
      r.post('bugsnag-js/notify'){ notify_bugsnag }
    end

    def notify_bugsnag
      api_key = settings.bugsnag_api_key
      head :ok unless api_key && settings.store_front_end_errors
      event = JSON.parse request.body.read
      user_data = auth_session.to_h
      user_data['id'] = user_data['profile_id']
      event['user'] = user_data
      event['apiKey'] = api_key
      event['appVersion'] = settings.app_version
      payload = { apiKey: api_key, notifier: {
        name: 'Bugsnag JavaScript', version: '4.3.0', url: 'https://github.com/bugsnag/bugsnag-js'
      }, events: [event] }
      configuration = Bugsnag.configuration
      options = {
        headers: {
          'Bugsnag-Api-Key' => api_key,
          'Bugsnag-Payload-Version' => event['payloadVersion'],
        }
      }
      Bugsnag::Delivery[configuration.delivery_method].
        deliver(configuration.endpoint, JSON.unparse(payload), configuration, options)

      'OK' # optional response body, could be empty as well, we don't check the response
    end
  end
end

That's it, some extra code, but it allows me to send useful information to Bugsnag while not requiring us to expose them to the front-end application. Hopefully next time I need something like that it will help to have it written down here ;)

Rodrigo Rosenfeld Rosas — javascript

Why proxying Bugsnag (or similar service) might be a good idea?