Nuxt vs Cloudflare interop

[signor-pedro]

Problem Statement

Due to the new fantastic nitro engine, it is quite common to have Nuxt applications deployed on a non-Node target (Cloudflare Workers, etc).

While there are packages such as @sentry/cloudflare, building 2 separate integrations for the client and the server is cumbersome, quite difficult and primarily - not documented if you use a non-Node environment.

Since deploy targets are the (built-in) killer feature of Nuxt3, it would help tremendously if installing @sentry/nuxt allowed to configure a cloudflare integration in an easy manner.

Solution Brainstorm

The easiest way would be to simply extend the @sentry/nuxt documentation with a new Deploy targets section and there would be a general-purpose tutorial on how to set up cloudflare, vercel etc. packages for the server within the Nuxt lifecycle (in Nuxt, you don't directly wrap your serverless "handle" function, so this documentation is not particularly useful).

I have no idea if it is even possible to create an interoperability package in an easy manner (@sentry/nuxt-cloudflare) and I guess it would be too much maintenance?

Thank you.

[mydea]

Hey, thanks for writing in.

We will explore this in more detail once the Nuxt SDK generally stabilizes. We'll definitely look to at least provide proper docs for how to set this up!

[signor-pedro]

Thank you very much.

Perhaps, if anyone cares to explain in very high-level terms 🙏

When I turn on Node.js compatibility in Cloudflare, why does a simple Nitro plugin like this not work on a Cloudflare worker?

import * as Sentry from "@sentry/nuxt";

export default defineNitroPlugin((nitroApp) => {
  Sentry.init({
    dsn: "dsn,
  });

  nitroApp.hooks.hook("error", (error, { event }) => {
    Sentry.captureException(error, event);
  });
});

Or, let me rephrase - all I need is for @sentry/cloudflare to return a Sentry.init() function (just like other packages do).

The withSentry() wrapper method is very useful for pure server functions, but I guess I should be able to boostrap the Sentry instance for Cloudflare manually?

[signor-pedro]

See toucan-js for reference

export default defineNitroPlugin((nitroApp) => {
	nitroApp.hooks.hook('error', (err, context) => {
		// ...

		const sentry = new Toucan({
			dsn: sentryDsn,
			// ...
		})

		sentry.setTag('server', true)

		sentry.captureException(err)
	})
})

I can easily create the client within the hook manually. Instead in @sentry/cloudflare, I cannot easily boostrap the CloudflareClient instance, because I would have to manually create a transport beforehand, etc. - and the whole init method is not public, but burried somewhere in the internal js file (sdk.js etc)

[s1gr1d]

As of now, this is not supported but we'll look into how the Nuxt SDK can work with Cloudflare. Right now you could use e.g. Toucan on the backend only use @sentry/nuxt on the frontend side.

[signor-pedro]

Thank you!

I ended up using @sentry/nuxt for the client. For the server, I simply turned on the "tail worker" integration available by Cloudflare.

It's very crude (no reasonable stacktrace etc.) but works out-of-the box. Looking forward to using the official SDK :)

[AbhiPrasad]

Once the Nuxt SDK gets out of beta, we can add some docs to our cloudflare framework guide for nuxt: https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/

[ymansurozer]

I ended up using @sentry/nuxt for the client. For the server, I simply turned on the "tail worker" integration available by Cloudflare.

I tried to use the Tail Worker integration, too. But it seems Cloudflare is not able to get the projects from Sentry. Did you experience this too or it never happened on your setup?

[signor-pedro]

I experienced it too and it turned out that the API call simply took too long in my case - the response returned maybe after a minute. I just waited 🤷