fix(sveltekit): Ensure trace meta tags are always injected#13231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Lms24 merged 10 commits into from
Oct 8, 2024
Merged

fix(sveltekit): Ensure trace meta tags are always injected #13231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cb21bad
fix(sveltekit): Ensure trace meta tags are always injected
Lms24 Aug 5, 2024
ecdec58
cleanup
Lms24 Aug 5, 2024
0f6793b
add e2e test app
Lms24 Aug 9, 2024
5740af6
add e2e to build.yml
Lms24 Aug 9, 2024
39a7c41
fix rebase conflict
Lms24 Aug 14, 2024
c0f00c4
wip - still an error in backend error trace prop
Lms24 Aug 14, 2024
a5b28a6
some more wip
Lms24 Aug 14, 2024
638ad46
cleanup
Lms24 Sep 27, 2024
73eb9c4
fix unit tests after rebase
Lms24 Sep 27, 2024
9bfe1c3
one more cleanup
Lms24 Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/build.yml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -915,6 +915,7 @@ jobs:
'sveltekit',
'sveltekit-2',
'sveltekit-2-svelte-5',
'sveltekit-2-twp',
'tanstack-router',
'generic-ts3.8',
'node-fastify',
Expand Down
32 changes: 32 additions & 0 deletions ...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,38 @@ const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod';

sentryTest('error on initial page has traceId from meta tag', async ({ getLocalTestUrl, page }) => {
if (shouldSkipTracingTest()) {
sentryTest.skip();
}

const url = await getLocalTestUrl({ testDir: __dirname });
await page.goto(url);

const errorEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
page,
undefined,
eventAndTraceHeaderRequestParser,
);

await page.locator('#errorBtn').click();
const [errorEvent, errorTraceHeader] = await errorEventPromise;

expect(errorEvent.type).toEqual(undefined);
expect(errorEvent.contexts?.trace).toEqual({
trace_id: META_TAG_TRACE_ID,
parent_span_id: META_TAG_PARENT_SPAN_ID,
span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
});

expect(errorTraceHeader).toEqual({
environment: 'prod',
public_key: 'public',
release: '1.0.0',
trace_id: META_TAG_TRACE_ID,
});
});

sentryTest('error has new traceId after navigation', async ({ getLocalTestUrl, page }) => {
if (shouldSkipTracingTest()) {
sentryTest.skip();
Expand Down
10 changes: 10 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
5 changes: 5 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
# Tracing Without Performance E2E test app

E2E test app for testing Tracing Without Performance in a (SvelteKit) meta framework scenario

Add tests to this app that specifically test TwP in meta frameworks.
35 changes: 35 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
{
"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.mjs",
"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 || *"
},
"devDependencies": {
"@playwright/test": "^1.44.1",
"@sentry-internal/test-utils": "link:../../../test-utils",
"@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",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3"
},
"type": "module"
}
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: 'pnpm preview --port 3030',
port: 3030,
});

export default config;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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 {};
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
15 changes: 15 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: env.PUBLIC_E2E_TEST_DSN,
release: '1.0.0',
tunnel: `http://localhost:3031/`, // proxy server
});

const myErrorHandler = ({ error, event }: any) => {
console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import { E2E_TEST_DSN } from '$env/static/private';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: E2E_TEST_DSN,
tunnel: `http://localhost:3031/`, // proxy server
});

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = Sentry.sentryHandle();
4 changes: 4 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
<slot></slot>
</div>
8 changes: 8 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
<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="/errors">error route</a>
</li>
</ul>
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import * as Sentry from '@sentry/sveltekit';

export const load = async ({ url }) => {
if (!url.search) {
Sentry.captureException(new Error('No search query provided'));
return {
error: 'No search query provided',
};
}
return {
message: 'hi',
};
};
16 changes: 16 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
<script lang="ts">
import { onMount } from 'svelte';

export let data;

onMount(() => {
if (data.error) {
throw new Error('Client Error');
}
});
</script>

<p>
Data:
{data.message || 'nothing'}
</p>
6 changes: 6 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
port: 3031,
proxyServerName: 'sveltekit-2-twp',
});
Binary file addeddev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),

kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter(),
},
};

export default config;
75 changes: 75 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
import { expect, test } from '@playwright/test';
import { waitForError } from '@sentry-internal/test-utils';

test('errors on frontend and backend are connected by the same trace', async ({ page }) => {
const clientErrorPromise = waitForError('sveltekit-2-twp', evt => {
return evt.exception?.values?.[0].value === 'Client Error';
});

const serverErrorPromise = waitForError('sveltekit-2-twp', evt => {
return evt.exception?.values?.[0].value === 'No search query provided';
});

await page.goto('/errors');

const clientError = await clientErrorPromise;
const serverError = await serverErrorPromise;

expect(clientError).toMatchObject({
contexts: {
trace: {
parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
span_id: expect.stringMatching(/[a-f0-9]{16}/),
trace_id: expect.stringMatching(/[a-f0-9]{32}/),
},
},
environment: 'qa',
exception: {
values: [
{
mechanism: {
handled: false,
type: 'onunhandledrejection',
},
stacktrace: expect.any(Object),
type: 'Error',
value: 'Client Error',
},
],
},
level: 'error',
platform: 'javascript',
release: '1.0.0',
timestamp: expect.any(Number),
transaction: '/errors',
});

expect(serverError).toMatchObject({
contexts: {
trace: {
span_id: expect.stringMatching(/[a-f0-9]{16}/),
trace_id: expect.stringMatching(/[a-f0-9]{32}/),
},
},
environment: 'qa',
exception: {
values: [
{
mechanism: {
handled: true,
type: 'generic',
},
stacktrace: {},
},
],
},
platform: 'node',
timestamp: expect.any(Number),
transaction: 'GET /errors',
});

const clientTraceId = clientError.contexts?.trace?.trace_id;
const serverTraceId = serverError.contexts?.trace?.trace_id;

expect(clientTraceId).toBe(serverTraceId);
});
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { expect, test } from '@playwright/test';

test('Initially loaded page contains trace meta tags from backend trace', async ({ page }) => {
await page.goto('/');

const sentryTraceMetaTag = page.locator('meta[name="sentry-trace"]').first();
const sentryTraceContent = await sentryTraceMetaTag.getAttribute('content');

const baggageMetaTag = page.locator('meta[name="baggage"]').first();
const baggageContent = await baggageMetaTag.getAttribute('content');

// ensure that we do not pass a sampled -1 or -0 flag at the end:
expect(sentryTraceContent).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}$/);

expect(baggageContent?.length).toBeGreaterThan(0);

const traceId = sentryTraceContent!.split('-')[0];

expect(baggageContent).toContain('sentry-environment=qa');
expect(baggageContent).toContain(`sentry-trace_id=${traceId}`);
// ensure baggage also doesn't contain a sampled flag
expect(baggageContent).not.toContain('sentry-sampled=');
});
19 changes: 19 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
},
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}
12 changes: 12 additions & 0 deletions dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import { sentrySvelteKit } from '@sentry/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
plugins: [
sentrySvelteKit({
autoUploadSourceMaps: false,
}),
sveltekit(),
],
});
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(sveltekit): Ensure trace meta tags are always injected#13231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Lms24
merged 10 commits into

from

Oct 8, 2024
 Merged


fix(sveltekit): Ensure trace meta tags are always injected
#13231
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
cb21bad

fix(sveltekit): Ensure trace meta tags are always injected


