Create 404 page route
Related: #3101 (closed)
What's changing in this MR
- Created new /404 page - file
- Changed error handling on pages to manually redirect to 404 and not use Nuxt's built in error handling
- Updated our 'fallback' from built-in Nuxt error handling to our new 404 page - file
Why are we making this change?
In prod, our 404 page is missing content from the navigation and footer. This is caused by the way we are bringing in Contentful data.
A variety of attempts got things working locally, but not once the site was built. This indicated that there was something missing between server-generated (local) and static (prod).
This MR creates a 404 route, whereas before, Nuxt was able to sneak our error.vue component on top of broken routes. We are removing Nuxt's built-in error handling and managing this ourselves through telling our config about the route we would like to fall back to.
This did introduce a problem where our local server could not route correctly to the 404 page, and even by doing so, developers would lose some helpful dev console errors that we use to troubleshoot issues with. I have kept the Nuxt error handling in place for our local servers only. This is why that layout/error.vue file has not been deleted.
I will be adding some documentation in both /layouts/error.vue and /pages/404.vue so it is clear how these work with each other.
Additional notes
To keep the nav and footer working locally on the error page, an MR was created in the Navigation repo to help the CMS content re-fire. There should not be any side effects for this when our site is in prod.
Testing
New 404 page: https://create-404-route.about.gitlab-review.app/404/
- Open this MR's review app
- Add some random text to go to a broken page (ex:
https://create-404-route.about.gitlab-review.app/abc123 - You should be redirected to a 404 page with a working nav and footer
💃