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
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
| /** | ||
| * Domain error thrown when unknown error occurs | ||
| */ | ||
| export default class ApiError extends DomainError { | ||
| /** |
There was a problem hiding this comment.
i think, that DomainError actually extends ApiError
There was a problem hiding this comment.
Actually, currently it is not needed, I had created the ApiError to consider it as default error, to check api error response is instance of ApiError or not,
src/application/services/useNote.ts
Outdated
| parentNote.value = response.parentNote; | ||
| } catch (error) { | ||
| if (error instanceof NotFoundError) { | ||
| void router.push(`/error/404?message=${error.message}`); |
There was a problem hiding this comment.
It's better to specify error message directly, instead of using error.message. And use i18n for that.
Other code looks good for me
There was a problem hiding this comment.
i have removed that custom message, now it will get message based on code , in this case it will be 'Page not found'(i18n), is it ok
| }, | ||
| props: route => ({ | ||
| code: route.params.code, | ||
| customMessage: route.query.message, |
There was a problem hiding this comment.
I dont see where ?message is composed. And it's better to use a prop instead of adding a message to the URL.
There was a problem hiding this comment.
you want 'page not found' message right, so on error component it is getting that message from i18n based on error code, if you want custom message then we can pass it as query