Lms24 Aug 5, 2024
ecdec58

cleanup


Lms24 Aug 5, 2024
0f6793b

add e2e test app


Lms24 Aug 9, 2024
5740af6

add e2e to build.yml


Lms24 Aug 9, 2024
39a7c41

fix rebase conflict


Lms24 Aug 14, 2024
c0f00c4

wip - still an error in backend error trace prop


Lms24 Aug 14, 2024
a5b28a6

some more wip


Lms24 Aug 14, 2024
638ad46

cleanup


Lms24 Sep 27, 2024
73eb9c4

fix unit tests after rebase


Lms24 Sep 27, 2024
9bfe1c3

one more cleanup


Lms24 Oct 8, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.github/workflows/build.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -915,6 +915,7 @@ jobs:
 'sveltekit',
 'sveltekit-2',
 'sveltekit-2-svelte-5',
 'sveltekit-2-twp',
 'tanstack-router',
 'generic-ts3.8',
 'node-fastify',
Expand Down

32 changes: 32 additions & 0 deletions
...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,38 @@ const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
 'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod';

sentryTest('error on initial page has traceId from meta tag', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
 }

 const url = await getLocalTestUrl({ testDir: __dirname });
 await page.goto(url);

 const errorEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
 page,
 undefined,
 eventAndTraceHeaderRequestParser,
 );

 await page.locator('#errorBtn').click();
 const [errorEvent, errorTraceHeader] = await errorEventPromise;

 expect(errorEvent.type).toEqual(undefined);
 expect(errorEvent.contexts?.trace).toEqual({
 trace_id: META_TAG_TRACE_ID,
 parent_span_id: META_TAG_PARENT_SPAN_ID,
 span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
 });

 expect(errorTraceHeader).toEqual({
 environment: 'prod',
 public_key: 'public',
 release: '1.0.0',
 trace_id: META_TAG_TRACE_ID,
 });
});

sentryTest('error has new traceId after navigation', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
Expand Down

10 changes: 10 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore

View file


Open in desktop

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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc

View file


Open in desktop

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

5 changes: 5 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
# Tracing Without Performance E2E test app

E2E test app for testing Tracing Without Performance in a (SvelteKit) meta framework scenario

Add tests to this app that specifically test TwP in meta frameworks.

35 changes: 35 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
{
 "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.mjs",
 "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 || *"
 },
 "devDependencies": {
 "@playwright/test": "^1.44.1",
 "@sentry-internal/test-utils": "link:../../../test-utils",
 "@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",
 "tslib": "^2.4.1",
 "typescript": "^5.0.0",
 "vite": "^5.0.3"
 },
 "type": "module"
}

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
 startCommand: 'pnpm preview --port 3030',
 port: 3030,
});

export default config;

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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 {};

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

15 changes: 15 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: env.PUBLIC_E2E_TEST_DSN,
 release: '1.0.0',
 tunnel: `http://localhost:3031/`, // proxy server
});

const myErrorHandler = ({ error, event }: any) => {
 console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import { E2E_TEST_DSN } from '$env/static/private';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: E2E_TEST_DSN,
 tunnel: `http://localhost:3031/`, // proxy server
});

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = Sentry.sentryHandle();

4 changes: 4 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
 <slot></slot>
</div>

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
<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="/errors">error route</a>
 </li>
</ul>

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import * as Sentry from '@sentry/sveltekit';

export const load = async ({ url }) => {
 if (!url.search) {
 Sentry.captureException(new Error('No search query provided'));
 return {
 error: 'No search query provided',
 };
 }
 return {
 message: 'hi',
 };
};

16 changes: 16 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
<script lang="ts">
 import { onMount } from 'svelte';

 export let data;

 onMount(() => {
 if (data.error) {
 throw new Error('Client Error');
 }
 });
</script>

<p>
 Data:
 {data.message || 'nothing'}
</p>

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
 port: 3031,
 proxyServerName: 'sveltekit-2-twp',
});
Binary file addeddev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

18 changes: 18 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 // for more information about preprocessors
 preprocess: vitePreprocess(),

 kit: {
 // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 // See https://kit.svelte.dev/docs/adapters for more information about adapters.
 adapter: adapter(),
 },
};

export default config;

75 changes: 75 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
import { expect, test } from '@playwright/test';
import { waitForError } from '@sentry-internal/test-utils';

test('errors on frontend and backend are connected by the same trace', async ({ page }) => {
 const clientErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'Client Error';
 });

 const serverErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'No search query provided';
 });

 await page.goto('/errors');

 const clientError = await clientErrorPromise;
 const serverError = await serverErrorPromise;

 expect(clientError).toMatchObject({
 contexts: {
 trace: {
 parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: false,
 type: 'onunhandledrejection',
 },
 stacktrace: expect.any(Object),
 type: 'Error',
 value: 'Client Error',
 },
 ],
 },
 level: 'error',
 platform: 'javascript',
 release: '1.0.0',
 timestamp: expect.any(Number),
 transaction: '/errors',
 });

 expect(serverError).toMatchObject({
 contexts: {
 trace: {
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: true,
 type: 'generic',
 },
 stacktrace: {},
 },
 ],
 },
 platform: 'node',
 timestamp: expect.any(Number),
 transaction: 'GET /errors',
 });

 const clientTraceId = clientError.contexts?.trace?.trace_id;
 const serverTraceId = serverError.contexts?.trace?.trace_id;

 expect(clientTraceId).toBe(serverTraceId);
});

23 changes: 23 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { expect, test } from '@playwright/test';

test('Initially loaded page contains trace meta tags from backend trace', async ({ page }) => {
 await page.goto('/');

 const sentryTraceMetaTag = page.locator('meta[name="sentry-trace"]').first();
 const sentryTraceContent = await sentryTraceMetaTag.getAttribute('content');

 const baggageMetaTag = page.locator('meta[name="baggage"]').first();
 const baggageContent = await baggageMetaTag.getAttribute('content');

 // ensure that we do not pass a sampled -1 or -0 flag at the end:
 expect(sentryTraceContent).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}$/);

 expect(baggageContent?.length).toBeGreaterThan(0);

 const traceId = sentryTraceContent!.split('-')[0];

 expect(baggageContent).toContain('sentry-environment=qa');
 expect(baggageContent).toContain(`sentry-trace_id=${traceId}`);
 // ensure baggage also doesn't contain a sampled flag
 expect(baggageContent).not.toContain('sentry-sampled=');
});

19 changes: 19 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
 "allowJs": true,
 "checkJs": true,
 "esModuleInterop": true,
 "forceConsistentCasingInFileNames": true,
 "resolveJsonModule": true,
 "skipLibCheck": true,
 "sourceMap": true,
 "strict": true,
 "moduleResolution": "bundler"
	},
	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import { sentrySvelteKit } from '@sentry/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
 plugins: [
 sentrySvelteKit({
 autoUploadSourceMaps: false,
 }),
 sveltekit(),
 ],
});
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(sveltekit): Ensure trace meta tags are always injected#13231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Lms24
merged 10 commits into

from

Oct 8, 2024
 Merged


fix(sveltekit): Ensure trace meta tags are always injected
#13231
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
cb21bad

fix(sveltekit): Ensure trace meta tags are always injected


Lms24 Aug 5, 2024
ecdec58

cleanup


Lms24 Aug 5, 2024
0f6793b

add e2e test app


Lms24 Aug 9, 2024
5740af6

add e2e to build.yml


