Router - Conditionally throwing an error in validateSearch does not call the errorComponent

[angelsvirkov]

Which project does this relate to?

Router

Describe the bug

Conditionally throwing an error inside the validateSearch function does not lead to errorComponent being invoked. This refers only to the usage of validateSearch function only without an adapter (see additional context.)

Here is a bug reproduction use case. Let's say I have an optional url search parameter which is called testParam and I have the following specification:

• if testParam does not exist in the url, render the route as usual, since it is an optional param
• else when testParam exists in the url, validate and throw an error if it is not equal to the accepted value of 1

Currently, this does not invoke the errorComponent and the error is swallowed. I read all of the docs and dozen issues/ discussions and I am inclined to believe that there is a bug which prevents this basic logic.

Additionally, if we use retainSearchParams as a middleware, then the retainSearchParams are crashing the whole application because the const result = next(search); yields undefined and then in result leads to a TypeError inside searchMiddleware.ts

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-7agcvc?file=src%2Froutes%2Fabout.tsx&preset=node

Steps to Reproduce the Bug or Issue

1. Go to the example link
2. Take a look at the routes/about.tsx file
3. Reload the client with the following url search param ?testParam=2 (only testParam=1 should be accepted)
4. Take a look at the rendered UI and the about router body (the errorComponent is not invoked)

Expected behavior

As I user I would expect that whenever I throw an error from validateSearch I would immediately trigger the errorComponent so that I can validate and throw errors in certain conditions. Instead, what happens is that the error is swallowed and ignored, which makes me doubt the usefulness of validateSearch.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 131

Additional context

It looks like this issue is only happening when using a function for validateSearch, but not when using a ValidatorAdapter object with a parse method

const searchAdapter: ValidatorAdapter = {
  types: {
    input: { ... },
    output: { ... }
  },
  parse: (search: unknown) => {
     // works as expected
     throw new Error('...')
  },
};

export const  Route = createFileRoute('...')({
  validateSearch: searchAdapter
})