feat(svelte): Add Svelte 5 support (#11807)

Update our Svelte and SvelteKit SDKs to support Svelte 5

Concrete changes and adjustments:

- Removed `current_component` import from Svelte SDK `trackComponent`
function, due to the export no longer being available in Svelte 5
- Added a dummy/no-op `trackComponent` utility to the Server-side of the
SvelteKit SDK. Component tracking doesn't make much sense in SSR but
only in client-side hydration and subsequent navigations. With this
change, users can now manually call `trackComponent` within their
pages/components.
- Adjusted peer dependencies in the Svelte SDK to permit `svelte@5.x`
whenever it's released. I don't think we should add the preview versions
here but happy to change/remove for now if reviewers prefer.
- Added SvelteKit 2 + Svelte 5 E2E test app with latest preview release
with all the tests from the older SvelteKit E2E test apps. Also added a
test for manual component tracking and backported it to the other
Sveltekit E2E tests

Author: Lms24

.github/workflows/build.yml

@@ -1008,6 +1008,7 @@ jobs:
             'standard-frontend-react',
             'sveltekit',
             'sveltekit-2',
+            'sveltekit-2-svelte-5',
             'generic-ts3.8',
             'node-fastify-app',
             # TODO(v8): Re-enable hapi tests

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/.npmrc

@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/README.md

@@ -0,0 +1,41 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by
+[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
+development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
+> environment.

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "sveltekit-2-svelte-5",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "proxy": "node start-event-proxy.cjs",
+        "clean": "npx rimraf node_modules,pnpm-lock.yaml",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "test:prod": "TEST_ENV=production playwright test",
+        "test:build": "pnpm install && npx playwright install && pnpm build",
+        "test:assert": "pnpm test:prod"
+    },
+    "dependencies": {
+        "@sentry/sveltekit": "latest || *",
+        "@spotlightjs/spotlight": "2.0.0-alpha.1"
+    },
+    "devDependencies": {
+        "@playwright/test": "^1.36.2",
+        "@sentry-internal/event-proxy-server": "link:../../../event-proxy-server",
+        "@sentry/types": "latest || *",
+        "@sentry/utils": "latest || *",
+        "@sveltejs/adapter-auto": "^3.0.0",
+        "@sveltejs/kit": "^2.0.0",
+        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "svelte": "^5.0.0-next.115",
+        "svelte-check": "^3.6.0",
+        "ts-node": "10.9.1",
+        "tslib": "^2.4.1",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.3",
+        "wait-port": "1.0.4"
+    },
+    "type": "module"
+}

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/playwright.config.ts

@@ -0,0 +1,77 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+// Fix urls not resolving to localhost on Node v17+
+// See: https://github.com/axios/axios/issues/3821#issuecomment-1413727575
+import { setDefaultResultOrder } from 'dns';
+setDefaultResultOrder('ipv4first');
+
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+  throw new Error('No test env defined');
+}
+
+const svelteKitPort = 3030;
+const eventProxyPort = 3031;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './test',
+  /* Maximum time one test can run for. */
+  timeout: 150_000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 10000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  workers: 1,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* `next dev` is incredibly buggy with the app dir */
+  retries: testEnv === 'development' ? 3 : 0,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'list',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: `http://localhost:${svelteKitPort}`,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: [
+    {
+      command: 'node start-event-proxy.cjs',
+      port: eventProxyPort,
+      reuseExistingServer: false,
+    },
+    {
+      command: `pnpm wait-port ${eventProxyPort} && pnpm preview --port ${svelteKitPort}`,
+      port: svelteKitPort,
+      reuseExistingServer: false,
+    },
+  ],
+};
+
+export default config;

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/hooks.client.ts

@@ -0,0 +1,23 @@
+import { env } from '$env/dynamic/public';
+import * as Sentry from '@sentry/sveltekit';
+import * as Spotlight from '@spotlightjs/spotlight';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: env.PUBLIC_E2E_TEST_DSN,
+  debug: true,
+  tunnel: `http://localhost:3031/`, // proxy server
+  tracesSampleRate: 1.0,
+});
+
+const myErrorHandler = ({ error, event }: any) => {
+  console.error('An error occurred on the client side:', error, event);
+};
+
+export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);
+
+if (import.meta.env.DEV) {
+  Spotlight.init({
+    injectImmediately: true,
+  });
+}

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/hooks.server.ts