Lms24 Aug 9, 2024
39a7c41

fix rebase conflict


Lms24 Aug 14, 2024
c0f00c4

wip - still an error in backend error trace prop


Lms24 Aug 14, 2024
a5b28a6

some more wip


Lms24 Aug 14, 2024
638ad46

cleanup


Lms24 Sep 27, 2024
73eb9c4

fix unit tests after rebase


Lms24 Sep 27, 2024
9bfe1c3

one more cleanup


Lms24 Oct 8, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.github/workflows/build.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -915,6 +915,7 @@ jobs:
 'sveltekit',
 'sveltekit-2',
 'sveltekit-2-svelte-5',
 'sveltekit-2-twp',
 'tanstack-router',
 'generic-ts3.8',
 'node-fastify',
Expand Down

32 changes: 32 additions & 0 deletions
...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,38 @@ const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
 'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod';

sentryTest('error on initial page has traceId from meta tag', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
 }

 const url = await getLocalTestUrl({ testDir: __dirname });
 await page.goto(url);

 const errorEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
 page,
 undefined,
 eventAndTraceHeaderRequestParser,
 );

 await page.locator('#errorBtn').click();
 const [errorEvent, errorTraceHeader] = await errorEventPromise;

 expect(errorEvent.type).toEqual(undefined);
 expect(errorEvent.contexts?.trace).toEqual({
 trace_id: META_TAG_TRACE_ID,
 parent_span_id: META_TAG_PARENT_SPAN_ID,
 span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
 });

 expect(errorTraceHeader).toEqual({
 environment: 'prod',
 public_key: 'public',
 release: '1.0.0',
 trace_id: META_TAG_TRACE_ID,
 });
});

sentryTest('error has new traceId after navigation', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
Expand Down

10 changes: 10 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore

View file


Open in desktop

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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc

View file


Open in desktop

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

5 changes: 5 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
# Tracing Without Performance E2E test app

E2E test app for testing Tracing Without Performance in a (SvelteKit) meta framework scenario

Add tests to this app that specifically test TwP in meta frameworks.

35 changes: 35 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
{
 "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.mjs",
 "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 || *"
 },
 "devDependencies": {
 "@playwright/test": "^1.44.1",
 "@sentry-internal/test-utils": "link:../../../test-utils",
 "@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",
 "tslib": "^2.4.1",
 "typescript": "^5.0.0",
 "vite": "^5.0.3"
 },
 "type": "module"
}

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
 startCommand: 'pnpm preview --port 3030',
 port: 3030,
});

export default config;

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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 {};

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

15 changes: 15 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: env.PUBLIC_E2E_TEST_DSN,
 release: '1.0.0',
 tunnel: `http://localhost:3031/`, // proxy server
});

const myErrorHandler = ({ error, event }: any) => {
 console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import { E2E_TEST_DSN } from '$env/static/private';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: E2E_TEST_DSN,
 tunnel: `http://localhost:3031/`, // proxy server
});

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = Sentry.sentryHandle();

4 changes: 4 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
 <slot></slot>
</div>

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
<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="/errors">error route</a>
 </li>
</ul>

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import * as Sentry from '@sentry/sveltekit';

export const load = async ({ url }) => {
 if (!url.search) {
 Sentry.captureException(new Error('No search query provided'));
 return {
 error: 'No search query provided',
 };
 }
 return {
 message: 'hi',
 };
};

16 changes: 16 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
<script lang="ts">
 import { onMount } from 'svelte';

 export let data;

 onMount(() => {
 if (data.error) {
 throw new Error('Client Error');
 }
 });
</script>

<p>
 Data:
 {data.message || 'nothing'}
</p>

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
 port: 3031,
 proxyServerName: 'sveltekit-2-twp',
});
Binary file addeddev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

18 changes: 18 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 // for more information about preprocessors
 preprocess: vitePreprocess(),

 kit: {
 // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 // See https://kit.svelte.dev/docs/adapters for more information about adapters.
 adapter: adapter(),
 },
};

export default config;

75 changes: 75 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
import { expect, test } from '@playwright/test';
import { waitForError } from '@sentry-internal/test-utils';

test('errors on frontend and backend are connected by the same trace', async ({ page }) => {
 const clientErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'Client Error';
 });

 const serverErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'No search query provided';
 });

 await page.goto('/errors');

 const clientError = await clientErrorPromise;
 const serverError = await serverErrorPromise;

 expect(clientError).toMatchObject({
 contexts: {
 trace: {
 parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: false,
 type: 'onunhandledrejection',
 },
 stacktrace: expect.any(Object),
 type: 'Error',
 value: 'Client Error',
 },
 ],
 },
 level: 'error',
 platform: 'javascript',
 release: '1.0.0',
 timestamp: expect.any(Number),
 transaction: '/errors',
 });

 expect(serverError).toMatchObject({
 contexts: {
 trace: {
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: true,
 type: 'generic',
 },
 stacktrace: {},
 },
 ],
 },
 platform: 'node',
 timestamp: expect.any(Number),
 transaction: 'GET /errors',
 });

 const clientTraceId = clientError.contexts?.trace?.trace_id;
 const serverTraceId = serverError.contexts?.trace?.trace_id;

 expect(clientTraceId).toBe(serverTraceId);
});

23 changes: 23 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { expect, test } from '@playwright/test';

test('Initially loaded page contains trace meta tags from backend trace', async ({ page }) => {
 await page.goto('/');

 const sentryTraceMetaTag = page.locator('meta[name="sentry-trace"]').first();
 const sentryTraceContent = await sentryTraceMetaTag.getAttribute('content');

 const baggageMetaTag = page.locator('meta[name="baggage"]').first();
 const baggageContent = await baggageMetaTag.getAttribute('content');

 // ensure that we do not pass a sampled -1 or -0 flag at the end:
 expect(sentryTraceContent).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}$/);

 expect(baggageContent?.length).toBeGreaterThan(0);

 const traceId = sentryTraceContent!.split('-')[0];

 expect(baggageContent).toContain('sentry-environment=qa');
 expect(baggageContent).toContain(`sentry-trace_id=${traceId}`);
 // ensure baggage also doesn't contain a sampled flag
 expect(baggageContent).not.toContain('sentry-sampled=');
});

19 changes: 19 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
 "allowJs": true,
 "checkJs": true,
 "esModuleInterop": true,
 "forceConsistentCasingInFileNames": true,
 "resolveJsonModule": true,
 "skipLibCheck": true,
 "sourceMap": true,
 "strict": true,
 "moduleResolution": "bundler"
	},
	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import { sentrySvelteKit } from '@sentry/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
 plugins: [
 sentrySvelteKit({
 autoUploadSourceMaps: false,
 }),
 sveltekit(),
 ],
});
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(sveltekit): Ensure trace meta tags are always injected#13231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Lms24
merged 10 commits into

from

Oct 8, 2024
 Merged


fix(sveltekit): Ensure trace meta tags are always injected
#13231
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
cb21bad

fix(sveltekit): Ensure trace meta tags are always injected


Lms24 Aug 5, 2024
ecdec58

cleanup


Lms24 Aug 5, 2024
0f6793b

add e2e test app


Lms24 Aug 9, 2024
5740af6

add e2e to build.yml


Lms24 Aug 9, 2024
39a7c41

fix rebase conflict


Lms24 Aug 14, 2024
c0f00c4

wip - still an error in backend error trace prop


Lms24 Aug 14, 2024
a5b28a6

