fix(react-router): Pass SearchParamError#cause in validateSearch

[KubaJastrz]

What

Ensure that SearchParamError#cause contains the original parsing error thrown/returned by the validateSearch implementation configured by the user. Notable example: passing valibot schema directly without an adapter.

validateSearch: object({ ... }) // when this failed, it did not contain the proper `cause` field on the error

Why

It's useful to know what happened, because the error can be accessed with Route.errorComponent or Route.onError. Also for consistency with other implementations of validateSearch.

How

1. Add missing cause to the SearchParamError thrown by validateSearch
2. Do not wrap instances of SearchParamError in another SearchParamError
3. Add tests for ~standard, validator fn, validator obj

[schiller-manuel]

can you add a test please?

[KubaJastrz]

Thanks for the suggestion. Adding the test for ~standard parsing revealed another problem that would prevent my initial change from working. Apparently the SearchParamError thrown by validateSearch were wrapped in another SearchParamError, messing with the cause field.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 3beb0d0.

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	4m 47s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	1m	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-14 19:01:46 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-file-based-codesplitting
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsc
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-large
• tanstack-start-example-counter
• tanstack-start-example-supabase-basic
• tanstack-start-example-trellaux
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc-react-query
• tanstack-router-react-example-with-trpc

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@3155

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@3155

@tanstack/create-router

npm i https://pkg.pr.new/@tanstack/create-router@3155

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@3155

@tanstack/react-cross-context

npm i https://pkg.pr.new/@tanstack/react-cross-context@3155

@tanstack/create-start

npm i https://pkg.pr.new/@tanstack/create-start@3155

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@3155

@tanstack/react-router-with-query

npm i https://pkg.pr.new/@tanstack/react-router-with-query@3155

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@3155

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@3155

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@3155

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@3155

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@3155

@tanstack/start

npm i https://pkg.pr.new/@tanstack/start@3155

@tanstack/start-vite-plugin

npm i https://pkg.pr.new/@tanstack/start-vite-plugin@3155

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@3155

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@3155

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@3155

commit: 3beb0d0