From 6e3bed49136e29220062d9ffcc0ec11d8a71d481 Mon Sep 17 00:00:00 2001 From: Andrei Borza Date: Fri, 12 Jul 2024 11:43:01 +0200 Subject: [PATCH 1/2] test(solidstart): Add client performance e2e tests --- .../test-applications/solidstart/package.json | 7 +- .../test-applications/solidstart/src/app.tsx | 7 +- .../solidstart/src/entry-client.tsx | 3 +- .../solidstart/src/routes/index.tsx | 5 + .../solidstart/src/routes/users/[id].tsx | 6 ++ .../tests/performance.client.test.ts | 93 +++++++++++++++++++ 6 files changed, 117 insertions(+), 4 deletions(-) create mode 100644 dev-packages/e2e-tests/test-applications/solidstart/src/routes/users/[id].tsx create mode 100644 dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts diff --git a/dev-packages/e2e-tests/test-applications/solidstart/package.json b/dev-packages/e2e-tests/test-applications/solidstart/package.json index b4b81ffcbd88..6409d191de5b 100644 --- a/dev-packages/e2e-tests/test-applications/solidstart/package.json +++ b/dev-packages/e2e-tests/test-applications/solidstart/package.json @@ -5,7 +5,12 @@ "clean": "pnpx rimraf node_modules pnpm-lock.yaml .vinxi .output", "dev": "NODE_OPTIONS='--import ./src/instrument.server.mjs' vinxi dev", "build": "vinxi build", - "preview": "HOST=localhost PORT=3030 NODE_OPTIONS='--import ./src/instrument.server.mjs' vinxi start", + "//": [ + "We are using `vinxi dev` to start the server because `vinxi start` is experimental and ", + "doesn't correctly resolve modules for @sentry/solidstart/solidrouter.", + "This is currently not an issue outside of our repo. See: https://github.com/nksaraf/vinxi/issues/177" + ], + "preview": "HOST=localhost PORT=3030 NODE_OPTIONS='--import ./src/instrument.server.mjs' vinxi dev", "test:prod": "TEST_ENV=production playwright test", "test:build": "pnpm install && npx playwright install && pnpm build", "test:assert": "pnpm test:prod" diff --git a/dev-packages/e2e-tests/test-applications/solidstart/src/app.tsx b/dev-packages/e2e-tests/test-applications/solidstart/src/app.tsx index bb1f1095f125..3eb85218b575 100644 --- a/dev-packages/e2e-tests/test-applications/solidstart/src/app.tsx +++ b/dev-packages/e2e-tests/test-applications/solidstart/src/app.tsx @@ -1,11 +1,14 @@ +import { withSentryRouterRouting } from '@sentry/solidstart/solidrouter'; import { MetaProvider, Title } from '@solidjs/meta'; import { Router } from '@solidjs/router'; import { FileRoutes } from '@solidjs/start/router'; import { Suspense } from 'solid-js'; +const SentryRouter = withSentryRouterRouting(Router); + export default function App() { return ( - ( SolidStart - with Vitest @@ -14,6 +17,6 @@ export default function App() { )} > - + ); } diff --git a/dev-packages/e2e-tests/test-applications/solidstart/src/entry-client.tsx b/dev-packages/e2e-tests/test-applications/solidstart/src/entry-client.tsx index cbcd8f9267ca..9391faa9652d 100644 --- a/dev-packages/e2e-tests/test-applications/solidstart/src/entry-client.tsx +++ b/dev-packages/e2e-tests/test-applications/solidstart/src/entry-client.tsx @@ -1,5 +1,6 @@ // @refresh reload import * as Sentry from '@sentry/solidstart'; +import { solidRouterBrowserTracingIntegration } from '@sentry/solidstart/solidrouter'; import { StartClient, mount } from '@solidjs/start/client'; Sentry.init({ @@ -7,7 +8,7 @@ Sentry.init({ // out in production builds. dsn: 'https://public@dsn.ingest.sentry.io/1337', environment: 'qa', // dynamic sampling bias to keep transactions - integrations: [Sentry.browserTracingIntegration()], + integrations: [solidRouterBrowserTracingIntegration()], tunnel: 'http://localhost:3031/', // proxy server // Performance Monitoring tracesSampleRate: 1.0, // Capture 100% of the transactions diff --git a/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx index a6d09d5b36b5..ee2e1fb5da6b 100644 --- a/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx +++ b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx @@ -11,6 +11,11 @@ export default function Home() {
  • Client error
    • +
  • + + User 5 + +
    • ); diff --git a/dev-packages/e2e-tests/test-applications/solidstart/src/routes/users/[id].tsx b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/users/[id].tsx new file mode 100644 index 000000000000..639ab0be8118 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/users/[id].tsx @@ -0,0 +1,6 @@ +import { useParams } from '@solidjs/router'; + +export default function User() { + const params = useParams(); + return
    User ID: {params.id}
    ; +} diff --git a/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts b/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts new file mode 100644 index 000000000000..c93aa2f2b463 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts @@ -0,0 +1,93 @@ +import { expect, test } from '@playwright/test'; +import { waitForTransaction } from '@sentry-internal/test-utils'; + +test('sends a pageload transaction', async ({ page }) => { + const transactionPromise = waitForTransaction('solidstart', async transactionEvent => { + return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; + }); + + await page.goto('/'); + const pageloadTransaction = await transactionPromise; + + expect(pageloadTransaction).toMatchObject({ + contexts: { + trace: { + op: 'pageload', + origin: 'auto.pageload.browser', + }, + }, + transaction: '/', + transaction_info: { + source: 'url', + }, + }); +}); + +test('sends a navigation transaction', async ({ page }) => { + const transactionPromise = waitForTransaction('solidstart', async transactionEvent => { + return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation'; + }); + + await page.goto(`/`); + await page.locator('#navLink').click(); + const navigationTransaction = await transactionPromise; + + expect(navigationTransaction).toMatchObject({ + contexts: { + trace: { + op: 'navigation', + origin: 'auto.navigation.solid.solidrouter', + }, + }, + transaction: '/users/5', + transaction_info: { + source: 'url', + }, + }); +}); + +test('updates the transaction when using the back button', async ({ page }) => { + // Solid Router sends a `-1` navigation when using the back button. + // The sentry solidRouterBrowserTracingIntegration tries to update such + // transactions with the proper name once the `useLocation` hook triggers. + const navigationTxnPromise = waitForTransaction('solidstart', async transactionEvent => { + return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation'; + }); + + await page.goto(`/`); + await page.locator('#navLink').click(); + const navigationTxn = await navigationTxnPromise; + + expect(navigationTxn).toMatchObject({ + contexts: { + trace: { + op: 'navigation', + origin: 'auto.navigation.solid.solidrouter', + }, + }, + transaction: '/users/5', + transaction_info: { + source: 'url', + }, + }); + + const backNavigationTxnPromise = waitForTransaction('solidstart', async transactionEvent => { + return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation'; + }); + + await page.goBack(); + const backNavigationTxn = await backNavigationTxnPromise; + + expect(backNavigationTxn).toMatchObject({ + contexts: { + trace: { + op: 'navigation', + origin: 'auto.navigation.solid.solidrouter', + }, + }, + transaction: '/', + transaction_info: { + source: 'url', + }, + }); +}); From 76a359474ded82f83894f54b1c135e6bb39ee425 Mon Sep 17 00:00:00 2001 From: Andrei Borza Date: Fri, 12 Jul 2024 14:21:33 +0200 Subject: [PATCH 2/2] Assert on transaction names --- .../solidstart/src/routes/index.tsx | 5 +++++ .../solidstart/tests/performance.client.test.ts | 12 ++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx index ee2e1fb5da6b..f1635dee3b63 100644 --- a/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx +++ b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx @@ -16,6 +16,11 @@ export default function Home() { User 5 +
  • + + User 6 + +
    • ); diff --git a/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts b/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts index c93aa2f2b463..17e57ba47d8d 100644 --- a/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts +++ b/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts @@ -3,7 +3,7 @@ import { waitForTransaction } from '@sentry-internal/test-utils'; test('sends a pageload transaction', async ({ page }) => { const transactionPromise = waitForTransaction('solidstart', async transactionEvent => { - return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; + return transactionEvent?.transaction === '/' && transactionEvent.contexts?.trace?.op === 'pageload'; }); await page.goto('/'); @@ -25,7 +25,7 @@ test('sends a pageload transaction', async ({ page }) => { test('sends a navigation transaction', async ({ page }) => { const transactionPromise = waitForTransaction('solidstart', async transactionEvent => { - return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation'; + return transactionEvent?.transaction === '/users/5' && transactionEvent.contexts?.trace?.op === 'navigation'; }); await page.goto(`/`); @@ -51,11 +51,11 @@ test('updates the transaction when using the back button', async ({ page }) => { // The sentry solidRouterBrowserTracingIntegration tries to update such // transactions with the proper name once the `useLocation` hook triggers. const navigationTxnPromise = waitForTransaction('solidstart', async transactionEvent => { - return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation'; + return transactionEvent?.transaction === '/users/6' && transactionEvent.contexts?.trace?.op === 'navigation'; }); await page.goto(`/`); - await page.locator('#navLink').click(); + await page.locator('#navLinkUserBack').click(); const navigationTxn = await navigationTxnPromise; expect(navigationTxn).toMatchObject({ @@ -65,14 +65,14 @@ test('updates the transaction when using the back button', async ({ page }) => { origin: 'auto.navigation.solid.solidrouter', }, }, - transaction: '/users/5', + transaction: '/users/6', transaction_info: { source: 'url', }, }); const backNavigationTxnPromise = waitForTransaction('solidstart', async transactionEvent => { - return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation'; + return transactionEvent?.transaction === '/' && transactionEvent.contexts?.trace?.op === 'navigation'; }); await page.goBack();