some more wip


Lms24 Aug 14, 2024
638ad46

cleanup


Lms24 Sep 27, 2024
73eb9c4

fix unit tests after rebase


Lms24 Sep 27, 2024
9bfe1c3

one more cleanup


Lms24 Oct 8, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.github/workflows/build.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -915,6 +915,7 @@ jobs:
 'sveltekit',
 'sveltekit-2',
 'sveltekit-2-svelte-5',
 'sveltekit-2-twp',
 'tanstack-router',
 'generic-ts3.8',
 'node-fastify',
Expand Down

32 changes: 32 additions & 0 deletions
...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,38 @@ const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
 'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod';

sentryTest('error on initial page has traceId from meta tag', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
 }

 const url = await getLocalTestUrl({ testDir: __dirname });
 await page.goto(url);

 const errorEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
 page,
 undefined,
 eventAndTraceHeaderRequestParser,
 );

 await page.locator('#errorBtn').click();
 const [errorEvent, errorTraceHeader] = await errorEventPromise;

 expect(errorEvent.type).toEqual(undefined);
 expect(errorEvent.contexts?.trace).toEqual({
 trace_id: META_TAG_TRACE_ID,
 parent_span_id: META_TAG_PARENT_SPAN_ID,
 span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
 });

 expect(errorTraceHeader).toEqual({
 environment: 'prod',
 public_key: 'public',
 release: '1.0.0',
 trace_id: META_TAG_TRACE_ID,
 });
});

sentryTest('error has new traceId after navigation', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
Expand Down

10 changes: 10 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore

View file


Open in desktop

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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc

View file


Open in desktop

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

5 changes: 5 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
# Tracing Without Performance E2E test app

E2E test app for testing Tracing Without Performance in a (SvelteKit) meta framework scenario

Add tests to this app that specifically test TwP in meta frameworks.

35 changes: 35 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
{
 "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.mjs",
 "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 || *"
 },
 "devDependencies": {
 "@playwright/test": "^1.44.1",
 "@sentry-internal/test-utils": "link:../../../test-utils",
 "@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",
 "tslib": "^2.4.1",
 "typescript": "^5.0.0",
 "vite": "^5.0.3"
 },
 "type": "module"
}

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
 startCommand: 'pnpm preview --port 3030',
 port: 3030,
});

export default config;

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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 {};

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

15 changes: 15 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: env.PUBLIC_E2E_TEST_DSN,
 release: '1.0.0',
 tunnel: `http://localhost:3031/`, // proxy server
});

const myErrorHandler = ({ error, event }: any) => {
 console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import { E2E_TEST_DSN } from '$env/static/private';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: E2E_TEST_DSN,
 tunnel: `http://localhost:3031/`, // proxy server
});

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = Sentry.sentryHandle();

4 changes: 4 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
 <slot></slot>
</div>

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
<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="/errors">error route</a>
 </li>
</ul>

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import * as Sentry from '@sentry/sveltekit';

export const load = async ({ url }) => {
 if (!url.search) {
 Sentry.captureException(new Error('No search query provided'));
 return {
 error: 'No search query provided',
 };
 }
 return {
 message: 'hi',
 };
};

16 changes: 16 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
<script lang="ts">
 import { onMount } from 'svelte';

 export let data;

 onMount(() => {
 if (data.error) {
 throw new Error('Client Error');
 }
 });
</script>

<p>
 Data:
 {data.message || 'nothing'}
</p>

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
 port: 3031,
 proxyServerName: 'sveltekit-2-twp',
});
Binary file addeddev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

18 changes: 18 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 // for more information about preprocessors
 preprocess: vitePreprocess(),

 kit: {
 // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 // See https://kit.svelte.dev/docs/adapters for more information about adapters.
 adapter: adapter(),
 },
};

export default config;

75 changes: 75 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
import { expect, test } from '@playwright/test';
import { waitForError } from '@sentry-internal/test-utils';

test('errors on frontend and backend are connected by the same trace', async ({ page }) => {
 const clientErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'Client Error';
 });

 const serverErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'No search query provided';
 });

 await page.goto('/errors');

 const clientError = await clientErrorPromise;
 const serverError = await serverErrorPromise;

 expect(clientError).toMatchObject({
 contexts: {
 trace: {
 parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: false,
 type: 'onunhandledrejection',
 },
 stacktrace: expect.any(Object),
 type: 'Error',
 value: 'Client Error',
 },
 ],
 },
 level: 'error',
 platform: 'javascript',
 release: '1.0.0',
 timestamp: expect.any(Number),
 transaction: '/errors',
 });

 expect(serverError).toMatchObject({
 contexts: {
 trace: {
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: true,
 type: 'generic',
 },
 stacktrace: {},
 },
 ],
 },
 platform: 'node',
 timestamp: expect.any(Number),
 transaction: 'GET /errors',
 });

 const clientTraceId = clientError.contexts?.trace?.trace_id;
 const serverTraceId = serverError.contexts?.trace?.trace_id;

 expect(clientTraceId).toBe(serverTraceId);
});

23 changes: 23 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { expect, test } from '@playwright/test';

test('Initially loaded page contains trace meta tags from backend trace', async ({ page }) => {
 await page.goto('/');

 const sentryTraceMetaTag = page.locator('meta[name="sentry-trace"]').first();
 const sentryTraceContent = await sentryTraceMetaTag.getAttribute('content');

 const baggageMetaTag = page.locator('meta[name="baggage"]').first();
 const baggageContent = await baggageMetaTag.getAttribute('content');

 // ensure that we do not pass a sampled -1 or -0 flag at the end:
 expect(sentryTraceContent).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}$/);

 expect(baggageContent?.length).toBeGreaterThan(0);

 const traceId = sentryTraceContent!.split('-')[0];

 expect(baggageContent).toContain('sentry-environment=qa');
 expect(baggageContent).toContain(`sentry-trace_id=${traceId}`);
 // ensure baggage also doesn't contain a sampled flag
 expect(baggageContent).not.toContain('sentry-sampled=');
});

19 changes: 19 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
 "allowJs": true,
 "checkJs": true,
 "esModuleInterop": true,
 "forceConsistentCasingInFileNames": true,
 "resolveJsonModule": true,
 "skipLibCheck": true,
 "sourceMap": true,
 "strict": true,
 "moduleResolution": "bundler"
	},
	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import { sentrySvelteKit } from '@sentry/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
 plugins: [
 sentrySvelteKit({
 autoUploadSourceMaps: false,
 }),
 sveltekit(),
 ],
});
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(sveltekit): Ensure trace meta tags are always injected#13231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Lms24
merged 10 commits into

from

Oct 8, 2024
 Merged


fix(sveltekit): Ensure trace meta tags are always injected
#13231
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
cb21bad

fix(sveltekit): Ensure trace meta tags are always injected


Lms24 Aug 5, 2024
ecdec58

cleanup


Lms24 Aug 5, 2024
0f6793b

add e2e test app


Lms24 Aug 9, 2024
5740af6

add e2e to build.yml


Lms24 Aug 9, 2024
39a7c41

fix rebase conflict


Lms24 Aug 14, 2024
c0f00c4

wip - still an error in backend error trace prop


Lms24 Aug 14, 2024
a5b28a6

some more wip


Lms24 Aug 14, 2024
638ad46

cleanup


Lms24 Sep 27, 2024
73eb9c4

fix unit tests after rebase


Lms24 Sep 27, 2024
9bfe1c3

