test(solidstart): Add client performance e2e tests (#12895)

Author: andreiborza

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"

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 (
-    <Router
+    <SentryRouter
       root={props => (
         <MetaProvider>
           <Title>SolidStart - with Vitest</Title>
@@ -14,6 +17,6 @@ export default function App() {
       )}
     >
       <FileRoutes />
-    </Router>
+    </SentryRouter>
   );
 }

dev-packages/e2e-tests/test-applications/solidstart/src/entry-client.tsx

@@ -1,13 +1,14 @@
 // @refresh reload
 import * as Sentry from '@sentry/solidstart';
+import { solidRouterBrowserTracingIntegration } from '@sentry/solidstart/solidrouter';
 import { StartClient, mount } from '@solidjs/start/client';
 
 Sentry.init({
   // We can't use env variables here, seems like they are stripped
   // out in production builds.
   dsn: 'https://[email protected]/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

dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx

@@ -11,6 +11,16 @@ export default function Home() {
         <li>
           <A href="/client-error">Client error</A>
         </li>
+        <li>
+          <A id="navLink" href="/users/5">
+            User 5
+          </A>
+        </li>
+        <li>
+          <A id="navLinkUserBack" href="/users/6">
+            User 6
+          </A>
+        </li>
       </ul>
     </>
   );

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 <div>User ID: {params.id}</div>;
+}

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 === '/users/5' && 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 === '/users/6' && transactionEvent.contexts?.trace?.op === 'navigation';
+  });
+
+  await page.goto(`/`);
+  await page.locator('#navLinkUserBack').click();
+  const navigationTxn = await navigationTxnPromise;
+
+  expect(navigationTxn).toMatchObject({
+    contexts: {
+      trace: {
+        op: 'navigation',
+        origin: 'auto.navigation.solid.solidrouter',
+      },
+    },
+    transaction: '/users/6',
+    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',
+    },
+  });
+});