fix(solid/tanstackrouter): Ensure web vitals are sent on pageload

dev-packages/e2e-tests/test-applications/solid-tanstack-router/tests/routing-instrumentation.test.ts

@@ -70,3 +70,44 @@ test('sends a navigation transaction with a parameterized URL', async ({ page })
     },
   });
 });
+
+test('sends pageload transaction with web vitals measurements', async ({ page }) => {
+  const transactionPromise = waitForTransaction('solid-tanstack-router', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto(`/`);
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toMatchObject({
+    contexts: {
+      trace: {
+        op: 'pageload',
+        origin: 'auto.pageload.solid.tanstack_router',
+      },
+    },
+    transaction: '/',
+    transaction_info: {
+      source: 'route',
+    },
+    measurements: expect.objectContaining({
+      ttfb: expect.objectContaining({
+        value: expect.any(Number),
+        unit: 'millisecond',
+      }),
+      lcp: expect.objectContaining({
+        value: expect.any(Number),
+        unit: 'millisecond',
+      }),
+      fp: expect.objectContaining({
+        value: expect.any(Number),
+        unit: 'millisecond',
+      }),
+      fcp: expect.objectContaining({
+        value: expect.any(Number),
+        unit: 'millisecond',
+      }),
+    }),
+  });
+});

packages/solid/src/tanstackrouter.ts

@@ -63,8 +63,13 @@ export function tanstackRouterBrowserTracingIntegration<R extends AnyRouter>(
       if (instrumentNavigation) {
         // The onBeforeNavigate hook is called at the very beginning of a navigation and is only called once per navigation, even when the user is redirected
         router.subscribe('onBeforeNavigate', onBeforeNavigateArgs => {
-          // onBeforeNavigate is called during pageloads. We can avoid creating navigation spans by comparing the states of the to and from arguments.
-          if (onBeforeNavigateArgs.toLocation.state === onBeforeNavigateArgs.fromLocation?.state) {
+          // onBeforeNavigate is called during pageloads. We can avoid creating navigation spans by:
+          // 1. Checking if there's no fromLocation (initial pageload)
+          // 2. Comparing the states of the to and from arguments
+          if (
+            !onBeforeNavigateArgs.fromLocation ||
+            onBeforeNavigateArgs.toLocation.state === onBeforeNavigateArgs.fromLocation.state
+          ) {
             return;
           }