test(e2e): Add tests to SvelteKit 2.x E2E test app (#9944)

Add proper e2e tests to our Sveltekit 2.x test application. 

1. Distributed pageload trace - important for browserTracing rework
2. Distributed navigation trace - important for browserTracing rework
3. Client side component error
4. Client side universal load error
5. Server side universal load error
6. Server side server load error
7. Server route/API error

Author: Lms24

dev-packages/e2e-tests/test-applications/sveltekit-2/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, SerializedEvent } from '@sentry/types';
 import { parseEnvelope } from '@sentry/utils';
 
 const readFile = util.promisify(fs.readFile);
@@ -210,13 +210,13 @@ export function waitForEnvelopeItem(
 
 export function waitForError(
   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 === 'event' && (await callback(envelopeItemBody as Event))) {
-        resolve(envelopeItemBody as Event);
+      if (envelopeItemHeader.type === 'event' && (await callback(envelopeItemBody as SerializedEvent))) {
+        resolve(envelopeItemBody as SerializedEvent);
         return true;
       }
       return false;
@@ -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;
@@ -247,7 +247,7 @@ async function registerCallbackServerPort(serverName: string, port: string): Pro
   await writeFile(tmpFilePath, port, { encoding: 'utf8' });
 }
 
-async function retrieveCallbackServerPort(serverName: string): Promise<string> {
+function retrieveCallbackServerPort(serverName: string): Promise<string> {
   const tmpFilePath = path.join(os.tmpdir(), `${TEMP_FILE_PREFIX}${serverName}`);
-  return await readFile(tmpFilePath, 'utf8');
+  return readFile(tmpFilePath, 'utf8');
 }

dev-packages/e2e-tests/test-applications/sveltekit-2/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.36.2",
     "@sentry/types": "latest || *",
     "@sentry/utils": "latest || *",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-node": "^2.0.0",
-    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/kit": "^2.5.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.0",

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

@@ -1,13 +1,19 @@
 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 port = 3030;
+const svelteKitPort = 3030;
+const eventProxyPort = 3031;
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -24,7 +30,8 @@ const config: PlaywrightTestConfig = {
     timeout: 10000,
   },
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  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 */
@@ -36,7 +43,7 @@ const config: PlaywrightTestConfig = {
     /* 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:${port}`,
+    baseURL: `http://localhost:${svelteKitPort}`,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -55,15 +62,17 @@ const config: PlaywrightTestConfig = {
   /* Run your local dev server before starting the tests */
   webServer: [
     {
-      command: 'pnpm ts-node --esm start-event-proxy.ts',
-      port: 3031,
+      command: 'pnpm ts-node-script start-event-proxy.ts',
+      port: eventProxyPort,
+      reuseExistingServer: false,
     },
     {
       command:
         testEnv === 'development'
-          ? `pnpm wait-port ${port} && pnpm dev --port ${port}`
-          : `pnpm wait-port ${port} && pnpm preview --port ${port}`,
-      port,
+          ? `pnpm wait-port ${eventProxyPort} && pnpm dev --port ${svelteKitPort}`
+          : `pnpm wait-port ${eventProxyPort} && PORT=${svelteKitPort} node build`,
+      port: svelteKitPort,
+      reuseExistingServer: false,
     },
   ],
 };

dev-packages/e2e-tests/test-applications/sveltekit-2/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>

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

@@ -9,10 +9,7 @@ Sentry.init({
   tracesSampleRate: 1.0,
 });
 
-const myErrorHandler = ({ error, event }: any) => {
-  console.error('An error occurred on the server side:', error, event);
-};
-
-export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);
+// not logging anything to console to avoid noise in the test output
+export const handleError = Sentry.handleErrorWithSentry(() => {});
 
 export const handle = Sentry.sentryHandle();

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

@@ -0,0 +1,13 @@
+<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/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>

dev-packages/e2e-tests/test-applications/sveltekit-2/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/src/routes/building/+page.svelte

@@ -1,3 +1,18 @@
+<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>

dev-packages/e2e-tests/test-applications/sveltekit-2/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/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',
+  };
+};

dev-packages/e2e-tests/test-applications/sveltekit-2/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>

dev-packages/e2e-tests/test-applications/sveltekit-2/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>

dev-packages/e2e-tests/test-applications/sveltekit-2/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,
+  };
+};

dev-packages/e2e-tests/test-applications/sveltekit-2/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',
+  };
+};

dev-packages/e2e-tests/test-applications/sveltekit-2/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>

dev-packages/e2e-tests/test-applications/sveltekit-2/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',
+  };
+};

dev-packages/e2e-tests/test-applications/sveltekit-2/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>

dev-packages/e2e-tests/test-applications/sveltekit-2/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 };
+};

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

@@ -0,0 +1,5 @@
+export const load = async () => {
+  return {
+    msg: 'Hi everyone!',
+  };
+};

dev-packages/e2e-tests/test-applications/sveltekit-2/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>

dev-packages/e2e-tests/test-applications/sveltekit-2/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}`,
+  };
+};

dev-packages/e2e-tests/test-applications/sveltekit-2/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>