sentry-javascript: SvelteKit Cloudflare adapter failing
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?
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
- manually setup the sveltekit + sentry integration
- verify it’s working locally
- install adapter-cloud flare and update svelte.config.ts according to sveltekit documentation – partial example provided below.
- 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"
About this issue
- Original URL
- State: open
- Created a year ago
- Reactions: 22
- Comments: 21 (5 by maintainers)
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
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/svelteon the client side andToucan-json the server (edge) .See @jill64/sentry-sveltekit-cloudlfare if you like.
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.Blocking usage of Sentry for us, hope you can manage this 🙏🙏😊 thank you devs !!
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/svelteto just monitor your frontend while we work on fixing the cloudflare side of things. Thanks for your patience everyone!Any news or workaround on this ?
@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!
For what it’s worth, this issue also blocks using Sentry in Vercel Edge Functions, since it’s also not a full Node environment.
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/sveltekitpackage, but I will try to extract and implement the necessary functionality.@matindow what you’re describing sounds about right to me. You can’t use
@sentry/sveltekiton the server side (i.e. in clodflare workers) because it uses@sentry/nodeinternally, 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 😃I don’t know if this is particularly helpful, but in my testing it fails with this error only with either
autoInstrument: trueor with@sentry/sveltekitinit in thehooks.server.js. The build steps and client side init + error handler seem to work fine, which makes sense, because theloadfunction/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 thehandleErrorfunction (i’m not currently monitoring my load function, but i assume i could similarly use toucan to accomplish the same thing).I just came across this issue myself, is there a workaround for Cloudflare pages? Setting the
autoInstrument: falsedid 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
in the docs, so that’s on me.