Sentry SvelteKit Wizard fails with "config.plugins.splice is not a function"

[wtachau]

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

Framework Version

SvelteKit 1.22.3

Link to Sentry event

No response

SDK Setup

Sentry.init({
    dsn: "<DSN>",
    tracesSampleRate: 1
})

Steps to Reproduce

$ npx @sentry/wizard@latest -i sveltekit

Expected Result

For the Sentry Sveltekit library to be installed correctly

Actual Result

 npx @sentry/wizard@latest -i sveltekit
Running Sentry Wizard...
version: 3.7.1 | sentry-cli version: 1.75.2
Sentry Wizard will help you to configure your project
Thank you for using Sentry :)
Skipping connection to Sentry due files already patched

┌   Sentry SvelteKit Wizard
│
◇   ──────────────────────────────────────────────────────────────╮
│                                                                 │
│  This Wizard will help you set up Sentry for your application.  │
│  Thank you for using Sentry :)                                  │
│                                                                 │
│  Version: 3.7.1                                                 │
│                                                                 │
├─────────────────────────────────────────────────────────────────╯
│
◇  Are you using Sentry SaaS or self-hosted Sentry?
│  Sentry SaaS (sentry.io)
│
◇  Do you already have a Sentry account?
│  Yes
│
●  If the browser window didn't open automatically, please open the following link to log into Sentry:
│
│  https://sentry.io/account/settings/wizard/<account>/
│
◇  Login complete.
│
◇  Select your Sentry project.
│  nemo-iv/nemo
│
◇  The @sentry/sveltekit package is already installed. Do you want to update it to the latest version?
│  Yes
│
◇  Updated @sentry/sveltekit with yarn.
✓ Successfully added the auth token to .sentryclirc
✓ .sentryclirc added to .gitignore
✓ Successfully created sentry.properties

│
▲  File hooks.client.ts already contains Sentry code.
│  Skipping adding Sentry functionality to hooks.client.ts.
│
▲  File hooks.server.ts already contains Sentry code.
│  Skipping adding Sentry functionality to hooks.server.ts.
│
■  Error while setting up the SvelteKit SDK:
│
●  TypeError: config.plugins.splice is not a function

🎉  Successfully set up Sentry for your project 🎉

[Lms24]

Hey @wtachau can you show us how yourvite.config.js looks before running the wizard? I'm currently trying to improve the vite config step and I'm wondering if the current fix I have would also resolve your case.

Regardless, I think we should provide a good fallback mechanism as pointed out in #362 (comment).

[wtachau]

Hi @Lms24 , no problem— here's what it looked like before the wizard. There's some funkiness around setting up the plugins (some we only wanted in prod, others only in dev) so I imagine that could be causing the issue.

import { sentryVitePlugin } from '@sentry/vite-plugin';
import { sveltekit } from '@sveltejs/kit/vite';
import { nodeLoaderPlugin } from '@vavite/node-loader/plugin';
import { configDefaults, defineConfig } from 'vitest/config';

const isProductionBuild = process.env.VERCEL_ENV == 'production';

let plugins = [sveltekit()];
if (isProductionBuild) {
  plugins.push(
    sentryVitePlugin({
      silent: !process.env.VERCEL_ENV,
      // Specify the directory containing build artifacts
      sourcemaps: {
        assets: '.svelte-kit/output/client',
      },

      authToken: process.env.SENTRY_AUTH_TOKEN,

      dryRun: !isProductionBuild,
    }),
  );
} else {
  plugins = [nodeLoaderPlugin(), ...plugins];
}

export default defineConfig({
  server: {
    port: parseInt(process.env.PORT || '') || 3000,
  },
  optimizeDeps: {
    include: [],
  },
  esbuild: { },
  preview: {
    port: parseInt(process.env.PREVIEW_PORT || '') || 3001,
  },
  plugins,
  build: {
    sourcemap: true,
  },
  test: {
    exclude: [...configDefaults.exclude, 'playwright'],
    deps: { inline: ['@sveltejs/kit'] },
    globals: true,
    threads: false,
    setupFiles: ['unit_testing/helpers/setup.ts'],
  },
});

[Lms24]

Thanks! Yes you're right, this we won't be able to automatically modify as there are just too many possibilities how to define configs or plugins. We can only cover basic configa. But we'll make sure to provide good copy/paste snippets in the wizard directly as a fallback.

[wtachau]

Makes sense, having good fallbacks seems reasonable to me 😁. As an aside, is there a better way to only use Sentry in non-development environments (to prevent this conditional plugin assignment)? I didn't see anything obvious in the docs.

[Lms24]

@wtachau I just noticed you're directly using our general @sentry/vite-plugin instead of the sentrySvelteKit plugin that ships with @sentry/sveltekit. Is there a reason for that? (iirc we already had some conversations around this but I can't recall where/when, so sorry if I already asked that once)

Just to clarify, the -i sveltekit wizard will add sentrySvelteKit, not our general vite plugin.

The other reason I'm asking is because the source maps upload part of sentrySvelteKit is already configured to only run at build time and not in dev mode. However, we're not checking the VERCEL_ENV variable for that but only NODE_ENV and the vite command.

You can use these two options to disable the sentrySvelteKit functionality based on whatever condition you want:

For example:

export default defineConfig({
  plugins: [
    sentrySvelteKit({
      autoUploadSourceMaps: process.env.VERCEL_ENV == 'production',
      autoInstrument: process.env.VERCEL_ENV == 'production',
    })
  ]
})

[wtachau]

@Lms24 The above was our vite config at the time of using the wizard— we're now updated to use sentrySvelteKit!

Thanks for the clarification about configuring the plugins.

Is there any similar recommended config for what to do in hooks.server.ts? I've got some code that looks like

const handlers: Handle[] = [rootHandlerFunc];
if (shouldEnableSentry) { // = is production
  handlers.unshift(Sentry.sentryHandle());
}

export const handle: Handle = sequence(...handlers);

but I'm wondering if there's a simpler way.

Thanks for all the help!

[Lms24]

Is there any similar recommended config for what to do in hooks.server.ts?

Not directly but I'd recommend to just set the sample rates or the enabled flag in Sentry.init config according to the environment you're in. If the SDK is disabled/has sample rates of 0, the sentryHandle won't do anything so it should be fine to just always have it running.

[wtachau]

Makes sense, thanks Lukas!