Appointments React App Does Not Handle Unknown URLs

Description

Currently, an HTTP 404 error code is generated by the VA web server if a veteran tries to access an unknown or bad URL on the VA site for a static content page (e.g. https://www.va.gov/dummy). The web server is set up to respond to HTTP 404 error codes by showing a "page not found" page to the user as shown below. This works well for static content served by the web server. However, dynamic content that gets rendered on the client side (like from a React app) cannot generate HTTP codes for missing pages for the web server to respond to. All React apps that the VA site uses render on the client side. Each React app has a specified root URL in its manifest.json file (e.g./health-care/schedule-view-va-appointments/) that links to the app regardless of any sub-path provided in the URL (e.g. /health-care/schedule-view-va-appointments//path/path/path leads to the same React app). The apps use React Router conditional code to render content based on the child path(s) of the root URL (e.g. /path/path/path). An empty or incomplete page can result if the app’s routing logic does not explicitly handle the provided path(s). A sample of this behavior can be found below.

This results in the VA site rendering empty or incomplete pages with no further information or action for the user.

Recommendation

React apps have various routing patterns that restrict our ability to implement a catch-all solution at the React Router level. These various patterns also mean that the routing for some apps may need to be refactored in order to properly handle unknown URLs. Our recommendation is as follows:

Create a shared page-not-found component to be used by all React apps. This component should replicate the existing static content 404 page for a consistent user experience.
Update each app to have a default React route that shows this new page-not-found component. This may need to be done for child paths as well. This implementation will retain the unknown URL in the browser’s address bar allowing the user to inspect/fix the URL. This will also duplicate the existing behavior of the static content 404 page. For example, we can add the following default route to an app to serve the page-not-found component for unknown URLs.

Add documentation requiring a default route for all React apps and to use the shared page-not-found component. It should be noted that the page-not-found page should contain any other app content (some apps generate content like breadcrumbs before the routing logic). It also needs to be noted to generate the page-not-found page for any child routing that is not supported.
Open tickets to get the different React apps updated to have default routes. This could be done by one team updating all the apps or individual tickets for each app. A lot of the apps can be quickly and easily updated since they have simple routing, so perhaps one person can update a lot of them at the same time.

Slack Canvas outlining issue and ask

Acceptance Criteria

Given an authenticated user When navigating to an unknown or bad URL starting with va.gov/my-health/appointments/ Then page-not-found component is displayed

Design Assets

All spec copy is FPO. Use copy in copy doc.

Definition of Done

[ ] All acceptance criteria are met
[ ] Documentation is updated

How to configure this issue

[ ] Attached to an Epic (what body of work is this a part of?)
[ ] Labeled with Practice Area (backend, frontend, devops, design, research, product, ia, qa, analytics, contact center, research, accessibility, content)
[x] Labeled with Type (bug, request, discovery, documentation, etc.)

department-of-veterans-affairs / va.gov-team