Let devs define custom 404 page in Wasp

[infomiho]

We could implement it like we implemented the rootComponent #1009

app todoApp {
    client: {
        notFoundPage: import { NotFoundPage } from "@client/NotFoundPage.jsx"
    }
}

or

app todoApp {
    client: {
        notFoundPage: NotFoundPage
    }
}
page NotFoundPage {
    component: import { NotFoundPage } from "@client/NotFoundPage.jsx"
}

For React Router v5, we would need to define a new route like this:

<Route path="*">
    <NotFoundPage />
</Route>

[fecony]

app todoApp {
    client: {
        notFoundPage: NotFoundPage
    }
}

Maybe it would make more sense to define it for corresponding error codes? 500 / 404 / 403 / ...

app todoApp {
client: {
404: import { 404 } from "@client/Errors",
500: import { 500 } from "@client/pages/errors/500"
}
}

Also it would be cool to define single error page and get error/exception as prop to display error code/message/etc

app todoApp {
  client: {
    error: import ErrorPage from "@client/ErrorPage",
  }
}

Then in ErrorPage

export default function ErrorPage({ error }) {
  return (<h1>Oh no {error->code} occurred</h1>);
}

[Martinsos]

Yeah I like the last idea, that is probably the best!

Aha wait, I know why we have special rule for 404 -> because that can happen by them going to wrong route and they can't handle that right now. Other errors they can't really get, those can come from server but they can handle them as they come, and as they like, in JS. Right? Or did I get something wrong here? Keep in mind this is an SPA.

[fecony]

Yeah I like the last idea, that is probably the best!

Aha wait, I know why we have special rule for 404 -> because that can happen by them going to wrong route and they can't handle that right now. Other errors they can't really get, those can come from server but they can handle them as they come, and as they like, in JS. Right? Or did I get something wrong here? Keep in mind this is an SPA.

Yes, makes sense. I just through about handling errors but forgot that server lives separetely So just look at 404 error I think, However some cases like 401/403 would make sense as well, if user tries to access page but it has auth: true sooo we handle it on frontend when get user from hook

[Martinsos]

Should we by default already have some kind of 404 handler? I think so.

[infomiho]

The way users can implement wildcard routes in Wasp is quite simple, we might want to document this in the docs, or include it in our default template?

route WildcardRoute { path: "*", to: WildcardPage }
page WildcardPage {
  component: import { WildcardPage } from "@src/Test"
}

[Martinsos]

The way users can implement wildcard routes in Wasp is quite simple, we might want to document this in the docs, or include it in our default template?

route WildcardRoute { path: "*", to: WildcardPage }
page WildcardPage {
  component: import { WildcardPage } from "@src/Test"
}

Just to mention that this likely then needs to be the last route in main.wasp file!

[sodic]

User requesting this:

• https://discord.com/channels/686873244791210014/1238173111363305574/1238173111363305574

[infomiho]

The wildcard route is a way to go, but in the current Wasp implementation, the catch-all route triggers before the OAuth route we require by Wasp to finish the OAuth flow.

We should probably move the Wasp defined routes at the first place so they don't get overridden by user-defined routes.