SvelteKit Cloudflare adapter failing

[lucasnad27]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/sveltekit

SDK Version

7.54.0

Framework Version

@sveltejs/kit == 1.20.0

Link to Sentry event

No response

SDK Setup

hooks.client.ts...

Sentry.init({
	dsn: config.sentryDSN,
	environment: config.env,
	tracesSampleRate: 1,
	replaysSessionSampleRate: 0.1,
	replaysOnErrorSampleRate: 1,
	integrations: [new Sentry.Replay()]
});

hooks.server.ts

Sentry.init({
	dsn: config.sentryDSN,
	environment: config.env,
	tracesSampleRate: 1
});

Steps to Reproduce

1. manually setup the sveltekit + sentry integration
2. verify it's working locally
3. install adapter-cloud flare and update svelte.config.ts according to sveltekit documentation -- partial example provided below.
4. deploy to cloudflare (can't easily give you a way to reproduce this portion, but let me know if I can additional details

sample svelte.config.js

import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter()
};

export default config;

Expected Result

Successful build & deploy from cloudflare pages

Actual Result

16:37:00.142 | > Using @sveltejs/adapter-cloudflare
-- | --
16:37:00.627 | ✘ [ERROR] Could not resolve "$app/stores"
16:37:00.628 |  
16:37:00.628 | node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@sentry/sveltekit/esm/client/router.js:3:33:
16:37:00.628 | 3 │ import { page, navigating } from '$app/stores';
16:37:00.628 | ╵                                  ~~~~~~~~~~~~~
16:37:00.628 |  
16:37:00.629 | You can mark the path "$app/stores" as external to exclude it from the bundle, which will remove this error.
16:37:00.629 |  
16:37:01.102 | error during build:
16:37:01.103 | Error: Build failed with 1 error:
16:37:01.104 | node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@sentry/sveltekit/esm/client/router.js:3:33: ERROR: Could not resolve "$app/stores"

[lucasnad27]

Looks like others have previously reported, but I couldn't find a dedicated issue to track.

#6692 (comment)

[Wobbley]

I just came across this issue myself, is there a workaround for Cloudflare pages? Setting the autoInstrument: false did not work for me.

I wanted to try using Sentry for catching errors and issues but this seems like a complete blocker sadly.

EDIT: To be fair I just noticed it states

The SvelteKit SDK does not yet work with non-node server runtimes, such as Vercel's edge runtime or Cloudflare Workers.

in the docs, so that's on me.

[lucasnad27]

I'm assuming they have plans to support cloudflare workers/pages in the near future, but might not be at the top of their priority list. Hopefully soon though 🤞🏼

[AbhiPrasad]

On our backlog to take a look at, but we need to figure out why this is breaking if you turn off autoInstrument.

In the meantime, you can just add @sentry/svelte to just monitor your frontend while we work on fixing the cloudflare side of things. Thanks for your patience everyone!

[lucasnad27]

thanks @AbhiPrasad -- lmk if you need someone to test. In the meantime, I'll keep an eye out for any updates :)

[matindow]

I don't know if this is particularly helpful, but in my testing it fails with this error only with either autoInstrument: true or with @sentry/sveltekit init in the hooks.server.js. The build steps and client side init + error handler seem to work fine, which makes sense, because the load function/server hook are the only pieces running directly on the cloudflare worker, with the other code running either on the build machine or the client's browser. Or that is my understanding?

So, currently I am using toucan-js in the hooks.server.js to init and then capturing errors with its Sentry.captureException() manually in the handleError function (i'm not currently monitoring my load function, but i assume i could similarly use toucan to accomplish the same thing).

[Lms24]

@matindow what you're describing sounds about right to me. You can't use @sentry/sveltekit on the server side (i.e. in clodflare workers) because it uses @sentry/node internally, which isn't compatible with the cloudflare worker runtime. So using toucan-js as an alternative for the server should be totally fine for the time being :)

[lucasnad27]

good to know toucan-js is a possibility if I need an escape hatch in case cloudflare support isn't available when I need server-side sentry.

[Lms24]

Hey, I have a small update since this came up again in #13976. I investigated the esbuild could not resolve "$app/stores" error and opened an issue in the SvelteKit repo with the findings: sveltejs/kit#12813

I'll let you know once we hear back from the Svelte team.

[alancwoo]

I tried using the recommended adapter @jill64/sentry-sveltekit-cloudflare in the meantime and unfortunately wasn't able to get it to work, I still also received the could not resolve "$app/stores" error, so hopefully there's a resolution! Have had to remove sentry for now.

[denny64]

any updates on this?

[Lms24]

No, no updates.

[thunderbug1]

I am also trying to integrate Sentry in a Cloudflare-Pages/Sveltekit Project.

It is a bit confusing with all the npm packages, can somebody who already went down the rabbit hole explain what options we have at the moment?

I found these:

https://docs.sentry.io/platforms/javascript/guides/cloudflare/ which links to https://developers.cloudflare.com/pages/functions/plugins/sentry/ .... seems to be official support but I could not get it working so far

what is the difference between cloudflare/pages-plugin-sentry and sentry/cloudflare ?

[gagansuie]

@alancwoo and @thunderbug1

You can view my implementation using the third-party lib here:

https://github.com/codecrowcorp/mage-website

Look in the hooks files or just search for sentry.

[Lms24]

Hey, sorry that my last reply was a bit short-worded but the sad reality (I want to be transparent with y'all) is that this is not on a high priority for us right now. As far as I can tell, our packages are still impacted by sveltejs/kit#12813. Since I'm on triaging rotation this week will try to take another look in the next days.

[nosovk]

Currently works with https://github.com/jill64/sentry-sveltekit-cloudflare