NotFound Error bubbling
I'm finding it really confusing trying to get the error behaviour I'd like. I'd essentially like a unmatched route to fall back to its closest error handler. Most of the time I want to use the base 404 error page like
notFoundMode: 'root' provides. However I'd like to for certain routes handle not found differently. Say someone went to /posts/5 I want to be able to specify an error page on the /posts and have it handle the error in its outlet. For all other outlets though, unless specified it should fall back to the main error handler.
I've no idea where I'm going wrong, I feel like I've tried just about everything but I guess I'm not understanding how error handling works.19 Replies
extended-salmonOP•3mo ago
I'm using code based routing rather than file based routing
adverse-sapphire•3mo ago
can you provide a complete minimal example of what you tried? ideally by forking one of the existing stackblitz examples
extended-salmonOP•3mo ago
sure I'll try modify one of them
extended-salmonOP•3mo ago
https://stackblitz.com/edit/tanstack-router-kydgccqf?file=src%2Fmain.tsx
So on here I'd have expected (I think) when you click on "To Non existing post" that it would render the PostNotFoundComponent inside the main layout. But click on the "Non Existing" link should bubble up all the wya and display the main error. Only the latter appears to happen.
Then when clicking on the non-existing person route, since this doesn't have an error handler it should also bubble up to the main error handler.
In the example code it appears everything works except rendering the correct error in the posts outlet, it seems to use the default error
jon.taylor.1985@gmail.com
StackBlitz
Error Bubbling - StackBlitz
Run official live example code for Router Basic, created by Tanstack on StackBlitz
adverse-sapphire•3mo ago
So on here I'd have expected (I think) when you click on "To Non existing post" that it would render the PostNotFoundComponent inside the main layouthm no. this would only be the case if you throw a notFound in a
/posts/$postId
if router cannot match a route to a url, it will just default to the root not found handling
it does not try to find the closest valid route
i mean we could theoretically implement thisextended-salmonOP•3mo ago
hm ok, I was incorrectly assuming that when a path didn't match it would search up till it found an component that had both an outlet and an error component on it and render there.
So if I wanted this behaviour I'd presumably onload or somewhere
throw notFound() do I have to tell it how to handle this?adverse-sapphire•3mo ago
router cannot know if a routecomponent would render an Outlet
So if I wanted this behaviour I'd presumably onload or somewhere throw notFound() do I have to tell it how to handle this?you would throw this in a loader, yes because only when you try to load the data you know it doesnt exist i mean that's the assumption here
extended-salmonOP•3mo ago
ok thanks, I hadn't thought about the router not knowing about the outlets, but it makes sense. I'll igve that a go
can I throw the error inside the component too or does it have to be in the routers loader / beforeload etc?
adverse-sapphire•3mo ago
it would have to be in one of the router lifecycle method loder/beforeLoad
extended-salmonOP•3mo ago
ok so I'd have to move my data loading into the router lifecycle methods rather than having the useQuery hooks in my component?
adverse-sapphire•3mo ago
you should do that anyhow 😄
so you can benefit from preloading
extended-salmonOP•3mo ago
Yeah I've been trying to minimise some of the changes my team would need to get used to as they've been resistant to moving to tanstack router. 🙂 so left all the data loading in components for now. But will look to move it
adverse-sapphire•3mo ago
but you raise an interesting question, maybe @TkDodo 🔮 can jump in here
if you want to use router's notFound handling, how would you do this with query?
oh i just read the docs 😄
adverse-sapphire•3mo ago
adverse-sapphire•3mo ago
extended-salmonOP•3mo ago
I tried using the CatchNotFound earlier but had no clue where I was meant to be using it, if I was even meant to be. It didn't seem to have any effect when I had it and throw a notFound error inside it. But likely I was doing something wrong
extended-salmonOP•3mo ago
https://stackblitz.com/github/tanstack/router/tree/main/examples/react/basic?embed=1&theme=dark&preset=node&file=src/routes/__root.tsx
I think it works when I specifically type the path /posts/1 on the end of the URL, in which case I get the error caught. But if I click on a nav link I'm guessing the router instead catches the error and it gets handled completely differently (by the default error handler it seems).
I'm not sure why I'm finding the error handling so unintuitive when i find the rest of router great. I'm obviously missing something in my understanding of what's going on. Sorry.
StackBlitz
Router Basic Example - StackBlitz
Run official live example code for Router Basic, created by Tanstack on StackBlitz
adverse-sapphire•3mo ago
I think it works when I specifically type the path /posts/1 on the end of the URL, in which case I get the error caught. But if I click on a nav link I'm guessing the router instead catches the error and it gets handled completely differently (by the default error handler it seems).this might just be a bug then if it behaves differently upon hard load vs. navigation can you please create a github issue for this?
extended-salmonOP•3mo ago
sure, I'll test locally make sure I'm seeing the same and then will raise a ticket.