SvelteKit integration can't build

enyo commented 6 months ago

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

Framework Version

SvelteKit 2.4.3

Link to Sentry event

No response

SDK Setup

Sentry.init({
  dsn: 'https://7258e4381f9c4269acf6aff58b2a790d@o1327360.ingest.sentry.io/6588176',
  tracesSampleRate: 0,
  enabled: !dev,
})

Steps to Reproduce

I installed sentry in my SvelteKit app as the docs suggested (with the wizard). I double checked everything with the manual installation guide

Expected Result

It working

Actual Result

Building the SvelteKit project fails:

✘ [ERROR] Could not resolve "$app/stores"

    node_modules/.pnpm/@sentry+sveltekit@7.101.1_@sveltejs+kit@2.4.3_svelte@4.2.9/node_modules/@sentry/sveltekit/esm/client/router.js:3:33:
      3 │ import { page, navigating } from '$app/stores';
        ╵                                  ~~~~~~~~~~~~~

  You can mark the path "$app/stores" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the
  bundle.

error during build:
Error: Build failed with 2 errors:
node_modules/.pnpm/@sentry+sveltekit@7.101.1_@sveltejs+kit@2.4.3_svelte@4.2.9/node_modules/@sentry/sveltekit/esm/client/browserTracingIntegration.js:1:33: ERROR: Could not resolve "$app/stores"
node_modules/.pnpm/@sentry+sveltekit@7.101.1_@sveltejs+kit@2.4.3_svelte@4.2.9/node_modules/@sentry/sveltekit/esm/client/router.js:3:33: ERROR: Could not resolve "$app/stores"
    at failureErrorWithLog (/Users/mmo/Developer/pausly/webapp/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1651:15)
    at /Users/mmo/Developer/pausly/webapp/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1059:25
    at /Users/mmo/Developer/pausly/webapp/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1004:52
    at buildResponseToResult (/Users/mmo/Developer/pausly/webapp/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1057:7)
    at /Users/mmo/Developer/pausly/webapp/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1086:16
    at responseCallbacks.<computed> (/Users/mmo/Developer/pausly/webapp/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:704:9)
    at handleIncomingPacket (/Users/mmo/Developer/pausly/webapp/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:764:9)
    at Socket.readFromStdout (/Users/mmo/Developer/pausly/webapp/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:680:7)
    at Socket.emit (node:events:514:28)
    at Socket.emit (node:domain:488:12)
 ELIFECYCLE  Command failed with exit code 1.

Lms24 commented 6 months ago

Hi @enyo thanks for writing in!

A couple of questions:

What adapter are you using?
Is your SvelteKit app somehow configured in a special way? For instance only for static site generation or something along these lines?
Are you able to provide a minimal reproduction for this? I can't yet reproduce this on my end.

enyo commented 6 months ago

Im using the Vercel adapter.
Nothing special, though I have some routes that are prebuilt and some that aren't.
I'll try to build something

enyo commented 6 months ago

@Lms24 I've isolated the issue, and it's due to rendering on the edge with Vercel.

Setup a SvelteKit project with npm create svelte@latest my-app
Add vercel adapter with pnpm add -D @sveltejs/adapter-vercel
Change the adapter to @sveltejs/adapter-vercel in svelte.config.js
Install Sentry
Add a src/routes/+page.js file with this content:
```
export const config = {
    runtime: 'edge'
};
```

Now building fails with the above error message.

enyo commented 6 months ago

~~I found the solution for this~~:

export const config = {
  runtime: 'edge',
  external: ['@sentry/sveltekit'],
};

enyo commented 6 months ago

~~@Lms24 maybe this could be added to the docs?~~

enyo commented 6 months ago

Ah... of course this doesn't work. This does the opposite of what I thought it would do, and doesn't include the package at all, so of course this will work in the build, but fail when trying to deploy.

Lms24 commented 6 months ago

Hi @enyo thanks for writing in! I'm fairly certain the build error originates because you're using Vercel's edge runtime. Unfortunately, at this time, our SvelteKit SDK is not compatible with Vercel's edge runtime (as stated in our docs). Edge runtime support is being tracked in https://github.com/getsentry/sentry-javascript/issues/9107. We're currently focussing all our efforts on shipping the next major version of the JS SDKs but it's likely that we'll edge support soon afterwards.

Lms24 commented 6 months ago

I'm going to close this issue because in essence I believe it's a duplicate of #9107. Please feel free to ping me if you think this should be reopened.

enyo commented 6 months ago

I see @Lms24 . Is there a way I can disable sentry for edge functions? I just have a few routes that use edge, and I can't use sentry at all because of this issue.

Lms24 commented 6 months ago

Hmm this is unfortunately a bit tricky because you somehow need to conditionally decide if the Sentry import and code in hooks.server.ts should be present, depending on if what you're building is for the edge function or not.

This is generally one of the tricky parts to solve for edge support: When do we inject our Node SDK and when the (potential) Edge SDK. I also haven't looked much into the vercel adapter how they actually build stuff for edge vs serverless.

What you can try to do (actually, I'd be really interested in the results) is create a vite plugin that loads a dummy file instead of the actual one. But again, you need a way to find out if Sentry should be added or not. That's the challenge you (and we eventually) need to solve.

TheRedSpy15 commented 5 months ago

This error also happens when deploying to Cloudflare's Pages. For very likely similar reasons

filipwiniarski commented 1 month ago

The same happens for Netlify with the edge option turned on

getsentry / sentry-javascript