Nuxt3 on cloudflare pages

[dreitzner]

Hi, good to see you 🫵

I hope you didn't have to search for too long, to find the answer you are looking for.

How to I get nuxt3 with cloudflare pages and sentry working?

There is a great article that we used as a starting point.
The only issue is that this handles the server errors with the node sdk, which does no work on cloudflare pages.

Toucan to the rescue!
Toucan is a sentry client for cloudflare workers, which also works for our usecase.

So the adaptions we needed to make server/plugin.sentry.ts using toucan lead us to this solution:

// server/plugin.sentry.ts
import { Toucan } from 'toucan-js';

export default defineNitroPlugin((nitroApp) => {
    const config = useRuntimeConfig();
    const sentryConfig = config.public.sentry;

    nitroApp.hooks.hook('error', (err, context) => {
        const sentry = new Toucan({
            dsn: sentryConfig.dsn,
            context: context.event,
        });

        sentry.setTag('server', true);
        // set some other tags

        sentry.captureException(err);
    });
});

I hope this helps at least one other person. 😊

FYI: @Lms24

[Lms24]

Hey @dreitzner thanks for posting your findings! I'm sure this is helpful for people until we figure get to work on proper Nuxt and Cloudflare support. Will also share this with my team.

[iBobik]

Your placement did not worked for me, maybe it worked in some past version.

This is my config I currently use

I also enabled more features:

server/plugins/sentry.ts

import { Toucan } from 'toucan-js'

export default defineNitroPlugin((nitroApp) => {
	const { public: { sentryDsn, sentryReleaseName, environment } } = useRuntimeConfig()

	nitroApp.hooks.hook('error', async (err, context) => {
		const sentry = new Toucan({
			dsn: sentryDsn,
			release: sentryReleaseName,
			environment,
			context: context.event,
			request: context.event ? toWebRequest(context.event) : undefined,
			requestDataOptions: {
				allowedSearchParams: true,
				allowedHeaders: true,
			},
		})

		if (context.event) {
			sentry.setRequestBody(await readRawBody(context.event))
		}

		sentry.setTag('server', true)

		sentry.captureException(err)
	})
})

nuxt.config.ts

const environment =
  process.env.NODE_ENV === 'development' ? 'local' :
  process.env.CF_PAGES_BRANCH === 'master' ? 'production' :
  process.env.CF_PAGES_BRANCH ??
  'unknown'

const sentryReleaseName = process.env.CF_PAGES_COMMIT_SHA ?? 'unknown commit'


export default defineNuxtConfig({
  modules: [
    '@sentry/nuxt/module',
  ],

  runtimeConfig: {
    public: {
      environment,
      sentryDsn: 'xxx',
      sentryReleaseName,
    },
  },

  sentry: {
    sourceMapsUploadOptions: {
      org: 'xxx',
      project: 'xxx',
      authToken: process.env.SENTRY_AUTH_TOKEN,
    },
    unstable_sentryBundlerPluginOptions: {
      release: {
        name: sentryReleaseName,
        deploy: {
          env: environment,
          url: process.env.CF_PAGES_URL,
        },
      },
    },
  },

  sourcemap: {
    client: true,
    server: true,
  },
})

[lyonz]

Hello @iBobik, did you manage to get sentry to work with NUXT3 and Cloudflare? I'm really stuck to be fair.

[iBobik]

Yes, working fine. Just updated my configs ⇈

[lyonz]

Yes, working fine. Just updated my configs ⇈

Thank you so much, will try "},Y," is a mistake right?

[iBobik]

Yes, mistake, thanks

[ymansurozer]

Worked a bit further based on @iBobik's version, here is what I'm using:

import type { H3Event } from "h3";
import { H3Error } from "h3";
import { Toucan } from "toucan-js";

export default defineNitroPlugin((nitroApp) => {
  const { app: { version }, sentry: { dsn } } = useRuntimeConfig().public;

  const setupSentry = async (event?: H3Event) => {
    const sentry = new Toucan({
      enabled: !import.meta.dev,
      dsn,
      release: version,
      environment: import.meta.dev ? "dev" : "prod",
      context: event,
      request: event ? toWebRequest(event) : undefined,
      requestDataOptions: {
        allowedSearchParams: true,
        allowedHeaders: true,
      },
      sampleRate: 0.7,
      tracesSampleRate: 0.2,
    });

    if (event && ["POST", "PUT", "PATCH"].includes(event.method)) {
      const rawBody = await readRawBody(event);
      sentry.setRequestBody(rawBody);
    }

    sentry.setTag("server", true);

    return sentry;
  };

  nitroApp.hooks.hook("error", async (error, { event }) => {
    const ignoreErrors = [401, 404, 429];
    if (error instanceof H3Error) {
      if (ignoreErrors.includes(error.statusCode))
        return;
    }

    const sentry = await setupSentry(event);
    sentry.captureException(error);
  });

  nitroApp.hooks.hook("request", async (event) => {
    event.context.$sentry = await setupSentry(event);
  });
});

[jadicc]

To get Nuxt3 working with Cloudflare Pages and Sentry, use Toucan as a Sentry client for Cloudflare Workers. The server-side integration won't work with the Node SDK on Cloudflare Pages, but Toucan is designed to handle this. Here’s how you can adapt your server/plugin.sentry.ts:

import { Toucan } from 'toucan-js';

export default defineNitroPlugin((nitroApp) => {
    const config = useRuntimeConfig();
    const sentryConfig = config.public.sentry;

    nitroApp.hooks.hook('error', (err, context) => {
        const sentry = new Toucan({
            dsn: sentryConfig.dsn,
            context: context.event,
        });

        sentry.setTag('server', true);
        sentry.captureException(err);
    });
});

This should solve the issue!
https://jadicc.com/

[txhai]

Here's the way I use with the official package @sentry/cloudflare, but I’m still looking forward to a Nuxt example from their documentation.

server/plugins/errorHandler.ts

import * as Sentry from "@sentry/cloudflare";
import {toWebRequest} from "h3";

export default defineNitroPlugin((nitroApp) => {
    nitroApp.hooks.hook('request', event => {
        const requestHandlerOptions = {
            options: {
                dsn: "SENTRY_DSN",
                tracesSampleRate: 1.0,
            },
            request: toWebRequest(event) as any,
            context: event.context.cloudflare?.context,
        };
        const handlerPromise = new Promise<any>((resolve, reject) => {
            event.context._sentryHandler = {responded: false, resolve, reject};
        });
        Sentry.wrapRequestHandler(requestHandlerOptions, () => handlerPromise).catch(() => {});
    });
    nitroApp.hooks.hook('error', async (error, context) => {
        const event = context.event;
        if (event && event.context._sentryHandler && !event.context._sentryHandler.responded){
            event.context._sentryHandler.responded = true;
            event.context._sentryHandler.reject(error);
        }
    });
    nitroApp.hooks.hook('afterResponse', event => {
        if (event.context._sentryHandler && !event.context._sentryHandler.responded){
            event.context._sentryHandler.responded = true;
            event.context._sentryHandler.resolve(event.node.res);
        }
    });
})

[sparrow-chik-chrk]

Can you specify which errors this covers and the context?
Only in server requests?
Or internal ones, such as during initialization or tasks?

[txhai]

Can you specify which errors this covers and the context? Only in server requests? Or internal ones, such as during initialization or tasks?

Sorry, but my solution doesn't seem to work after deployment. At this point, I'll just switch to toucan-js.