Skip to content

Commit ca35738

Browse files
HazATclaude
HazAT
and
claude
committed
feat(e2e-tests): add lighthouse-react fixture with 3 Sentry modes
Adds a new dedicated Vite + React 18 fixture at dev-packages/e2e-tests/test-applications/lighthouse-react/ for measuring JavaScript bundle size across three Sentry instrumentation levels. The fixture supports three build modes selected via Vite's native --mode flag: - no-sentry: zero Sentry imports; dynamic-import branches for the other modes are unreachable so Vite tree-shakes the SDK out entirely - init-only: imports @sentry/react and calls Sentry.init({ enabled: false }) to measure SDK-loading cost with no active transport - tracing-replay: full Sentry.init with browserTracingIntegration + replayIntegration for the heaviest instrumentation scenario Bundle sizes (uncompressed JS): no-sentry: 144 KB (React only) init-only: 144 + 84 = 228 KB (+84 KB SDK chunk) tracing-replay: 145 + 273 = 418 KB (+273 KB SDK+replay chunk) Key design decisions: - Mode branching is done entirely in src/main.tsx via dynamic imports keyed on import.meta.env.MODE — no cp-file hacks, no runtime if/else in a shared entry, no CRA env-var pattern. - sentryTest.skip = true keeps lighthouse-react out of the regular e2e matrix. - @sentry/react comes from file:../../packed/sentry-react-packed.tgz following the convention used by other e2e fixtures (react-19, etc.). - No Playwright, no tests dir, no proxy script — this fixture exists only for Lighthouse bundle measurement. Co-Authored-By: claude-sonnet-4-5 <noreply@anthropic.com>
1 parent 62896cc commit ca35738

11 files changed

Lines changed: 191 additions & 0 deletions

File tree

‎dev-packages/e2e-tests/test-applications/lighthouse-react/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Lighthouse Fixture</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎dev-packages/e2e-tests/test-applications/lighthouse-react/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "lighthouse-react-test-app",
3+
"private": true,
4+
"type": "module",
5+
"sentryTest": {
6+
"skip": true
7+
},
8+
"scripts": {
9+
"build": "vite build",
10+
"build:no-sentry": "vite build --mode no-sentry",
11+
"build:init-only": "vite build --mode init-only",
12+
"build:tracing-replay": "vite build --mode tracing-replay",
13+
"preview": "vite preview",
14+
"clean": "npx rimraf node_modules pnpm-lock.yaml dist",
15+
"test:build": "pnpm install && pnpm build"
16+
},
17+
"dependencies": {
18+
"@sentry/react": "file:../../packed/sentry-react-packed.tgz",
19+
"react": "^18.3.1",
20+
"react-dom": "^18.3.1"
21+
},
22+
"devDependencies": {
23+
"@types/react": "^18.3.0",
24+
"@types/react-dom": "^18.3.0",
25+
"@vitejs/plugin-react-swc": "^3.7.0",
26+
"typescript": "~5.4.0",
27+
"vite": "^5.4.0"
28+
},
29+
"volta": {
30+
"extends": "../../package.json"
31+
}
32+
}

