test(e2e): Add Astro 4 E2E test app (#13375)

Lms24 · web-flow · commit 5c08d03dbe6c · 2024-08-14T16:32:33.000+02:00
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -847,6 +847,7 @@ jobs:
           [
             'angular-17',
             'angular-18',
+            'astro-4',
             'aws-lambda-layer-cjs',
             'aws-serverless-esm',
             'node-express',
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/.gitignore b/dev-packages/e2e-tests/test-applications/astro-4/.gitignore
@@ -0,0 +1,26 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+
+test-results
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/.npmrc b/dev-packages/e2e-tests/test-applications/astro-4/.npmrc
@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/README.md b/dev-packages/e2e-tests/test-applications/astro-4/README.md
@@ -0,0 +1,6 @@
+# Astro 4 E2E test app
+
+- Astro 4.x
+- Output mode `hybrid` (== opt into SSR routes)
+- Node adapter
+- Configured for Tracing and Performance
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/astro.config.mjs b/dev-packages/e2e-tests/test-applications/astro-4/astro.config.mjs
@@ -0,0 +1,29 @@
+import node from '@astrojs/node';
+import sentry from '@sentry/astro';
+import { defineConfig } from 'astro/config';
+
+import spotlightjs from '@spotlightjs/astro';
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'hybrid',
+  integrations: [
+    sentry({
+      debug: true,
+      sourceMapsUploadOptions: {
+        enabled: false,
+      },
+    }),
+    spotlightjs(),
+  ],
+  adapter: node({
+    mode: 'standalone',
+  }),
+  vite: {
+    build: {
+      rollupOptions: {
+        external: ['https'],
+      },
+    },
+  },
+});
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/package.json b/dev-packages/e2e-tests/test-applications/astro-4/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "astro-hybrid-with-static-routes",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev --force",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "test:build": "pnpm install && npx playwright install && pnpm build",
+    "test:assert": "TEST_ENV=production playwright test"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.2",
+    "@astrojs/node": "^8.3.2",
+    "@playwright/test": "^1.46.0",
+    "@sentry/astro": "* || latest",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "@spotlightjs/astro": "^2.1.6",
+    "astro": "^4.13.3",
+    "typescript": "^5.5.4"
+  },
+  "devDependencies": {
+    "@astrojs/internal-helpers": "^0.4.1"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/astro-4/playwright.config.mjs
@@ -0,0 +1,13 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+  throw new Error('No test env defined');
+}
+
+const config = getPlaywrightConfig({
+  startCommand: 'node ./dist/server/entry.mjs',
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/public/favicon.svg b/dev-packages/e2e-tests/test-applications/astro-4/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/sentry.client.config.js b/dev-packages/e2e-tests/test-applications/astro-4/sentry.client.config.js
@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/astro';
+
+Sentry.init({
+  dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
+  environment: 'qa',
+  tracesSampleRate: 1.0,
+  tunnel: 'http://localhost:3031/', // proxy server
+});
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/sentry.server.config.js b/dev-packages/e2e-tests/test-applications/astro-4/sentry.server.config.js
@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/astro';
+
+Sentry.init({
+  dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
+  environment: 'qa',
+  tracesSampleRate: 1.0,
+  spotlight: true,
+  tunnel: 'http://localhost:3031/', // proxy server
+});
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/env.d.ts b/dev-packages/e2e-tests/test-applications/astro-4/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/layouts/Layout.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/layouts/Layout.astro
@@ -0,0 +1,39 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	:root {
+		--accent: 136, 58, 234;
+		--accent-light: 224, 204, 250;
+		--accent-dark: 49, 10, 101;
+		--accent-gradient: linear-gradient(
+			45deg,
+			rgb(var(--accent)),
+			rgb(var(--accent-light)) 30%,
+			white 60%
+		);
+	}
+	html {
+		font-family: system-ui, sans-serif;
+		background: #b7b7b7;
+	}
+</style>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/client-error/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/client-error/index.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Client Error">
+
+<button id="#errBtn" onclick="throw new Error('client error')">
+  Throw Error
+</button>
+
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/endpoint-error/api.ts b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/endpoint-error/api.ts
@@ -0,0 +1,15 @@
+import type { APIRoute } from 'astro';
+
+export const prerender = false;
+
+export const GET: APIRoute = ({ request, url }) => {
+  if (url.searchParams.has('error')) {
+    throw new Error('Endpoint Error');
+  }
+  return new Response(
+    JSON.stringify({
+      search: url.search,
+      sp: url.searchParams,
+    }),
+  );
+};
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/endpoint-error/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/endpoint-error/index.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "../../layouts/Layout.astro";
+
+export const prerender = false;
+---
+
+<Layout title="Endpoint Error">
+  <button onclick="fetch('endpoint-error/api?error=1')">Get Data</button>
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/index.astro
@@ -0,0 +1,36 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Welcome to Astro.">
+	<main>
+		<h1>Astro E2E Test App</h1>
+		<ul role="list" style="display: flex; flex-direction: column;">
+			<a href="/ssr-error">SSR Error</a>
+			<a href="/endpoint-error">Endpoint Error</a>
+			<a href="/client-error">Cliennt Error</a>
+			<a href="/test-ssr">SSR page</a>
+			<a href="/test-static" title="static page">Static Page</a>
+		</ul>
+	</main>
+</Layout>
+
+<style>
+	main {
+		margin: auto;
+		padding: 1rem;
+		width: 800px;
+		max-width: calc(100% - 2rem);
+		color: white;
+		font-size: 20px;
+		line-height: 1.6;
+	}
+
+	h1 {
+		font-size: 4rem;
+		font-weight: 700;
+		line-height: 1;
+		text-align: center;
+		margin-bottom: 1em;
+	}
+</style>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/ssr-error/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/ssr-error/index.astro
@@ -0,0 +1,13 @@
+---
+import Layout from "../../layouts/Layout.astro";
+
+const a = {} as any;
+console.log(a.foo.x);
+export const prerender = false;
+---
+
+<Layout title="SSR Error">
+
+  <h1>Page with SSR error</h1>
+
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/test-ssr/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/test-ssr/index.astro
@@ -0,0 +1,15 @@
+---
+import Layout from "../../layouts/Layout.astro"
+
+export const prerender = false
+---
+
+<Layout title="Dynamic SSR page">
+
+    <h1>
+        This is a server page
+    </h1>
+
+    <button onclick="fetch('/test-server')">fetch</button>
+
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/src/pages/test-static/index.astro b/dev-packages/e2e-tests/test-applications/astro-4/src/pages/test-static/index.astro
@@ -0,0 +1,15 @@
+---
+import Layout from "../../layouts/Layout.astro";
+
+export const prerender = true;
+---
+
+<Layout title="Static Page">
+
+<h1>
+    This is a static page
+</h1>
+
+<button onclick="fetch('/test-static')">fetch</button>
+
+</Layout>
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/astro-4/start-event-proxy.mjs
@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'astro-4',
+});
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/tests/errors.client.test.ts b/dev-packages/e2e-tests/test-applications/astro-4/tests/errors.client.test.ts
@@ -0,0 +1,79 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test.describe('client-side errors', () => {
+  test('captures error thrown on click', async ({ page }) => {
+    const errorEventPromise = waitForError('astro-4', errorEvent => {
+      return errorEvent?.exception?.values?.[0]?.value === 'client error';
+    });
+
+    await page.goto('/client-error');
+
+    await page.getByText('Throw Error').click();
+
+    const errorEvent = await errorEventPromise;
+
+    const errorEventFrames = errorEvent.exception?.values?.[0]?.stacktrace?.frames;
+
+    expect(errorEventFrames?.[errorEventFrames?.length - 1]).toEqual(
+      expect.objectContaining({
+        colno: expect.any(Number),
+        lineno: expect.any(Number),
+        filename: expect.stringContaining('/client-error'),
+        function: 'HTMLButtonElement.onclick',
+        in_app: true,
+      }),
+    );
+
+    expect(errorEvent).toMatchObject({
+      exception: {
+        values: [
+          {
+            mechanism: {
+              handled: false,
+              type: 'onerror',
+            },
+            type: 'Error',
+            value: 'client error',
+            stacktrace: expect.any(Object), // detailed check above
+          },
+        ],
+      },
+      level: 'error',
+      platform: 'javascript',
+      request: {
+        url: expect.stringContaining('/client-error'),
+        headers: {
+          'User-Agent': expect.any(String),
+        },
+      },
+      event_id: expect.stringMatching(/[a-f0-9]{32}/),
+      timestamp: expect.any(Number),
+      sdk: {
+        integrations: expect.arrayContaining([
+          'InboundFilters',
+          'FunctionToString',
+          'BrowserApiErrors',
+          'Breadcrumbs',
+          'GlobalHandlers',
+          'LinkedErrors',
+          'Dedupe',
+          'HttpContext',
+          'BrowserTracing',
+        ]),
+        name: 'sentry.javascript.astro',
+        version: expect.any(String),
+        packages: expect.any(Array),
+      },
+      transaction: '/client-error',
+      contexts: {
+        trace: {
+          trace_id: expect.stringMatching(/[a-f0-9]{32}/),
+          parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
+          span_id: expect.stringMatching(/[a-f0-9]{16}/),
+        },
+      },
+      environment: 'qa',
+    });
+  });
+});
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/tests/errors.server.test.ts b/dev-packages/e2e-tests/test-applications/astro-4/tests/errors.server.test.ts
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/tests/tracing.dynamic.test.ts b/dev-packages/e2e-tests/test-applications/astro-4/tests/tracing.dynamic.test.ts
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/tests/tracing.static.test.ts b/dev-packages/e2e-tests/test-applications/astro-4/tests/tracing.static.test.ts
diff --git a/dev-packages/e2e-tests/test-applications/astro-4/tsconfig.json b/dev-packages/e2e-tests/test-applications/astro-4/tsconfig.json
diff --git a/packages/astro/src/server/middleware.ts b/packages/astro/src/server/middleware.ts

Original file line number	Diff line number	Diff line change
`@@ -847,6 +847,7 @@ jobs:`
`847`	`847`	`[`
`848`	`848`	`'angular-17',`
`849`	`849`	`'angular-18',`
	`850`	`+ 'astro-4',`
`850`	`851`	`'aws-lambda-layer-cjs',`
`851`	`852`	`'aws-serverless-esm',`
`852`	`853`	`'node-express',`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@sentry:registry=http://127.0.0.1:4873`
	`2`	`+@sentry-internal:registry=http://127.0.0.1:4873`