From c2bec114402a5b2b520ebc8eb79927566c064332 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <abdelrahman.awad@sentry.io>
Date: Wed, 17 Dec 2025 13:59:02 +0200
Subject: [PATCH] fix(tanstackrouter):  Fix ensure sending web vital
 measurements in solid tanstack router

---
 .../tests/routing-instrumentation.test.ts     | 41 +++++++++++++++++++
 packages/solid/src/tanstackrouter.ts          |  9 +++-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/dev-packages/e2e-tests/test-applications/solid-tanstack-router/tests/routing-instrumentation.test.ts b/dev-packages/e2e-tests/test-applications/solid-tanstack-router/tests/routing-instrumentation.test.ts
index 7119c7e76b99..fd81eb0f1d45 100644
--- a/dev-packages/e2e-tests/test-applications/solid-tanstack-router/tests/routing-instrumentation.test.ts
+++ b/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',
+      }),
+    }),
+  });
+});
diff --git a/packages/solid/src/tanstackrouter.ts b/packages/solid/src/tanstackrouter.ts
index 09790530e822..389ce9bb6e10 100644
--- a/packages/solid/src/tanstackrouter.ts
+++ b/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;
           }