‎dev-packages/e2e-tests/test-applications/lighthouse-react/public/logo.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎dev-packages/e2e-tests/test-applications/lighthouse-react/src/App.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { useEffect, useState } from 'react';
2+
3+
const CARDS = [
4+
{ title: 'Performance', body: 'Measure and optimize your app render times and interaction latency.' },
5+
{ title: 'Accessibility', body: 'Ensure your interface is usable by everyone, including assistive technologies.' },
6+
{ title: 'Best Practices', body: 'Follow modern web development patterns for secure and maintainable code.' },
7+
{ title: 'SEO', body: 'Optimize discoverability with semantic markup and structured metadata.' },
8+
{ title: 'PWA', body: 'Add offline support and installability via service workers and manifests.' },
9+
{ title: 'Security', body: 'Protect users with CSP headers, HTTPS, and input validation.' },
10+
];
11+
12+
export default function App() {
13+
const [count, setCount] = useState(0);
14+
15+
useEffect(() => {
16+
document.title = `Lighthouse Fixture (${count})`;
17+
}, [count]);
18+
19+
return (
20+
<main>
21+
<header>
22+
<nav>
23+
<a href="/">Home</a>
24+
<a href="/docs">Docs</a>
25+
<a href="/about">About</a>
26+
</nav>
27+
</header>
28+
29+
<section className="hero">
30+
<img src="/logo.svg" alt="Lighthouse logo" width={120} height={120} />
31+
<h1>Lighthouse Fixture</h1>
32+
<p>
33+
This app exists to measure JavaScript bundle size and runtime cost across three Sentry instrumentation
34+
configurations. Each build mode ships a different level of SDK integration.
35+
</p>
36+
</section>
37+
38+
<section className="cards">
39+
{CARDS.map(card => (
40+
<article key={card.title} className="card">
41+
<h2>{card.title}</h2>
42+
<p>{card.body}</p>
43+
</article>
44+
))}
45+
</section>
46+
47+
<form
48+
onSubmit={e => {
49+
e.preventDefault();
50+
setCount(c => c + 1);
51+
}}
52+
>
53+
<input type="text" name="name" placeholder="Name" aria-label="Name" />
54+
<input type="email" name="email" placeholder="Email" aria-label="Email" />
55+
<input type="text" name="message" placeholder="Message" aria-label="Message" />
56+
<button type="submit">Submit ({count})</button>
57+
</form>
58+
</main>
59+
);
60+
}

‎dev-packages/e2e-tests/test-applications/lighthouse-react/src/main.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createRoot } from 'react-dom/client';
2+
import App from './App';
3+
4+
async function bootstrap() {
5+
const mode = import.meta.env.MODE;
6+
if (mode === 'init-only') {
7+
const { initSentry } = await import('./sentry/init-only');
8+
initSentry();
9+
} else if (mode === 'tracing-replay') {
10+
const { initSentry } = await import('./sentry/tracing-replay');
11+
initSentry();
12+
}
13+
// 'no-sentry' mode: do not import any sentry module — the dynamic-import
14+
// branches above are unreachable and Vite drops them from the bundle.
15+
16+
const root = createRoot(document.getElementById('root')!);
17+
root.render(<App />);
18+
}
19+
20+
void bootstrap();

‎dev-packages/e2e-tests/test-applications/lighthouse-react/src/sentry/init-only.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as Sentry from '@sentry/react';
2+
3+
export function initSentry(): void {
4+
// enabled: false makes the SDK a guaranteed no-op (no transport allocation,
5+
// no DSN warning). We're measuring pure SDK-loading + tree-shaking cost.
6+
Sentry.init({ enabled: false });
7+
}

‎dev-packages/e2e-tests/test-applications/lighthouse-react/src/sentry/no-sentry.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function initSentry(): void {
2+
// no-op: this mode intentionally excludes all Sentry imports
3+
}

‎dev-packages/e2e-tests/test-applications/lighthouse-react/src/sentry/tracing-replay.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as Sentry from '@sentry/react';
2+
3+
export function initSentry(): void {
4+
Sentry.init({
5+
dsn: import.meta.env.VITE_E2E_TEST_DSN as string | undefined,
6+
release: 'lighthouse-fixture',
7+
environment: 'qa',
8+
integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
9+
tracesSampleRate: 1.0,
10+
replaysSessionSampleRate: 1.0,
11+
replaysOnErrorSampleRate: 1.0,
12+
});
13+
}

‎dev-packages/e2e-tests/test-applications/lighthouse-react/tsconfig.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"useDefineForClassFields": true,
5+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
6+
"module": "ESNext",
7+
"skipLibCheck": true,
8+
"moduleResolution": "bundler",
9+
"allowImportingTsExtensions": true,
10+
"resolveJsonModule": true,
11+
"isolatedModules": true,
12+
"noEmit": true,
13+
"jsx": "react-jsx",
14+
"strict": true,
15+
"noUnusedLocals": true,
16+
"noUnusedParameters": true,
17+
"noFallthroughCasesInSwitch": true
18+
},
19+
"include": ["src"],
20+
"references": [{ "path": "./tsconfig.node.json" }]
21+
}

‎dev-packages/e2e-tests/test-applications/lighthouse-react/tsconfig.node.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"skipLibCheck": true,
5+
"module": "ESNext",
6+
"moduleResolution": "bundler",
7+
"allowSyntheticDefaultImports": true
8+
},
9+
"include": ["vite.config.ts"]
10+
}

0 commit comments

Comments
 (0)