one more cleanup


Lms24 Oct 8, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.github/workflows/build.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -915,6 +915,7 @@ jobs:
 'sveltekit',
 'sveltekit-2',
 'sveltekit-2-svelte-5',
 'sveltekit-2-twp',
 'tanstack-router',
 'generic-ts3.8',
 'node-fastify',
Expand Down

32 changes: 32 additions & 0 deletions
...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,38 @@ const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
 'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod';

sentryTest('error on initial page has traceId from meta tag', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
 }

 const url = await getLocalTestUrl({ testDir: __dirname });
 await page.goto(url);

 const errorEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
 page,
 undefined,
 eventAndTraceHeaderRequestParser,
 );

 await page.locator('#errorBtn').click();
 const [errorEvent, errorTraceHeader] = await errorEventPromise;

 expect(errorEvent.type).toEqual(undefined);
 expect(errorEvent.contexts?.trace).toEqual({
 trace_id: META_TAG_TRACE_ID,
 parent_span_id: META_TAG_PARENT_SPAN_ID,
 span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
 });

 expect(errorTraceHeader).toEqual({
 environment: 'prod',
 public_key: 'public',
 release: '1.0.0',
 trace_id: META_TAG_TRACE_ID,
 });
});

sentryTest('error has new traceId after navigation', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
Expand Down

10 changes: 10 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore

View file


Open in desktop

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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc

View file


Open in desktop

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

5 changes: 5 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
# Tracing Without Performance E2E test app

E2E test app for testing Tracing Without Performance in a (SvelteKit) meta framework scenario

Add tests to this app that specifically test TwP in meta frameworks.

35 changes: 35 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
{
 "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.mjs",
 "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 || *"
 },
 "devDependencies": {
 "@playwright/test": "^1.44.1",
 "@sentry-internal/test-utils": "link:../../../test-utils",
 "@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",
 "tslib": "^2.4.1",
 "typescript": "^5.0.0",
 "vite": "^5.0.3"
 },
 "type": "module"
}

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
 startCommand: 'pnpm preview --port 3030',
 port: 3030,
});

export default config;

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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 {};

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

15 changes: 15 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: env.PUBLIC_E2E_TEST_DSN,
 release: '1.0.0',
 tunnel: `http://localhost:3031/`, // proxy server
});

const myErrorHandler = ({ error, event }: any) => {
 console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import { E2E_TEST_DSN } from '$env/static/private';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: E2E_TEST_DSN,
 tunnel: `http://localhost:3031/`, // proxy server
});

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = Sentry.sentryHandle();

4 changes: 4 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
 <slot></slot>
</div>

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
<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="/errors">error route</a>
 </li>
</ul>

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import * as Sentry from '@sentry/sveltekit';

export const load = async ({ url }) => {
 if (!url.search) {
 Sentry.captureException(new Error('No search query provided'));
 return {
 error: 'No search query provided',
 };
 }
 return {
 message: 'hi',
 };
};

16 changes: 16 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
<script lang="ts">
 import { onMount } from 'svelte';

 export let data;

 onMount(() => {
 if (data.error) {
 throw new Error('Client Error');
 }
 });
</script>

<p>
 Data:
 {data.message || 'nothing'}
</p>

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
 port: 3031,
 proxyServerName: 'sveltekit-2-twp',
});
Binary file addeddev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

18 changes: 18 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 // for more information about preprocessors
 preprocess: vitePreprocess(),

 kit: {
 // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 // See https://kit.svelte.dev/docs/adapters for more information about adapters.
 adapter: adapter(),
 },
};

export default config;

75 changes: 75 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
import { expect, test } from '@playwright/test';
import { waitForError } from '@sentry-internal/test-utils';

test('errors on frontend and backend are connected by the same trace', async ({ page }) => {
 const clientErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'Client Error';
 });

 const serverErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'No search query provided';
 });

 await page.goto('/errors');

 const clientError = await clientErrorPromise;
 const serverError = await serverErrorPromise;

 expect(clientError).toMatchObject({
 contexts: {
 trace: {
 parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: false,
 type: 'onunhandledrejection',
 },
 stacktrace: expect.any(Object),
 type: 'Error',
 value: 'Client Error',
 },
 ],
 },
 level: 'error',
 platform: 'javascript',
 release: '1.0.0',
 timestamp: expect.any(Number),
 transaction: '/errors',
 });

 expect(serverError).toMatchObject({
 contexts: {
 trace: {
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: true,
 type: 'generic',
 },
 stacktrace: {},
 },
 ],
 },
 platform: 'node',
 timestamp: expect.any(Number),
 transaction: 'GET /errors',
 });

 const clientTraceId = clientError.contexts?.trace?.trace_id;
 const serverTraceId = serverError.contexts?.trace?.trace_id;

 expect(clientTraceId).toBe(serverTraceId);
});

23 changes: 23 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { expect, test } from '@playwright/test';

test('Initially loaded page contains trace meta tags from backend trace', async ({ page }) => {
 await page.goto('/');

 const sentryTraceMetaTag = page.locator('meta[name="sentry-trace"]').first();
 const sentryTraceContent = await sentryTraceMetaTag.getAttribute('content');

 const baggageMetaTag = page.locator('meta[name="baggage"]').first();
 const baggageContent = await baggageMetaTag.getAttribute('content');

 // ensure that we do not pass a sampled -1 or -0 flag at the end:
 expect(sentryTraceContent).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}$/);

 expect(baggageContent?.length).toBeGreaterThan(0);

 const traceId = sentryTraceContent!.split('-')[0];

 expect(baggageContent).toContain('sentry-environment=qa');
 expect(baggageContent).toContain(`sentry-trace_id=${traceId}`);
 // ensure baggage also doesn't contain a sampled flag
 expect(baggageContent).not.toContain('sentry-sampled=');
});

19 changes: 19 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
 "allowJs": true,
 "checkJs": true,
 "esModuleInterop": true,
 "forceConsistentCasingInFileNames": true,
 "resolveJsonModule": true,
 "skipLibCheck": true,
 "sourceMap": true,
 "strict": true,
 "moduleResolution": "bundler"
	},
	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import { sentrySvelteKit } from '@sentry/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
 plugins: [
 sentrySvelteKit({
 autoUploadSourceMaps: false,
 }),
 sveltekit(),
 ],
});
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(sveltekit): Ensure trace meta tags are always injected#13231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Lms24
merged 10 commits into

from

Oct 8, 2024
 Merged


fix(sveltekit): Ensure trace meta tags are always injected
#13231
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
cb21bad

fix(sveltekit): Ensure trace meta tags are always injected


Lms24 Aug 5, 2024
ecdec58

cleanup


Lms24 Aug 5, 2024
0f6793b

add e2e test app


Lms24 Aug 9, 2024
5740af6

add e2e to build.yml


Lms24 Aug 9, 2024
39a7c41

fix rebase conflict


Lms24 Aug 14, 2024
c0f00c4

wip - still an error in backend error trace prop


Lms24 Aug 14, 2024
a5b28a6

some more wip


Lms24 Aug 14, 2024
638ad46

cleanup


Lms24 Sep 27, 2024
73eb9c4

fix unit tests after rebase


Lms24 Sep 27, 2024
9bfe1c3

one more cleanup


Lms24 Oct 8, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.github/workflows/build.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -915,6 +915,7 @@ jobs:
 'sveltekit',
 'sveltekit-2',
 'sveltekit-2-svelte-5',
 'sveltekit-2-twp',
 'tanstack-router',
 'generic-ts3.8',
 'node-fastify',