@@ -0,0 +1,21 @@
+import { E2E_TEST_DSN } from '$env/static/private';
+import * as Sentry from '@sentry/sveltekit';
+import { setupSidecar } from '@spotlightjs/spotlight/sidecar';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: E2E_TEST_DSN,
+  debug: true,
+  tunnel: `http://localhost:3031/`, // proxy server
+  tracesSampleRate: 1.0,
+  spotlight: import.meta.env.DEV,
+});
+
+// not logging anything to console to avoid noise in the test output
+export const handleError = Sentry.handleErrorWithSentry(() => {});
+
+export const handle = Sentry.sentryHandle();
+
+if (import.meta.env.DEV) {
+  setupSidecar();
+}

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/+layout.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    // Indicate that the SvelteKit app was hydrated
+    document.body.classList.add("hydrated");
+  });
+
+
+</script>
+
+<h1>Sveltekit E2E Test app</h1>
+<div data-sveltekit-preload-data="off">
+  <slot></slot>
+</div>

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/+page.svelte

@@ -0,0 +1,41 @@
+<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<ul>
+  <li>
+    <a href="/client-error">Client error</a>
+  </li>
+  <li>
+    <a href="/universal-load-error">Universal Load error</a>
+  </li>
+  <li>
+    <a href="/server-load-error">Server Load error</a>
+  </li>
+  <li>
+    <a href="/server-route-error">Server Route error</a>
+  </li>
+  <li>
+    <a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
+  </li>
+  <li>
+    <a href="/users">Route with Server Load</a>
+  </li>
+  <li>
+    <a href="/universal-load-fetch">Route with fetch in universal load</a>
+  </li>
+  <li>
+    <a id="redirectLink" href="/redirect1">Redirect</a>
+  </li>
+  <li>
+    <a href="/server-load-fetch">Route with nested fetch in server load</a>
+  </li>
+  <li>
+    <a href="/nav1">Nav 1</a>
+  </li>
+  <li>
+    <a href="/nav2">Nav 2</a>
+  </li>
+  <li>
+    <a href="components">Component Tracking</a>
+  </li>
+</ul>

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/api/users/+server.ts

@@ -0,0 +1,3 @@
+export const GET = () => {
+  return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
+};

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/building/+page.server.ts

@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types';
+
+export const load = (async _event => {
+  return { name: 'building (server)' };
+}) satisfies PageServerLoad;

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/building/+page.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import * as Sentry from '@sentry/sveltekit';
+
+  async function getSentryData() {
+    Sentry.startSpan({
+      name: 'Example Frontend Span',
+    }, async () => {
+      const res = await fetch('/sentry-example');
+      if (!res.ok) {
+        throw new Error('Sentry Example Frontend Error');
+      }
+    })
+  }
+</script>
+
+<h1>Check Build</h1>
+
+<p>
+  This route only exists to check that Typescript definitions
+  and auto instrumentation are working when the project is built.
+</p>

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/building/+page.ts

@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load = (async _event => {
+  return { name: 'building' };
+}) satisfies PageLoad;

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/client-error/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  function throwError() {
+    throw new Error('Click Error');
+  }
+</script>
+
+<h1>Client error</h1>
+
+<button on:click={throwError}>Throw error</button>

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/components/+page.svelte

@@ -0,0 +1,15 @@
+<script>
+  import * as Sentry from '@sentry/sveltekit';
+
+  import Component1 from "./Component1.svelte";
+  import Component2 from "./Component2.svelte";
+  import Component3 from "./Component3.svelte";
+
+  Sentry.trackComponent({componentName: 'components/+page'})
+
+</script>
+<h2>Demonstrating Component Tracking</h2>
+
+<Component1></Component1>
+<Component2></Component2>
+<Component3></Component3>

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/components/Component1.svelte

@@ -0,0 +1,10 @@
+<script>
+  import Component2 from "./Component2.svelte";
+  import {trackComponent} from '@sentry/sveltekit';
+
+  trackComponent({componentName: 'Component1'});
+
+</script>
+<h3>Howdy, I'm component 1</h3>
+
+<Component2></Component2>

dev-packages/e2e-tests/test-applications/sveltekit-2-svelte-5/src/routes/components/Component2.svelte

@@ -0,0 +1,9 @@
+<script>
+  import Component3 from "./Component3.svelte";
+  import {trackComponent} from '@sentry/sveltekit';
+
+  trackComponent({componentName: 'Component2'});
+</script>
+<h3>Howdy, I'm component 2</h3>
+
+<Component3></Component3>