SvelteKit Cloudflare adapter failing

[lucasnad27]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] 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/@sentry+sveltekit@7.54.0_@sveltejs+kit@1.20.0_svelte@3.59.1/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/@sentry+sveltekit@7.54.0_@sveltejs+kit@1.20.0_svelte@3.59.1/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.

https://github.com/getsentry/sentry-javascript/issues/6692#issuecomment-1537244177

[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.

[lucasnad27]

Escape hatch has been used :) Just want to keep this ticket warm. It will be really nice to use the official sveltekit + sentry integration when it's ready 😻 but for now....ToucanJS seems to be sufficient so far 😎

[AbhiPrasad]

@lucasnad27 we've started looking at https://github.com/getsentry/sentry-javascript/issues/8693, which should hopefully help build the infrastructure for better support here!

thanks for your patience, appreciate you checking in!

[MarArMar]

Blocking usage of Sentry for us, hope you can manage this 🙏🙏😊 thank you devs !!

[jill64]

Hello everyone.

Until the Cloudflare adapter is officially supported, I have created a simple library that is a solution to this problem.

Based on the escape hatch mentioned above, I use @sentry/svelte on the client side and Toucan-js on the server (edge) .

See @jill64/sentry-sveltekit-cloudlfare if you like.

[Lms24]

Hey @jill64 thanks for doing this! Took a quick look and IMO it's a solid workaround until there's proper support from our end. Thank you!

I wonder if we can solve the import { page, navigating } from '$app/stores' error mentioned above as I believe that's sort of blocking the client-side routing instrumentation. Did you try adding our SvelteKit routing instrumentation to BrowserTracing?

[jill64]

No, I have not tried it yet, but I believe it is possible. Since it depends on @sentry/node, it is not possible to import from the @sentry/sveltekit package, but I will try to extract and implement the necessary functionality.

[MarArMar]

Thanks so much for the suggestion Jill ! I have postponed my move to cloudflare but once it s again on the table your repo will be probably the way for us, so thank you so much for your work 👍

[wbhob]

For what it's worth, this issue also blocks using Sentry in Vercel Edge Functions, since it's also not a full Node environment.

[MarArMar]

Any news or workaround on this ?

[jill64]

As a workaround, @jill64/sentry-sveltekit-cloudflare is still available. @jill64/sentry-sveltekit-edge is also available, which works with vercel, netlify, and other edges in general, although some functionality is limited.

[ZetiMente]

As a workaround, @jill64/sentry-sveltekit-cloudflare is still available. @jill64/sentry-sveltekit-edge is also available, which works with vercel, netlify, and other edges in general, although some functionality is limited.

@jill64 Thanks for the support !

[saturnonearth]

Any movement on this?

[AbhiPrasad]

We're currently working on our next major version (https://github.com/getsentry/sentry-javascript/discussions/9802) which is taking all of the maintainers bandwidth currently. Some of the planned API changes/increased OpenTelemetry support should help with cloudflare support generally.

Otherwise there is workaround in https://github.com/getsentry/sentry-javascript/issues/8291#issuecomment-1848379156, or with https://github.com/robertcepa/toucan-js