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