Skip to content

Commit be238d4

Browse files
SG60Lms24
SG60
authored and
Lms24
committed
test(sveltekit-cloudflare-pages): add an e2e test for @sentry/sveltekit on cloudflare pages
Seems to have an issue with wrangler hanging during the playwright test though.
1 parent 551af85 commit be238d4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1258
-0
lines changed

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/.gitignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/.wrangler
6+
/package
7+
.env
8+
.env.*
9+
!.env.example
10+
vite.config.js.timestamp-*
11+
vite.config.ts.timestamp-*

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/.npmrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@sentry:registry=http://127.0.0.1:4873
2+
@sentry-internal:registry=http://127.0.0.1:4873

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# create-svelte
2+
3+
Everything you need to build a Svelte project, powered by
4+
[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
5+
6+
## Creating a project
7+
8+
If you're seeing this, you've probably already done this step. Congrats!
9+
10+
```bash
11+
# create a new project in the current directory
12+
npm create svelte@latest
13+
14+
# create a new project in my-app
15+
npm create svelte@latest my-app
16+
```
17+
18+
## Developing
19+
20+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
21+
development server:
22+
23+
```bash
24+
npm run dev
25+
26+
# or start the server and open the app in a new browser tab
27+
npm run dev -- --open
28+
```
29+
30+
## Building
31+
32+
To create a production version of your app:
33+
34+
```bash
35+
npm run build
36+
```
37+
38+
You can preview the production build with `npm run preview`.
39+
40+
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
41+
> environment.

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "sveltekit-cloudflare-pages",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"proxy": "node start-event-proxy.mjs",
10+
"clean": "npx rimraf node_modules pnpm-lock.yaml",
11+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
13+
"test:prod": "TEST_ENV=production playwright test",
14+
"test:build": "pnpm install && pnpm build",
15+
"test:assert": "pnpm test:prod"
16+
},
17+
"dependencies": {
18+
"@sentry/sveltekit": "latest || *",
19+
"@spotlightjs/spotlight": "2.0.0-alpha.1"
20+
},
21+
"devDependencies": {
22+
"@playwright/test": "^1.44.1",
23+
"@sentry-internal/test-utils": "link:../../../test-utils",
24+
"@sentry/core": "latest || *",
25+
"@sveltejs/adapter-cloudflare": "^4.0.0",
26+
"@sveltejs/kit": "^2.0.0",
27+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
28+
"svelte": "^5.0.0",
29+
"svelte-check": "^3.6.0",
30+
"tslib": "^2.4.1",
31+
"typescript": "^5.0.0",
32+
"vite": "^5.4.10",
33+
"wrangler": "^3.95.0"
34+
},
35+
"type": "module"
36+
}

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/playwright.config.mjs

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { getPlaywrightConfig } from '@sentry-internal/test-utils';
2+
3+
const config = getPlaywrightConfig({
4+
startCommand: 'pnpm wrangler pages dev --port 3030 .svelte-kit/cloudflare',
5+
port: 3030,
6+
});
7+
8+
export default config;

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/app.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// See https://kit.svelte.dev/docs/types#app
2+
// for information about these interfaces
3+
declare global {
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface PageState {}
9+
// interface Platform {}
10+
}
11+
}
12+
13+
export {};

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/app.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover">
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
12+
</html>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/hooks.client.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { env } from '$env/dynamic/public';
2+
import * as Sentry from '@sentry/sveltekit';
3+
import * as Spotlight from '@spotlightjs/spotlight';
4+
5+
Sentry.init({
6+
environment: 'qa', // dynamic sampling bias to keep transactions
7+
dsn: env.PUBLIC_E2E_TEST_DSN,
8+
debug: !!env.PUBLIC_DEBUG,
9+
tunnel: `http://localhost:3031/`, // proxy server
10+
tracesSampleRate: 1.0,
11+
});
12+
13+
const myErrorHandler = ({ error, event }: any) => {
14+
console.error('An error occurred on the client side:', error, event);
15+
};
16+
17+
export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);
18+
19+
if (import.meta.env.DEV) {
20+
Spotlight.init({
21+
injectImmediately: true,
22+
});
23+
}

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/hooks.server.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { E2E_TEST_DSN } from '$env/static/private';
2+
import * as Sentry from '@sentry/sveltekit';
3+
import { sequence } from '@sveltejs/kit/hooks';
4+
5+
// not logging anything to console to avoid noise in the test output
6+
export const handleError = Sentry.handleErrorWithSentry(() => { });
7+
8+
export const handle = sequence(
9+
Sentry.initCloudflareSentryHandle({
10+
environment: 'qa', // dynamic sampling bias to keep transactions
11+
dsn: E2E_TEST_DSN,
12+
debug: !!process.env.DEBUG,
13+
tunnel: `http://localhost:3031/`, // proxy server
14+
tracesSampleRate: 1.0,
15+
}),
16+
Sentry.sentryHandle(),
17+
);

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/+layout.svelte

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import { onMount } from "svelte";
3+
4+
onMount(() => {
5+
// Indicate that the SvelteKit app was hydrated
6+
document.body.classList.add("hydrated");
7+
});
8+
9+
10+
</script>
11+
12+
<h1>Sveltekit E2E Test app</h1>
13+
<div data-sveltekit-preload-data="off">
14+
<slot></slot>
15+
</div>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/+page.svelte

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<h1>Welcome to SvelteKit 2 with Svelte 5!</h1>
2+
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
3+
4+
<ul>
5+
<li>
6+
<a href="/client-error">Client error</a>
7+
</li>
8+
<li>
9+
<a href="/universal-load-error">Universal Load error</a>
10+
</li>
11+
<li>
12+
<a href="/server-load-error">Server Load error</a>
13+
</li>
14+
<li>
15+
<a href="/server-route-error">Server Route error</a>
16+
</li>
17+
<li>
18+
<a id="routeWithParamsLink" href="/users/123abc">Route with Params</a>
19+
</li>
20+
<li>
21+
<a href="/users">Route with Server Load</a>
22+
</li>
23+
<li>
24+
<a href="/universal-load-fetch">Route with fetch in universal load</a>
25+
</li>
26+
<li>
27+
<a id="redirectLink" href="/redirect1">Redirect</a>
28+
</li>
29+
<li>
30+
<a href="/server-load-fetch">Route with nested fetch in server load</a>
31+
</li>
32+
<li>
33+
<a href="/nav1">Nav 1</a>
34+
</li>
35+
<li>
36+
<a href="/nav2">Nav 2</a>
37+
</li>
38+
<li>
39+
<a href="components">Component Tracking</a>
40+
</li>
41+
</ul>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/api/users/+server.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const GET = () => {
2+
return new Response(JSON.stringify({ users: ['alice', 'bob', 'carol'] }));
3+
};

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/building/+page.server.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import type { PageServerLoad } from './$types';
2+
3+
export const load = (async _event => {
4+
return { name: 'building (server)' };
5+
}) satisfies PageServerLoad;

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/building/+page.svelte

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import * as Sentry from '@sentry/sveltekit';
3+
4+
async function getSentryData() {
5+
Sentry.startSpan({
6+
name: 'Example Frontend Span',
7+
}, async () => {
8+
const res = await fetch('/sentry-example');
9+
if (!res.ok) {
10+
throw new Error('Sentry Example Frontend Error');
11+
}
12+
})
13+
}
14+
</script>
15+
16+
<h1>Check Build</h1>
17+
18+
<p>
19+
This route only exists to check that Typescript definitions
20+
and auto instrumentation are working when the project is built.
21+
</p>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/building/+page.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import type { PageLoad } from './$types';
2+
3+
export const load = (async _event => {
4+
return { name: 'building' };
5+
}) satisfies PageLoad;

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/client-error/+page.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
function throwError() {
3+
throw new Error('Click Error');
4+
}
5+
</script>
6+
7+
<h1>Client error</h1>
8+
9+
<button on:click={throwError}>Throw error</button>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/components/+page.svelte

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script>
2+
import * as Sentry from '@sentry/sveltekit';
3+
4+
import Component1 from "./Component1.svelte";
5+
import Component2 from "./Component2.svelte";
6+
import Component3 from "./Component3.svelte";
7+
8+
Sentry.trackComponent({componentName: 'components/+page'})
9+
10+
</script>
11+
<h2>Demonstrating Component Tracking</h2>
12+
13+
<Component1></Component1>
14+
<Component2></Component2>
15+
<Component3></Component3>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/components/Component1.svelte

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
import Component2 from "./Component2.svelte";
3+
import {trackComponent} from '@sentry/sveltekit';
4+
5+
trackComponent({componentName: 'Component1'});
6+
7+
</script>
8+
<h3>Howdy, I'm component 1</h3>
9+
10+
<Component2></Component2>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/components/Component2.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script>
2+
import Component3 from "./Component3.svelte";
3+
import {trackComponent} from '@sentry/sveltekit';
4+
5+
trackComponent({componentName: 'Component2'});
6+
</script>
7+
<h3>Howdy, I'm component 2</h3>
8+
9+
<Component3></Component3>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/components/Component3.svelte

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<script lang="ts">
2+
import * as Sentry from '@sentry/sveltekit';
3+
Sentry.trackComponent({componentName: 'Component3'});
4+
</script>
5+
6+
<h3>Howdy, I'm component 3</h3>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/nav1/+page.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h1>Navigation 1</h1>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/nav2/+page.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h1>Navigation 2</h1>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/redirect1/+page.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { redirect } from '@sveltejs/kit';
2+
3+
export const load = async () => {
4+
redirect(301, '/redirect2');
5+
};

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/redirect2/+page.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { redirect } from '@sveltejs/kit';
2+
3+
export const load = async () => {
4+
redirect(301, '/users/789');
5+
};

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/server-load-error/+page.server.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const load = async () => {
2+
throw new Error('Server Load Error');
3+
return {
4+
msg: 'Hello World',
5+
};
6+
};

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/server-load-error/+page.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
export let data
3+
</script>
4+
5+
<h1>Server load error</h1>
6+
7+
<p>
8+
Message: {data.msg}
9+
</p>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/server-load-fetch/+page.server.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const load = async ({ fetch }) => {
2+
const res = await fetch('/api/users');
3+
const data = await res.json();
4+
return { data };
5+
};

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/server-load-fetch/+page.svelte

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script lang="ts">
2+
export let data;
3+
</script>
4+
5+
<main>
6+
<h1>Server Load Fetch</h1>
7+
<p>{JSON.stringify(data, null, 2)}</p>
8+
</main>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/server-route-error/+page.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
export let data;
3+
</script>
4+
5+
<h1>Server Route error</h1>
6+
7+
<p>
8+
Message: {data.msg}
9+
</p>

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/server-route-error/+page.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const load = async ({ fetch }) => {
2+
const res = await fetch('/server-route-error');
3+
const data = await res.json();
4+
return {
5+
msg: data,
6+
};
7+
};

‎dev-packages/e2e-tests/test-applications/sveltekit-cloudflare-pages/src/routes/server-route-error/+server.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const GET = async () => {
2+
throw new Error('Server Route Error');
3+
return {
4+
msg: 'Hello World',
5+
};
6+
};

0 commit comments

Comments
 (0)