Expand Down

32 changes: 32 additions & 0 deletions
...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,38 @@ const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
 'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod';

sentryTest('error on initial page has traceId from meta tag', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
 }

 const url = await getLocalTestUrl({ testDir: __dirname });
 await page.goto(url);

 const errorEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
 page,
 undefined,
 eventAndTraceHeaderRequestParser,
 );

 await page.locator('#errorBtn').click();
 const [errorEvent, errorTraceHeader] = await errorEventPromise;

 expect(errorEvent.type).toEqual(undefined);
 expect(errorEvent.contexts?.trace).toEqual({
 trace_id: META_TAG_TRACE_ID,
 parent_span_id: META_TAG_PARENT_SPAN_ID,
 span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
 });

 expect(errorTraceHeader).toEqual({
 environment: 'prod',
 public_key: 'public',
 release: '1.0.0',
 trace_id: META_TAG_TRACE_ID,
 });
});

sentryTest('error has new traceId after navigation', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
Expand Down

10 changes: 10 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore

View file


Open in desktop

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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc

View file


Open in desktop

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

5 changes: 5 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
# Tracing Without Performance E2E test app

E2E test app for testing Tracing Without Performance in a (SvelteKit) meta framework scenario

Add tests to this app that specifically test TwP in meta frameworks.

35 changes: 35 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
{
 "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.mjs",
 "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 || *"
 },
 "devDependencies": {
 "@playwright/test": "^1.44.1",
 "@sentry-internal/test-utils": "link:../../../test-utils",
 "@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",
 "tslib": "^2.4.1",
 "typescript": "^5.0.0",
 "vite": "^5.0.3"
 },
 "type": "module"
}

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
 startCommand: 'pnpm preview --port 3030',
 port: 3030,
});

export default config;

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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 {};

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

15 changes: 15 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: env.PUBLIC_E2E_TEST_DSN,
 release: '1.0.0',
 tunnel: `http://localhost:3031/`, // proxy server
});

const myErrorHandler = ({ error, event }: any) => {
 console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import { E2E_TEST_DSN } from '$env/static/private';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: E2E_TEST_DSN,
 tunnel: `http://localhost:3031/`, // proxy server
});

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = Sentry.sentryHandle();

4 changes: 4 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
 <slot></slot>
</div>

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
<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="/errors">error route</a>
 </li>
</ul>

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import * as Sentry from '@sentry/sveltekit';

export const load = async ({ url }) => {
 if (!url.search) {
 Sentry.captureException(new Error('No search query provided'));
 return {
 error: 'No search query provided',
 };
 }
 return {
 message: 'hi',
 };
};

16 changes: 16 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
<script lang="ts">
 import { onMount } from 'svelte';

 export let data;

 onMount(() => {
 if (data.error) {
 throw new Error('Client Error');
 }
 });
</script>

<p>
 Data:
 {data.message || 'nothing'}
</p>

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
 port: 3031,
 proxyServerName: 'sveltekit-2-twp',
});
Binary file addeddev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

18 changes: 18 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 // for more information about preprocessors
 preprocess: vitePreprocess(),

 kit: {
 // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 // See https://kit.svelte.dev/docs/adapters for more information about adapters.
 adapter: adapter(),
 },
};

export default config;

75 changes: 75 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
import { expect, test } from '@playwright/test';
import { waitForError } from '@sentry-internal/test-utils';

test('errors on frontend and backend are connected by the same trace', async ({ page }) => {
 const clientErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'Client Error';
 });

 const serverErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'No search query provided';
 });

 await page.goto('/errors');

 const clientError = await clientErrorPromise;
 const serverError = await serverErrorPromise;

 expect(clientError).toMatchObject({
 contexts: {
 trace: {
 parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: false,
 type: 'onunhandledrejection',
 },
 stacktrace: expect.any(Object),
 type: 'Error',
 value: 'Client Error',
 },
 ],
 },
 level: 'error',
 platform: 'javascript',
 release: '1.0.0',
 timestamp: expect.any(Number),
 transaction: '/errors',
 });

 expect(serverError).toMatchObject({
 contexts: {
 trace: {
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: true,
 type: 'generic',
 },
 stacktrace: {},
 },
 ],
 },
 platform: 'node',
 timestamp: expect.any(Number),
 transaction: 'GET /errors',
 });

 const clientTraceId = clientError.contexts?.trace?.trace_id;
 const serverTraceId = serverError.contexts?.trace?.trace_id;

 expect(clientTraceId).toBe(serverTraceId);
});

23 changes: 23 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { expect, test } from '@playwright/test';

test('Initially loaded page contains trace meta tags from backend trace', async ({ page }) => {
 await page.goto('/');

 const sentryTraceMetaTag = page.locator('meta[name="sentry-trace"]').first();
 const sentryTraceContent = await sentryTraceMetaTag.getAttribute('content');

 const baggageMetaTag = page.locator('meta[name="baggage"]').first();
 const baggageContent = await baggageMetaTag.getAttribute('content');

 // ensure that we do not pass a sampled -1 or -0 flag at the end:
 expect(sentryTraceContent).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}$/);

 expect(baggageContent?.length).toBeGreaterThan(0);

 const traceId = sentryTraceContent!.split('-')[0];

 expect(baggageContent).toContain('sentry-environment=qa');
 expect(baggageContent).toContain(`sentry-trace_id=${traceId}`);
 // ensure baggage also doesn't contain a sampled flag
 expect(baggageContent).not.toContain('sentry-sampled=');
});

19 changes: 19 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
 "allowJs": true,
 "checkJs": true,
 "esModuleInterop": true,
 "forceConsistentCasingInFileNames": true,
 "resolveJsonModule": true,
 "skipLibCheck": true,
 "sourceMap": true,
 "strict": true,
 "moduleResolution": "bundler"
	},
	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import { sentrySvelteKit } from '@sentry/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
 plugins: [
 sentrySvelteKit({
 autoUploadSourceMaps: false,
 }),
 sveltekit(),
 ],
});
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(sveltekit): Ensure trace meta tags are always injected#13231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Lms24
merged 10 commits into

from

Oct 8, 2024
 Merged


fix(sveltekit): Ensure trace meta tags are always injected
#13231
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
cb21bad

fix(sveltekit): Ensure trace meta tags are always injected


Lms24 Aug 5, 2024
ecdec58

cleanup


Lms24 Aug 5, 2024
0f6793b

add e2e test app


Lms24 Aug 9, 2024
5740af6

add e2e to build.yml


Lms24 Aug 9, 2024
39a7c41

fix rebase conflict


Lms24 Aug 14, 2024
c0f00c4

wip - still an error in backend error trace prop


Lms24 Aug 14, 2024
a5b28a6

some more wip


Lms24 Aug 14, 2024
638ad46

cleanup


Lms24 Sep 27, 2024
73eb9c4

fix unit tests after rebase


Lms24 Sep 27, 2024
9bfe1c3

one more cleanup


Lms24 Oct 8, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.github/workflows/build.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -915,6 +915,7 @@ jobs:
 'sveltekit',
 'sveltekit-2',
 'sveltekit-2-svelte-5',
 'sveltekit-2-twp',
 'tanstack-router',
 'generic-ts3.8',
 'node-fastify',
Expand Down

32 changes: 32 additions & 0 deletions
...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,38 @@ const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
 'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod';

