fix(tanstack-router): Check for fromLocation existence before reporting pageload (#18463)

Bad condition which short circuits the web vitals from being reported, I
included a test anyways even though it doesn't reproduce it.

closes #18425

Closes #18464 (added automatically)???

Author: logaretm

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

@@ -35,6 +35,47 @@ test('sends a pageload transaction with a parameterized URL', async ({ page }) =
   });
 });
 
+test('sends pageload transaction with web vitals measurements', async ({ page }) => {
+  const transactionPromise = waitForTransaction('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.react.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',
+      }),
+    }),
+  });
+});
+
 test('sends a navigation transaction with a parameterized URL', async ({ page }) => {
   const pageloadTxnPromise = waitForTransaction('tanstack-router', async transactionEvent => {
     return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';

packages/react/src/tanstackrouter.ts

@@ -64,8 +64,13 @@ export function tanstackRouterBrowserTracingIntegration(
       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
         castRouterInstance.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;
           }