Skip to content

fix: update error handling in MatchInner to access error data directly #4746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

leesb971204
Copy link
Contributor

fixes #4744

Copy link

nx-cloud bot commented Jul 22, 2025

View your CI Pipeline Execution ↗ for commit 0b6cccb

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

☁️ Nx Cloud last updated this comment at 2025-08-02 11:22:26 UTC

Copy link

pkg-pr-new bot commented Jul 22, 2025

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@4746

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@4746

@tanstack/eslint-plugin-router

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

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@4746

@tanstack/react-router

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

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@4746

@tanstack/react-router-with-query

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

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@4746

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@4746

@tanstack/react-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-plugin@4746

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@4746

@tanstack/router-cli

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

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@4746

@tanstack/router-devtools

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

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@4746

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@4746

@tanstack/router-vite-plugin

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

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@4746

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@4746

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@4746

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@4746

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@4746

@tanstack/solid-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-plugin@4746

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@4746

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@4746

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@4746

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@4746

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-client@4746

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-fetcher@4746

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-server@4746

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@4746

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@4746

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@4746

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@4746

commit: 0b6cccb

@leesb971204 leesb971204 marked this pull request as draft July 22, 2025 10:22
@leesb971204 leesb971204 force-pushed the fix/nested-notFound-data branch from 04e715a to f907711 Compare July 22, 2025 11:14
@leesb971204 leesb971204 changed the title fix(react-router): update error handling in MatchInner to access error data directly fix(: update error handling in MatchInner to access error data directly Jul 22, 2025
@leesb971204 leesb971204 changed the title fix(: update error handling in MatchInner to access error data directly fix: update error handling in MatchInner to access error data directly Jul 22, 2025
@leesb971204 leesb971204 marked this pull request as ready for review July 22, 2025 12:05
return <router.options.defaultNotFoundComponent data={data} />
return <router.options.defaultNotFoundComponent {...data} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This part causes the structure to become nested like data: { data: ... }.

export type NotFoundRouteProps = {
// TODO: Make sure this is `| null | undefined` (this is for global not-founds)
data: unknown
}
export type NotFoundRouteProps = Partial<NotFoundError>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The props can contain not only data but also any value of type NotFoundError.

Since the global not found case passes undefined, we use Partial to account for the possibility that required fields might be added to NotFoundError in the future.

@leesb971204
Copy link
Contributor Author

@schiller-manuel
@SeanCassiere

Is there anything else I should do to get a review on this?

@schiller-manuel
Copy link
Contributor

thanks for this PR!
can you please

  • add some runtime tests for the various scenarios
  • add a typetest maybe? not sure if that makes sense / is possible
  • update docs
  • add usage to the kitchen sink example

@leesb971204 leesb971204 marked this pull request as draft August 2, 2025 10:08
@leesb971204 leesb971204 force-pushed the fix/nested-notFound-data branch from 28b5de3 to a3bdffd Compare August 2, 2025 10:24
@github-actions github-actions bot added the documentation Everything documentation related label Aug 2, 2025
@@ -240,7 +240,7 @@ export const Route = createFileRoute('/posts/$postId')({
})
return { post }
},
// `data: unknown` is passed to the component via the `data` option when calling `notFound`
// `data: any` is passed to the component via the `data` option when calling `notFound`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this any instead of unknown?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is because the type of notFoundRouteProps was changed from unknown to Partial<NotFoundError>,
and the data in NotFoundError is currently typed as any.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we change it there to unknown? to force people to add some runtime type checks?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you mean it should be reverted the change?

Copy link
Contributor Author

@leesb971204 leesb971204 Aug 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I menthioned here, notFoundRouteProps can contain not only data but also any value of type NotFoundError like routeId.

or is it appropriate to convert the data type of NotFoundError to unknown?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

notFound data incorrectly typed as unknown and redundantly nested in data.data
3 participants