getsentry · Lms24 · Jan 31, 2024 · Jan 31, 2024
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/event-proxy-server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/event-proxy-server.ts
@@ -6,7 +6,7 @@ import * as os from 'os';
 import * as path from 'path';
 import * as util from 'util';
 import * as zlib from 'zlib';
-import type { Envelope, EnvelopeItem, Event } from '@sentry/types';
+import type { Envelope, EnvelopeItem, Event, SerializedEvent } from '@sentry/types';
 import { parseEnvelope } from '@sentry/utils';
 
 const readFile = util.promisify(fs.readFile);
@@ -226,13 +226,13 @@ export function waitForError(
 
 export function waitForTransaction(
  proxyServerName: string,
- callback: (transactionEvent: Event) => Promise<boolean> | boolean,
-): Promise<Event> {
+ callback: (transactionEvent: SerializedEvent) => Promise<boolean> | boolean,
+): Promise<SerializedEvent> {
  return new Promise((resolve, reject) => {
  waitForEnvelopeItem(proxyServerName, async envelopeItem => {
  const [envelopeItemHeader, envelopeItemBody] = envelopeItem;
- if (envelopeItemHeader.type === 'transaction' && (await callback(envelopeItemBody as Event))) {
- resolve(envelopeItemBody as Event);
+ if (envelopeItemHeader.type === 'transaction' && (await callback(envelopeItemBody as SerializedEvent))) {
+ resolve(envelopeItemBody as SerializedEvent);
  return true;
  }
  return false;

diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/package.json b/dev-packages/e2e-tests/test-applications/sveltekit/package.json
@@ -10,20 +10,19 @@
  "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:dev": "TEST_ENV=development playwright test",
- "test:build": "pnpm install && pnpm build",
- "test:assert": "pnpm -v"
+ "test:build": "pnpm install && npx playwright install && pnpm build",
+ "test:assert": "pnpm test:prod"
  },
  "dependencies": {
  "@sentry/sveltekit": "latest || *"
  },
  "devDependencies": {
- "@playwright/test": "^1.27.1",
+ "@playwright/test": "^1.41.1",
  "@sentry/types": "latest || *",
  "@sentry/utils": "latest || *",
  "@sveltejs/adapter-auto": "^2.0.0",
  "@sveltejs/adapter-node": "^1.2.4",
- "@sveltejs/kit": "^1.5.0",
+ "@sveltejs/kit": "^1.30.3",
  "svelte": "^3.54.0",
  "svelte-check": "^3.0.1",
  "ts-node": "10.9.1",

diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/playwright.config.ts b/dev-packages/e2e-tests/test-applications/sveltekit/playwright.config.ts
@@ -8,6 +8,7 @@ if (!testEnv) {
 }
 
 const port = 3030;
+const eventProxyPort = 3031;
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -23,8 +24,9 @@ const config: PlaywrightTestConfig = {
  */
  timeout: 10000,
  },
+ workers: 1,
  /* Run tests in files in parallel */
- fullyParallel: true,
+ fullyParallel: false,
  /* 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 */
@@ -61,8 +63,8 @@ const config: PlaywrightTestConfig = {
  {
  command:
  testEnv === 'development'
- ? `pnpm wait-port ${port} && pnpm dev --port ${port}`
- : `pnpm wait-port ${port} && pnpm preview --port ${port}`,
+ ? `pnpm wait-port ${eventProxyPort} && pnpm dev --port ${port}`
+ : `pnpm wait-port ${eventProxyPort} && pnpm preview --port ${port}`,
  port,
  },
  ],

diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/app.html b/dev-packages/e2e-tests/test-applications/sveltekit/src/app.html
@@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width" />
  %sveltekit.head%
  </head>
- <body data-sveltekit-preload-data="hover">
+ <body data-sveltekit-preload-data="off">
  <div style="display: contents">%sveltekit.body%</div>
  </body>
 </html>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/hooks.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/hooks.server.ts
@@ -9,9 +9,8 @@ Sentry.init({
  tracesSampleRate: 1.0,
 });
 
-const myErrorHandler = ({ error, event }: any) => {
- console.error('An error occurred on the server side:', error, event);
-};
+// not logging anything to console to avoid noise in the test output
+const myErrorHandler = ({ error, event }: any) => {};
 
 export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);
 

diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/+layout.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/+layout.svelte
@@ -0,0 +1,10 @@
+<script lang="typescript">
+ import { onMount } from 'svelte';
+
+ onMount(() => {
+ // Indicate that the SvelteKit app was hydrated
+ document.body.classList.add('hydrated');
+ });
+</script>
+
+<slot />
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/+page.svelte
@@ -1,2 +1,26 @@
 <h1>Welcome to SvelteKit</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 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>
+</ul>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/api/users/+server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/api/users/+server.ts
@@ -0,0 +1,3 @@
+export const GET = () => {
+ return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/client-error/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/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>
diff --git a/...ckages/e2e-tests/test-applications/sveltekit/src/routes/server-load-error/+page.server.ts b/...ckages/e2e-tests/test-applications/sveltekit/src/routes/server-load-error/+page.server.ts
@@ -0,0 +1,6 @@
+export const load = async () => {
+ throw new Error('Server Load Error');
+ return {
+ msg: 'Hello World',
+ };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-load-error/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-load-error/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+ export let data
+</script>
+
+<h1>Server load error</h1>
+
+<p>
+ Message: {data.msg}
+</p>
diff --git a/...packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+page.svelte b/...packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+ export let data;
+</script>
+
+<h1>Server Route error</h1>
+
+<p>
+ Message: {data.msg}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+page.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+page.ts
@@ -0,0 +1,7 @@
+export const load = async ({ fetch }) => {
+ const res = await fetch('/server-route-error');
+ const data = await res.json();
+ return {
+ msg: data,
+ };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/server-route-error/+server.ts
@@ -0,0 +1,6 @@
+export const GET = async () => {
+ throw new Error('Server Route Error');
+ return {
+ msg: 'Hello World',
+ };
+};
diff --git a/...ckages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-error/+page.svelte b/...ckages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-error/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+ export let data
+</script>
+
+<h1>Universal load error</h1>
+
+<p>
+ To trigger from client: Load on another route, then navigate to this route.
+</p>
+
+<p>
+ To trigger from server: Load on this route
+</p>
+
+<p>
+ Message: {data.msg}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-error/+page.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-error/+page.ts
@@ -0,0 +1,8 @@
+import { browser } from '$app/environment';
+
+export const load = async () => {
+ throw new Error(`Universal Load Error (${browser ? 'browser' : 'server'})`);
+ return {
+ msg: 'Hello World',
+ };
+};
diff --git a/...ckages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-fetch/+page.svelte b/...ckages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-fetch/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+ export let data;
+ console.log(data);
+</script>
+
+<h2>Fetching in universal load</h2>
+
+<p>Here's a list of a few users:</p>
+
+<ul>
+ {#each data.users as user}
+ <li>{user}</li>
+ {/each}
+</ul>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-fetch/+page.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/universal-load-fetch/+page.ts
@@ -0,0 +1,5 @@
+export const load = async ({ fetch }) => {
+ const usersRes = await fetch('/api/users');
+ const data = await usersRes.json();
+ return { users: data.users };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/+page.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/+page.server.ts
@@ -0,0 +1,5 @@
+export const load = async () => {
+ return {
+ msg: 'Hi everyone!',
+ };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+ export let data;
+</script>
+<h2>
+ All Users:
+</h2>
+
+<p>
+ message: {data.msg}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/[id]/+page.server.ts b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/[id]/+page.server.ts
@@ -0,0 +1,5 @@
+export const load = async ({ params }) => {
+ return {
+ msg: `This is a special message for user ${params.id}`,
+ };
+};
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/[id]/+page.svelte b/dev-packages/e2e-tests/test-applications/sveltekit/src/routes/users/[id]/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+import { page } from '$app/stores';
+export let data;
+</script>
+
+<h1>Route with dynamic params</h1>
+
+<p>
+ User id: {$page.params.id}
+</p>
+
+<p>
+ Secret message for user: {data.msg}
+</p>
diff --git a/dev-packages/e2e-tests/test-applications/sveltekit/test/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/sveltekit/test/errors.client.test.ts
@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '../event-proxy-server';
+import { waitForInitialPageload } from '../utils';
+
+test.describe('client-side errors', () => {
+ test('captures error thrown on click', async ({ page }) => {
+ await page.goto('/client-error');
+
+ await expect(page.getByText('Client error')).toBeVisible();
+
+ const errorEventPromise = waitForError('sveltekit', errorEvent => {
+ return errorEvent?.exception?.values?.[0]?.value === 'Click Error';
+ });
+
+ const clickPromise = page.getByText('Throw error').click();
+
+ const [errorEvent, _] = await Promise.all([errorEventPromise, clickPromise]);
+
+ const errorEventFrames = errorEvent.exception?.values?.[0]?.stacktrace?.frames;
+
+ expect(errorEventFrames?.[errorEventFrames?.length - 1]).toEqual(
+ expect.objectContaining({
+ function: expect.stringContaining('HTMLButtonElement'),
+ lineno: 1,
+ in_app: true,
+ }),
+ );
+
+ expect(errorEvent.tags).toMatchObject({ runtime: 'browser' });
+ });
+
+ test('captures universal load error', async ({ page }) => {
+ await waitForInitialPageload(page);
+ await page.reload();
+
+ const errorEventPromise = waitForError('sveltekit', errorEvent => {
+ return errorEvent?.exception?.values?.[0]?.value === 'Universal Load Error (browser)';
+ });
+
+ // navigating triggers the error on the client
+ await page.getByText('Universal Load error').click();
+
+ const errorEvent = await errorEventPromise;
+ const errorEventFrames = errorEvent.exception?.values?.[0]?.stacktrace?.frames;
+
+ expect(errorEventFrames?.[errorEventFrames?.length - 1]).toEqual(
+ expect.objectContaining({
+ lineno: 1,
+ in_app: true,
+ }),
+ );
+
+ expect(errorEvent.tags).toMatchObject({ runtime: 'browser' });
+ });
+});