SolidJS•2mo ago

Handling 404 within existing catch-all route

Wondering what the pattern/best approach is for displaying a 404 page/component within a catch-all route. Using solid start/<FileRoutes>, if I have a number of static file routes, and an [...index].tsx catch-all to handle the CMS routes. Can't have another catch-all (right?) rough setup is:

// [...index].tsx

export default function Home(props: RouteSectionProps) {
  const data = createAsync(()=>getPageData(props.params.index))


  return (
    ...
  )

}

// [...index].tsx

export default function Home(props: RouteSectionProps) {
  const data = createAsync(()=>getPageData(props.params.index))


  return (
    ...
  )

}

Thought just using <Show when={data()} fallback={<NotFound/>}>.... but not sure if thats the right approach? Could throw an error in the getPageData function and it gets handled in an ErrorBoundary?

4 Replies

Madaxen86•2mo ago

Yep. If getPageData throws or returns a response with 4xx or 5xx an ErrorBoundary will handle the error and render the fallback.

wciftoOP•2mo ago

Great thank you. I was also thinking a combination of both a Show and ErrorBoundary as well. For example 2 scenarios: - CMS response is ok, just no data/no route exists --> <Show> renders a NotFound component - CMS response throws error/4xx/5xx, bigger problem at hand --> <ErrorBoundary> displays some more error-specific information than NotFound

Madaxen86•2mo ago

Wrap the page also in a Suspense as data will be undefined until it has resolved. Otherwise you'll be showing your NotFound while fetching. Alternatively. You can check in getPageData if the response has data and throw if not. Keeps your page cleaner.

wciftoOP•2mo ago

Thanks!

Gaming

Programming

Handling 404 within existing catch-all route