fix: fix primitive beforeLoad errors (#7505)

* fix: fix primitive beforeLoad errors

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: schiller-manuel

.changeset/primitive-beforeload-errors.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/router-core': patch
+'@tanstack/react-router': patch
+'@tanstack/react-start': patch
+---
+
+Preserve primitive values thrown from beforeLoad error handling.

e2e/react-start/basic/src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as TypeOnlyReexportRouteImport } from './routes/type-only-reexpor
 import { Route as StreamRouteImport } from './routes/stream'
 import { Route as ScriptsRouteImport } from './routes/scripts'
 import { Route as RawStreamRouteImport } from './routes/raw-stream'
+import { Route as PrimitiveBeforeloadErrorRouteImport } from './routes/primitive-beforeload-error'
 import { Route as PostsRouteImport } from './routes/posts'
 import { Route as PlainTsTypeAssertionRouteImport } from './routes/plain-ts-type-assertion'
 import { Route as LinksRouteImport } from './routes/links'
@@ -104,6 +105,12 @@ const RawStreamRoute = RawStreamRouteImport.update({
   path: '/raw-stream',
   getParentRoute: () => rootRouteImport,
 } as any)
+const PrimitiveBeforeloadErrorRoute =
+  PrimitiveBeforeloadErrorRouteImport.update({
+    id: '/primitive-beforeload-error',
+    path: '/primitive-beforeload-error',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const PostsRoute = PostsRouteImport.update({
   id: '/posts',
   path: '/posts',
@@ -451,6 +458,7 @@ export interface FileRoutesByFullPath {
   '/links': typeof LinksRoute
   '/plain-ts-type-assertion': typeof PlainTsTypeAssertionRoute
   '/posts': typeof PostsRouteWithChildren
+  '/primitive-beforeload-error': typeof PrimitiveBeforeloadErrorRoute
   '/raw-stream': typeof RawStreamRouteWithChildren
   '/scripts': typeof ScriptsRoute
   '/stream': typeof StreamRoute
@@ -517,6 +525,7 @@ export interface FileRoutesByTo {
   '/inline-scripts': typeof InlineScriptsRoute
   '/links': typeof LinksRoute
   '/plain-ts-type-assertion': typeof PlainTsTypeAssertionRoute
+  '/primitive-beforeload-error': typeof PrimitiveBeforeloadErrorRoute
   '/scripts': typeof ScriptsRoute
   '/stream': typeof StreamRoute
   '/type-only-reexport': typeof TypeOnlyReexportRoute
@@ -582,6 +591,7 @@ export interface FileRoutesById {
   '/links': typeof LinksRoute
   '/plain-ts-type-assertion': typeof PlainTsTypeAssertionRoute
   '/posts': typeof PostsRouteWithChildren
+  '/primitive-beforeload-error': typeof PrimitiveBeforeloadErrorRoute
   '/raw-stream': typeof RawStreamRouteWithChildren
   '/scripts': typeof ScriptsRoute
   '/stream': typeof StreamRoute
@@ -654,6 +664,7 @@ export interface FileRouteTypes {
     | '/links'
     | '/plain-ts-type-assertion'
     | '/posts'
+    | '/primitive-beforeload-error'
     | '/raw-stream'
     | '/scripts'
     | '/stream'
@@ -720,6 +731,7 @@ export interface FileRouteTypes {
     | '/inline-scripts'
     | '/links'
     | '/plain-ts-type-assertion'
+    | '/primitive-beforeload-error'
     | '/scripts'
     | '/stream'
     | '/type-only-reexport'
@@ -784,6 +796,7 @@ export interface FileRouteTypes {
     | '/links'
     | '/plain-ts-type-assertion'
     | '/posts'
+    | '/primitive-beforeload-error'
     | '/raw-stream'
     | '/scripts'
     | '/stream'
@@ -856,6 +869,7 @@ export interface RootRouteChildren {
   LinksRoute: typeof LinksRoute
   PlainTsTypeAssertionRoute: typeof PlainTsTypeAssertionRoute
   PostsRoute: typeof PostsRouteWithChildren
+  PrimitiveBeforeloadErrorRoute: typeof PrimitiveBeforeloadErrorRoute
   RawStreamRoute: typeof RawStreamRouteWithChildren
   ScriptsRoute: typeof ScriptsRoute
   StreamRoute: typeof StreamRoute
@@ -907,6 +921,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof RawStreamRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/primitive-beforeload-error': {
+      id: '/primitive-beforeload-error'
+      path: '/primitive-beforeload-error'
+      fullPath: '/primitive-beforeload-error'
+      preLoaderRoute: typeof PrimitiveBeforeloadErrorRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/posts': {
       id: '/posts'
       path: '/posts'
@@ -1620,6 +1641,7 @@ const rootRouteChildren: RootRouteChildren = {
   LinksRoute: LinksRoute,
   PlainTsTypeAssertionRoute: PlainTsTypeAssertionRoute,
   PostsRoute: PostsRouteWithChildren,
+  PrimitiveBeforeloadErrorRoute: PrimitiveBeforeloadErrorRoute,
   RawStreamRoute: RawStreamRouteWithChildren,
   ScriptsRoute: ScriptsRoute,
   StreamRoute: StreamRoute,

e2e/react-start/basic/src/routes/primitive-beforeload-error.tsx

@@ -0,0 +1,21 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/primitive-beforeload-error')({
+  beforeLoad: () => {
+    throw 'primitive beforeLoad error'
+  },
+  component: () => {
+    return (
+      <div data-testid="primitive-beforeload-route-component">
+        This should not render.
+      </div>
+    )
+  },
+  errorComponent: ({ error }) => {
+    return (
+      <div data-testid="primitive-beforeload-error-component">
+        {String(error)}
+      </div>
+    )
+  },
+})

e2e/react-start/basic/start-mode-config.ts

@@ -32,6 +32,7 @@ export function getStartModeConfig() {
               '/redirect',
               '/i-do-not-exist',
               '/not-found',
+              '/primitive-beforeload-error',
               '/specialChars/search',
               '/specialChars/hash',
               '/specialChars/malformed',

e2e/react-start/basic/tests/error-component.spec.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test'
+import { test } from '@tanstack/router-e2e-utils'
+import { isSpaMode } from './utils/isSpaMode'
+
+test.use({
+  whitelistErrors: [
+    'Failed to load resource: the server responded with a status of 500',
+    'primitive beforeLoad error',
+  ],
+})
+
+test('beforeLoad primitive throw renders error component on direct visit', async ({
+  page,
+}) => {
+  const response = await page.goto('/primitive-beforeload-error')
+  await page.waitForLoadState('networkidle')
+
+  expect(response?.status()).toBe(isSpaMode ? 200 : 500)
+  await expect(
+    page.getByTestId('primitive-beforeload-error-component'),
+  ).toHaveText('primitive beforeLoad error')
+  await expect(
+    page.getByTestId('primitive-beforeload-route-component'),
+  ).not.toBeInViewport()
+})

packages/react-router/tests/errorComponent.test.tsx

@@ -1,5 +1,6 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import ReactDOMServer from 'react-dom/server'
 
 import {
   Link,
@@ -28,6 +29,10 @@ function throwFn() {
   throw new Error('error thrown')
 }
 
+function primitiveThrowFn() {
+  throw 'primitive error thrown'
+}
+
 let history: RouterHistory
 
 beforeEach(() => {
@@ -262,6 +267,83 @@ describe.each([true, false])(
   },
 )
 
+test('errorComponent receives primitive errors thrown from beforeLoad', async () => {
+  const rootRoute = createRootRoute()
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: function Home() {
+      return (
+        <div>
+          <Link to="/about">link to about</Link>
+        </div>
+      )
+    },
+  })
+  const aboutRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/about',
+    beforeLoad: primitiveThrowFn,
+    component: function About() {
+      return <div>About route content</div>
+    },
+    errorComponent: ({ error }) => <div>Error: {String(error)}</div>,
+  })
+
+  const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+  const router = createRouter({
+    routeTree,
+    history,
+  })
+
+  render(<RouterProvider router={router} />)
+
+  const linkToAbout = await screen.findByRole('link', {
+    name: 'link to about',
+  })
+
+  await act(() => fireEvent.click(linkToAbout))
+
+  expect(
+    await screen.findByText('Error: primitive error thrown', undefined, {
+      timeout: 750,
+    }),
+  ).toBeInTheDocument()
+  expect(screen.queryByText('About route content')).not.toBeInTheDocument()
+})
+
+test('SSR errorComponent receives primitive errors thrown from beforeLoad', async () => {
+  const history = createMemoryHistory({ initialEntries: ['/about'] })
+  const rootRoute = createRootRoute({
+    component: function Root() {
+      return <Outlet />
+    },
+  })
+  const aboutRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/about',
+    beforeLoad: primitiveThrowFn,
+    component: function About() {
+      return <div>About route content</div>
+    },
+    errorComponent: ({ error }) => <div>Error: {String(error)}</div>,
+  })
+
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([aboutRoute]),
+    history,
+  })
+  router.isServer = true
+
+  await router.load()
+
+  expect(router.state.statusCode).toBe(500)
+  const html = ReactDOMServer.renderToString(<RouterProvider router={router} />)
+  expect(html).toContain('Error:')
+  expect(html).toContain('primitive error thrown')
+})
+
 describe('notFoundComponent is rendered when an error is thrown in params.parse', () => {
   test('displays notFoundComponent when error is thrown in params.parse', async () => {
     const history = createMemoryHistory({ initialEntries: ['/'] })

packages/router-core/src/load-matches.ts

@@ -207,7 +207,6 @@ const handleSerialError = (
   inner: InnerLoadContext,
   index: number,
   err: any,
-  routerCode: string,
 ): void => {
   const { id: matchId, routeId } = inner.matches[index]!
   const route = inner.router.looseRoutesById[routeId]!
@@ -219,7 +218,6 @@ const handleSerialError = (
     throw err
   }
 
-  err.routerCode = routerCode
   inner.firstBadMatchIndex ??= index
   handleRedirectAndNotFound(inner, inner.router.getMatch(matchId), err)
 
@@ -405,11 +403,11 @@ const executeBeforeLoad = (
   const { paramsError, searchError } = match
 
   if (paramsError) {
-    handleSerialError(inner, index, paramsError, 'PARSE_PARAMS')
+    handleSerialError(inner, index, paramsError)
   }
 
   if (searchError) {
-    handleSerialError(inner, index, searchError, 'VALIDATE_SEARCH')
+    handleSerialError(inner, index, searchError)
   }
 
   setupPendingTimeout(inner, matchId, route, match)
@@ -499,7 +497,7 @@ const executeBeforeLoad = (
     }
     if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
       pending()
-      handleSerialError(inner, index, beforeLoadContext, 'BEFORE_LOAD')
+      handleSerialError(inner, index, beforeLoadContext)
     }
 
     inner.router.batch(() => {
@@ -519,13 +517,13 @@ const executeBeforeLoad = (
       pending()
       return beforeLoadContext
         .catch((err) => {
-          handleSerialError(inner, index, err, 'BEFORE_LOAD')
+          handleSerialError(inner, index, err)
         })
         .then(updateContext)
     }
   } catch (err) {
     pending()
-    handleSerialError(inner, index, err, 'BEFORE_LOAD')
+    handleSerialError(inner, index, err)
   }
 
   updateContext(beforeLoadContext)

packages/router-core/tests/load.test.ts

@@ -173,6 +173,42 @@ describe('beforeLoad skip or exec', () => {
     expect(beforeLoad).toHaveBeenCalledTimes(1)
   })
 
+  test('preserves primitive errors thrown from beforeLoad', async () => {
+    const beforeLoad = vi.fn<BeforeLoad>(() => {
+      throw 'primitive error'
+    })
+    const router = setup({ beforeLoad })
+
+    await router.navigate({ to: '/foo' })
+
+    expect(router.state.statusCode).toBe(500)
+    expect(router.state.matches).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: '/foo/foo',
+          status: 'error',
+          error: 'primitive error',
+        }),
+      ]),
+    )
+  })
+
+  test('does not mutate object errors thrown from beforeLoad', async () => {
+    const thrown = { type: 'domain-error' }
+    const beforeLoad = vi.fn<BeforeLoad>(() => {
+      throw thrown
+    })
+    const router = setup({ beforeLoad })
+
+    await router.navigate({ to: '/foo' })
+
+    expect(router.state.statusCode).toBe(500)
+    expect(router.state.matches.find((d) => d.id === '/foo/foo')?.error).toBe(
+      thrown,
+    )
+    expect(thrown).toEqual({ type: 'domain-error' })
+  })
+
   test('exec if resolved preload (success)', async () => {
     const beforeLoad = vi.fn()
     const router = setup({ beforeLoad })