sentryTest('error on initial page has traceId from meta tag', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
 }

 const url = await getLocalTestUrl({ testDir: __dirname });
 await page.goto(url);

 const errorEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
 page,
 undefined,
 eventAndTraceHeaderRequestParser,
 );

 await page.locator('#errorBtn').click();
 const [errorEvent, errorTraceHeader] = await errorEventPromise;

 expect(errorEvent.type).toEqual(undefined);
 expect(errorEvent.contexts?.trace).toEqual({
 trace_id: META_TAG_TRACE_ID,
 parent_span_id: META_TAG_PARENT_SPAN_ID,
 span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
 });

 expect(errorTraceHeader).toEqual({
 environment: 'prod',
 public_key: 'public',
 release: '1.0.0',
 trace_id: META_TAG_TRACE_ID,
 });
});

sentryTest('error has new traceId after navigation', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
Expand Down

10 changes: 10 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore

View file


Open in desktop

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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc

View file


Open in desktop

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

5 changes: 5 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
# Tracing Without Performance E2E test app

E2E test app for testing Tracing Without Performance in a (SvelteKit) meta framework scenario

Add tests to this app that specifically test TwP in meta frameworks.

35 changes: 35 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
{
 "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.mjs",
 "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 || *"
 },
 "devDependencies": {
 "@playwright/test": "^1.44.1",
 "@sentry-internal/test-utils": "link:../../../test-utils",
 "@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",
 "tslib": "^2.4.1",
 "typescript": "^5.0.0",
 "vite": "^5.0.3"
 },
 "type": "module"
}

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
 startCommand: 'pnpm preview --port 3030',
 port: 3030,
});

export default config;

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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 {};

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

15 changes: 15 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: env.PUBLIC_E2E_TEST_DSN,
 release: '1.0.0',
 tunnel: `http://localhost:3031/`, // proxy server
});

const myErrorHandler = ({ error, event }: any) => {
 console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import { E2E_TEST_DSN } from '$env/static/private';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: E2E_TEST_DSN,
 tunnel: `http://localhost:3031/`, // proxy server
});

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = Sentry.sentryHandle();

4 changes: 4 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
 <slot></slot>
</div>

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
<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="/errors">error route</a>
 </li>
</ul>

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import * as Sentry from '@sentry/sveltekit';

export const load = async ({ url }) => {
 if (!url.search) {
 Sentry.captureException(new Error('No search query provided'));
 return {
 error: 'No search query provided',
 };
 }
 return {
 message: 'hi',
 };
};

16 changes: 16 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
<script lang="ts">
 import { onMount } from 'svelte';

 export let data;

 onMount(() => {
 if (data.error) {
 throw new Error('Client Error');
 }
 });
</script>

<p>
 Data:
 {data.message || 'nothing'}
</p>

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
 port: 3031,
 proxyServerName: 'sveltekit-2-twp',
});
Binary file addeddev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

18 changes: 18 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 // for more information about preprocessors
 preprocess: vitePreprocess(),

 kit: {
 // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 // See https://kit.svelte.dev/docs/adapters for more information about adapters.
 adapter: adapter(),
 },
};

export default config;

75 changes: 75 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
import { expect, test } from '@playwright/test';
import { waitForError } from '@sentry-internal/test-utils';

test('errors on frontend and backend are connected by the same trace', async ({ page }) => {
 const clientErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'Client Error';
 });

 const serverErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'No search query provided';
 });

 await page.goto('/errors');

 const clientError = await clientErrorPromise;
 const serverError = await serverErrorPromise;

 expect(clientError).toMatchObject({
 contexts: {
 trace: {
 parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: false,
 type: 'onunhandledrejection',
 },
 stacktrace: expect.any(Object),
 type: 'Error',
 value: 'Client Error',
 },
 ],
 },
 level: 'error',
 platform: 'javascript',
 release: '1.0.0',
 timestamp: expect.any(Number),
 transaction: '/errors',
 });

 expect(serverError).toMatchObject({
 contexts: {
 trace: {
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: true,
 type: 'generic',
 },
 stacktrace: {},
 },
 ],
 },
 platform: 'node',
 timestamp: expect.any(Number),
 transaction: 'GET /errors',
 });

 const clientTraceId = clientError.contexts?.trace?.trace_id;
 const serverTraceId = serverError.contexts?.trace?.trace_id;

 expect(clientTraceId).toBe(serverTraceId);
});

23 changes: 23 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { expect, test } from '@playwright/test';

test('Initially loaded page contains trace meta tags from backend trace', async ({ page }) => {
 await page.goto('/');

 const sentryTraceMetaTag = page.locator('meta[name="sentry-trace"]').first();
 const sentryTraceContent = await sentryTraceMetaTag.getAttribute('content');

 const baggageMetaTag = page.locator('meta[name="baggage"]').first();
 const baggageContent = await baggageMetaTag.getAttribute('content');

 // ensure that we do not pass a sampled -1 or -0 flag at the end:
 expect(sentryTraceContent).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}$/);

 expect(baggageContent?.length).toBeGreaterThan(0);

 const traceId = sentryTraceContent!.split('-')[0];

 expect(baggageContent).toContain('sentry-environment=qa');
 expect(baggageContent).toContain(`sentry-trace_id=${traceId}`);
 // ensure baggage also doesn't contain a sampled flag
 expect(baggageContent).not.toContain('sentry-sampled=');
});

19 changes: 19 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
 "allowJs": true,
 "checkJs": true,
 "esModuleInterop": true,
 "forceConsistentCasingInFileNames": true,
 "resolveJsonModule": true,
 "skipLibCheck": true,
 "sourceMap": true,
 "strict": true,
 "moduleResolution": "bundler"
	},
	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import { sentrySvelteKit } from '@sentry/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
 plugins: [
 sentrySvelteKit({
 autoUploadSourceMaps: false,
 }),
 sveltekit(),
 ],
});
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(sveltekit): Ensure trace meta tags are always injected#13231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

Lms24
merged 10 commits into

from

Oct 8, 2024
 Merged


fix(sveltekit): Ensure trace meta tags are always injected
#13231
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
cb21bad

fix(sveltekit): Ensure trace meta tags are always injected


Lms24 Aug 5, 2024
ecdec58

cleanup


Lms24 Aug 5, 2024
0f6793b

add e2e test app


Lms24 Aug 9, 2024
5740af6

add e2e to build.yml


Lms24 Aug 9, 2024
39a7c41

fix rebase conflict


Lms24 Aug 14, 2024
c0f00c4

wip - still an error in backend error trace prop


Lms24 Aug 14, 2024
a5b28a6

some more wip


Lms24 Aug 14, 2024
638ad46

cleanup


Lms24 Sep 27, 2024
73eb9c4

fix unit tests after rebase


Lms24 Sep 27, 2024
9bfe1c3

one more cleanup


Lms24 Oct 8, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
.github/workflows/build.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -915,6 +915,7 @@ jobs:
 'sveltekit',
 'sveltekit-2',
 'sveltekit-2-svelte-5',
 'sveltekit-2-twp',
 'tanstack-router',
 'generic-ts3.8',
 'node-fastify',
Expand Down

32 changes: 32 additions & 0 deletions
...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,38 @@ const META_TAG_PARENT_SPAN_ID = '1234567890123456';
const META_TAG_BAGGAGE =
 'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod';

