Compatibility of @sentry/astro with Cloudflare Pages

[mariusbolik]

Problem Statement

I installed the @sentry/astro integration in my Astro Project:

import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";
import sentry from "@sentry/astro";

export default defineConfig({
  output: "server",
  experimental: {
    actions: true,
  },
  adapter: cloudflare({}),
  integrations: [
    sentry({
      dsn: "https://18aba3b773c3ef1891e719e73a311ec4@o4505279164252160.ingest.us.sentry.io/4507712395214848",
      sourceMapsUploadOptions: {
        project: "pwa-astro",
        authToken: import.process.env.SENTRY_AUTH_TOKEN,
      },
    }),
  ],
});

But on build I receive this error:

11:16:47 [ERROR] [vite] x Build failed in 1.49s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "node:http" imported from "node_modules/@sentry/node/build/esm/integrations/spotlight.js". Consider disabling ssr.noExternal or remove the built-in dependency.

So I extendet my astro config:

  vite: {
    ssr: {
      external: ["node:http"]
    },
  },

But then I get the next error:

[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "node:fs" imported from "node_modules/@sentry/node/build/esm/integrations/contextlines.js". Consider disabling ssr.noExternal or remove the built-in dependency.

Solution Brainstorm

Cloudflare provides a sentry plugin: https://developers.cloudflare.com/pages/functions/plugins/sentry/
Is it possible that to use this plugin to make the Sentry/Astro integration compatible with CF Pages?
Maybe releated to: #12620

[andreiborza]

Hello, thanks for reaching out.

Adding Cloudflare Pages support for Astro is on our roadmap and is actively being worked on. You can follow the progress in #12620.

As for making the plugin work, have you already tried it? It's not maintained by us so a bit hard to verify 😅. Maybe my colleague @AbhiPrasad has a bit more insight into this.

[mariusbolik]

Thank you for coming back to me, @andreiborza. I tried the plugin, but it's not really compatible with the Astro middleware. The sentry plugin provided by cloudflare returns a response format that is not compatible with the response format that the astro middleware needs.

But I tried @sentry/cloudflare. It seems promissing so far. Sadly I also receive a typescript error. I don't know exactly how to change the requestHandlerOptions:

Reproduction: https://stackblitz.com/edit/github-h3zdcy?file=src%2Fmiddleware.ts&on=stackblitz

[andreiborza]

@AbhiPrasad seems like astro's middleware does not provide waitUntil and passThroughOnException functions, see https://docs.astro.build/en/guides/middleware/#the-context-object. Can we fall back to our own flush?

@mariusbolik this might be something to file with Astro as well.

[AbhiPrasad]

This should be passed through https://github.com/withastro/adapters/blob/cd4c0842aadc58defc67f4ccf6d6ef6f0401a9ac/packages/cloudflare/src/entrypoints/server.ts#L70

I guess it's called locals.runtime.ctx instead of context?

I'll be writing up a guide on this soon!

[mariusbolik]

Types are still a problem here, but this seems to work:

  const requestHandlerOptions = {
    options: {
      dsn: '',
      tracesSampleRate: 1.0,
    },
    request: context.request,
    context: (context.locals as any).runtime.ctx,
  };
  return Sentry.wrapRequestHandler(requestHandlerOptions, () => next());

Thanks @AbhiPrasad!
Hopefully we can use the Astro/Sentry integration soon! I really like that it uploads the sourcemap files automatically :D