Cloudflare Workers Support

Hey! I attempted to use Bugsnag within a Cloudflare Worker: https://www.cloudflare.com/products/cloudflare-workers/. This is like the Service Workers API, but built to run at the CDN layer instead of in a user’s browser.

I attempted to bring in both @bugsnag/js (didn’t work due to navigator not being set) and @bugsnag/node (didn’t work due to no “fs” module). I also tried to use the unofficial https://github.com/jmshal/bugsnag-js-cloudflare-workers but this did not work either.

The way to compile workers is to use webpack + webworker target (https://webpack.js.org/configuration/target/#string), which complicates things even further.

I ended up with a solution that looks something like this (using @bugsnag/core/report + error-stack-parser, thanks to report.test.js in this repo! + your HTTP API):

const Report = require('@bugsnag/core/report');
const ErrorStackParser = require('error-stack-parser')

addEventListener('fetch', event => {
  event.passThroughOnException();

  event.respondWith(respond(event));
});

async function respond(event) {
  try {
    // Some more worker code that may error
    return fetch(event.request);
  } catch(e) {
    const report = new Report(e.name, e.message, ErrorStackParser.parse(e));
    report.updateMetaData('request', {
      method: event.request.method,
      url: event.request.url,
    });
    report.app = {
      id: 'name',
      version: '1.0.0',
    };
    console.log('Sending error to bugsnag', e.name, e.message, ErrorStackParser.parse(e), JSON.stringify(report));

    event.waitUntil(fetch('https://notify.bugsnag.com/', {
      method: 'POST',
      headers: {
        'Bugsnag-Api-Key': 'BUGSNAG_API_KEY',
      },
      body: JSON.stringify({
        notifier: {
          name: 'name',
          version: '1.0.0',
          url: 'https://example.com/',
        },
        events: [
          report,
        ],
      }),
    }))
  }
}

This seems to work, but would be great to have first class support for this! Cheers

[jamesarosen]

@domharrington if you add a webpack.DefinePlugin to your webpack config, you can have webpack rewrite the navigator global references:

new webpack.DefinePlugin({
  navigator: '{ userAgent: "" }',
}),

It results in some weird but completely functional code:

var mimeTypesLength = {
  userAgent: ''
}.mimeTypes ? {
  userAgent: ''
}.mimeTypes.length : 0;
var clientId = pad((mimeTypesLength + {
  userAgent: ''
}.userAgent.length).toString(36) + globalCount.toString(36), 4);

[ScottAwesome]

Biggest issue here for me is next.js and bugsnag. The underlying architecture of the bugsnag plugins just don’t play well, and very soon (likely announcing Oct. 25) they’ll be encouraging and moving toward the cloudflare runtime underneath, however it remains to be seen if things are going to be compat / configurable.

This means Bugsnag, effectively, will have even worse compatibility with Next.js projects. Is there any way to get visibility for this? Right now I’m looking at recommending moving to a different logging platform entirely due to the limitations of the design.

Even a simple fetch based logger would be good, and would work exceedingly well in all environments.