fix: Redirect to 404 Page When Note is Not Found #277
Conversation
Tushar504
commented
Nov 16, 2024
Tushar504
commented
- This PR adds try catch block to redirect user to 404 not found error page as described in Issue Closes Redirect to 404 Page When Note is Not Found #276
- updates the useNote service load method.
src/application/services/useNote.ts
Outdated
| noteTools.value = response.tools; | ||
| parentNote.value = response.parentNote; | ||
| } catch (error) { | ||
| void router.push('/error'); |
There was a problem hiding this comment.
I'd suggest to separate 4xx errors and other errors. If 4xx error happen, show 404 error page. In case of other errors, show 500 "Unexpected error" page
There was a problem hiding this comment.
request you to review new changes
| /** | ||
| * Domain error thrown when some resource is not found | ||
| */ |
src/application/services/useNote.ts
Outdated
| if (error instanceof ApiError) { | ||
| void router.push('/500'); | ||
| } else { | ||
| void router.push('/400'); | ||
| } |
There was a problem hiding this comment.
we do not have /400 route, so it triggers this one path: '/:pathMatch(.*)*',
also it's better to have one page for all errors (and we already have ErrorPage component that takes status code as a property).
No need to make separate /500 route, just create /error route, that could be reusable for other errors in future
There was a problem hiding this comment.
request you to review new changes
src/application/router/routes.ts
Outdated
| path: '/error', | ||
| component: ErrorPage, | ||
| meta: { | ||
| layout: 'fullpage', | ||
| pageTitleI18n: 'pages.notFound', | ||
| pageTitleI18n: 'pages.error', | ||
| discardTabOnLeave: true, | ||
| }, | ||
| props: { | ||
| code: 404, | ||
| }, | ||
| props: route => ({ | ||
| code: route.query.code, | ||
| customMessage: route.query.message, | ||
| }), |
There was a problem hiding this comment.
404 page was actually needed (this was a syntax for each unexpected url, that would show 404 page not found)
we need to create separate /error page, that should have statusCode property and show different info by different status code
There was a problem hiding this comment.
also better to use route.params for code prop