sentryTest('error on initial page has traceId from meta tag', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
 }

 const url = await getLocalTestUrl({ testDir: __dirname });
 await page.goto(url);

 const errorEventPromise = getFirstSentryEnvelopeRequest<EventAndTraceHeader>(
 page,
 undefined,
 eventAndTraceHeaderRequestParser,
 );

 await page.locator('#errorBtn').click();
 const [errorEvent, errorTraceHeader] = await errorEventPromise;

 expect(errorEvent.type).toEqual(undefined);
 expect(errorEvent.contexts?.trace).toEqual({
 trace_id: META_TAG_TRACE_ID,
 parent_span_id: META_TAG_PARENT_SPAN_ID,
 span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
 });

 expect(errorTraceHeader).toEqual({
 environment: 'prod',
 public_key: 'public',
 release: '1.0.0',
 trace_id: META_TAG_TRACE_ID,
 });
});

sentryTest('error has new traceId after navigation', async ({ getLocalTestUrl, page }) => {
 if (shouldSkipTracingTest()) {
 sentryTest.skip();
Expand Down

10 changes: 10 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.gitignore

View file


Open in desktop

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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/.npmrc

View file


Open in desktop

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

5 changes: 5 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
# Tracing Without Performance E2E test app

E2E test app for testing Tracing Without Performance in a (SvelteKit) meta framework scenario

Add tests to this app that specifically test TwP in meta frameworks.

35 changes: 35 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
{
 "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.mjs",
 "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 || *"
 },
 "devDependencies": {
 "@playwright/test": "^1.44.1",
 "@sentry-internal/test-utils": "link:../../../test-utils",
 "@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",
 "tslib": "^2.4.1",
 "typescript": "^5.0.0",
 "vite": "^5.0.3"
 },
 "type": "module"
}

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/playwright.config.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
 startCommand: 'pnpm preview --port 3030',
 port: 3030,
});

export default config;

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.d.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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 {};

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/app.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

15 changes: 15 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
import { env } from '$env/dynamic/public';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: env.PUBLIC_E2E_TEST_DSN,
 release: '1.0.0',
 tunnel: `http://localhost:3031/`, // proxy server
});

const myErrorHandler = ({ error, event }: any) => {
 console.error('An error occurred on the client side:', error, event);
};

export const handleError = Sentry.handleErrorWithSentry(myErrorHandler);

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/hooks.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import { E2E_TEST_DSN } from '$env/static/private';
import * as Sentry from '@sentry/sveltekit';

Sentry.init({
 environment: 'qa', // dynamic sampling bias to keep transactions
 dsn: E2E_TEST_DSN,
 tunnel: `http://localhost:3031/`, // proxy server
});

// not logging anything to console to avoid noise in the test output
export const handleError = Sentry.handleErrorWithSentry(() => {});

export const handle = Sentry.sentryHandle();

4 changes: 4 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
<h1>Sveltekit E2E Test app</h1>
<div data-sveltekit-preload-data="off">
 <slot></slot>
</div>

8 changes: 8 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
<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="/errors">error route</a>
 </li>
</ul>

13 changes: 13 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import * as Sentry from '@sentry/sveltekit';

export const load = async ({ url }) => {
 if (!url.search) {
 Sentry.captureException(new Error('No search query provided'));
 return {
 error: 'No search query provided',
 };
 }
 return {
 message: 'hi',
 };
};

16 changes: 16 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/src/routes/errors/+page.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
<script lang="ts">
 import { onMount } from 'svelte';

 export let data;

 onMount(() => {
 if (data.error) {
 throw new Error('Client Error');
 }
 });
</script>

<p>
 Data:
 {data.message || 'nothing'}
</p>

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/start-event-proxy.mjs

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
 port: 3031,
 proxyServerName: 'sveltekit-2-twp',
});
Binary file addeddev-packages/e2e-tests/test-applications/sveltekit-2-twp/static/favicon.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

18 changes: 18 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/svelte.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 // for more information about preprocessors
 preprocess: vitePreprocess(),

 kit: {
 // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 // See https://kit.svelte.dev/docs/adapters for more information about adapters.
 adapter: adapter(),
 },
};

export default config;

75 changes: 75 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/errors.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
import { expect, test } from '@playwright/test';
import { waitForError } from '@sentry-internal/test-utils';

test('errors on frontend and backend are connected by the same trace', async ({ page }) => {
 const clientErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'Client Error';
 });

 const serverErrorPromise = waitForError('sveltekit-2-twp', evt => {
 return evt.exception?.values?.[0].value === 'No search query provided';
 });

 await page.goto('/errors');

 const clientError = await clientErrorPromise;
 const serverError = await serverErrorPromise;

 expect(clientError).toMatchObject({
 contexts: {
 trace: {
 parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: false,
 type: 'onunhandledrejection',
 },
 stacktrace: expect.any(Object),
 type: 'Error',
 value: 'Client Error',
 },
 ],
 },
 level: 'error',
 platform: 'javascript',
 release: '1.0.0',
 timestamp: expect.any(Number),
 transaction: '/errors',
 });

 expect(serverError).toMatchObject({
 contexts: {
 trace: {
 span_id: expect.stringMatching(/[a-f0-9]{16}/),
 trace_id: expect.stringMatching(/[a-f0-9]{32}/),
 },
 },
 environment: 'qa',
 exception: {
 values: [
 {
 mechanism: {
 handled: true,
 type: 'generic',
 },
 stacktrace: {},
 },
 ],
 },
 platform: 'node',
 timestamp: expect.any(Number),
 transaction: 'GET /errors',
 });

 const clientTraceId = clientError.contexts?.trace?.trace_id;
 const serverTraceId = serverError.contexts?.trace?.trace_id;

 expect(clientTraceId).toBe(serverTraceId);
});

23 changes: 23 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tests/tracing.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import { expect, test } from '@playwright/test';

test('Initially loaded page contains trace meta tags from backend trace', async ({ page }) => {
 await page.goto('/');

 const sentryTraceMetaTag = page.locator('meta[name="sentry-trace"]').first();
 const sentryTraceContent = await sentryTraceMetaTag.getAttribute('content');

 const baggageMetaTag = page.locator('meta[name="baggage"]').first();
 const baggageContent = await baggageMetaTag.getAttribute('content');

 // ensure that we do not pass a sampled -1 or -0 flag at the end:
 expect(sentryTraceContent).toMatch(/^[a-f0-9]{32}-[a-f0-9]{16}$/);

 expect(baggageContent?.length).toBeGreaterThan(0);

 const traceId = sentryTraceContent!.split('-')[0];

 expect(baggageContent).toContain('sentry-environment=qa');
 expect(baggageContent).toContain(`sentry-trace_id=${traceId}`);
 // ensure baggage also doesn't contain a sampled flag
 expect(baggageContent).not.toContain('sentry-sampled=');
});

19 changes: 19 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/tsconfig.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
 "allowJs": true,
 "checkJs": true,
 "esModuleInterop": true,
 "forceConsistentCasingInFileNames": true,
 "resolveJsonModule": true,
 "skipLibCheck": true,
 "sourceMap": true,
 "strict": true,
 "moduleResolution": "bundler"
	},
	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

12 changes: 12 additions & 0 deletions
dev-packages/e2e-tests/test-applications/sveltekit-2-twp/vite.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import { sentrySvelteKit } from '@sentry/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
 plugins: [
 sentrySvelteKit({
 autoUploadSourceMaps: false,
 }),
 sveltekit(),
 ],
});
Loading