Handle 404s in Remix with CatchBoundaries
Currently, if we try to navigate to a post that doesn't exist, we just stay on the New page. We need to a way to catch those and tell our users that they are access in a route that doesn't exist.
We will create a simple function that returns a div saying Uh oh! and have that get rendered when a user navigates to a page that doesn't exist.
Kent C. Dodds: [0:00] What does happen in the case where we don't have a post? We're trying to get to a page that does not exist.
[0:08] We're going to basically be presented with the new UI, because that's basically what the new UI is. It's treating the post as undefined. Everything is going to think that we're trying to create a post, and it actually will work, but that's not really what we're trying to do.
[0:23] What I'd rather do is have some 404 UI right in here saying, "Hey, you're using a post that doesn't exist." That's what we're going to do. I'm going to jump down all the way to the bottom of the file. We're going to export a function called a CatchBoundary. This is going to handle our error for us.
[0:39] We're going to return a div that says, "Uh oh!" and then we have to signal to Remix that we actually want it to render this instead of our regular default export. The way we do that is by throwing. It's called a CatchBoundary for a reason.
[0:54] Here, we'll say, if there's not a post, then we'll throw a new Response. We can call it whatever we want, 'Not Found', and what we're going to put in here is a status of a 404 because that's exactly what it is. It's not found.
[1:10] Then, we'll jump down here to the bottom. We can actually get that thrown Response using this hook called useCatch. That's coming from remix-run/react. We'll get our caught thing via useCatch. Then, we can say if the caught.status is 404, then we can return "Uh oh! This post does not exist!"
[1:35] If it doesn't equal 404, then we're getting called in this CatchBoundary in an unexpected situation. It's unlikely to happen, but it's probably better to just fail fast. We'll throw a new error, "Unsupported thrown response status code", and we can say caught.status. Cool.
[1:54] Let's go over here. Oh, my goodness. There it is, "Uh oh! This post does not exist!" Maybe we could actually add the params. Let's say params = useParams. We can say, "The post with the slug '{params.slug}' does not exist!'' We'll put that in quotes. Here we go.
[2:14] Coming over there, "The post of the slug 'does-not-exist' does not exist!'' Amazing. If we navigate to one of these other pages, it totally works. If we try to change something, then boom, "This...does not exist!"
[2:26] What's cool about this is the rest of the app still works. We just have this nested part of our app that says, "Hey, this part of the app can't get the data that it's looking for because the data it's looking for does not exist."
[2:37] In review, what we do with this to go into a CatchBoundary is you throw a Response. That thrown response is made accessible by the special export called CatchBoundary.
[2:48] You use this useCatch hook, and that caught response is available to you, so you can render what makes sense and then throw everything else.