4540 [Feature] Trap errors on the react side to avoid the white screen of death

[Sun-Mountain]

Resolves #4540

Description

When issues are thrown on the frontend, they currently cause a white screen of death and you have to do a hard refresh or remove parts of the URL to navigate back to a viewable page. If an error is thrown on the frontend the user is taken to an error page and they can navigate to a safe page from there.

Chromatic Link

https://www.chromatic.com/build?appId=61d5b948cf6f17003a12bf77&number=1498

Automated test cases written

Given	When	Then	Type (jest, tap, cypress)
An error is thrown	by incomplete code	should throw an error page where it's easier to go to another page	jest

Steps to manually verify this change

1. Go to a page, delete some code or put in bad code to case the page to not load
2. Confirm the below shows up instead of a blank screen.

This pull request is ready to code review when

• [x] Automated tests are updated (and all tests are passing)
• [x] New automated test cases are documented above
• [x] Chromatic link added above
• [x] Pull request has been labeled, if applicable with feature, content, bug, tests, refactor
• [ ] Associated OpenAPI documentation has been updated
• [x] The experience passes a basic manual accessibility audit (keyboard nav, screenreader, text scaling) OR an exemption is documented

This pull request is ready to test when

• [x] Code has been reviewed by someone other than the original author

This pull request is ready to review when QA has

• [x] Verified the functionality related to the change
• [x] Verified that the change works with Narrator on Windows
• [x] Verified that the change works with VoiceOver on Mac
• [ ] Verified all updated pages with the WAVE tool
• [x] Verified tab and keyboard navigation functionality

This pull request can be merged when

• [x] Design has approved the experience
• [x] Product has approved the experience

[codecov[bot]]

Codecov Report

Merging #4680 (1ba030e) into main (a2489f4) will increase coverage by 0.08%. The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #4680      +/-   ##
==========================================
+ Coverage   91.68%   91.77%   +0.08%     
==========================================
  Files         286      287       +1     
  Lines        9288     9301      +13     
  Branches     1894     1895       +1     
==========================================
+ Hits         8516     8536      +20     
+ Misses        743      736       -7     
  Partials       29       29              

Flag	Coverage Δ
api	∅ <ø> (∅)
common	98.75% <ø> (ø)
web	91.39% <100.00%> (+0.09%)	:arrow_up:

Impacted Files	Coverage Δ
web/src/pages/MainRoutes.js	100.00% <ø> (ø)
web/src/components/ErrorBoundary.js	100.00% <100.00%> (ø)

... and 2 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update a2489f4...1ba030e. Read the comment docs.

[cms-eapd-bot]

This deploy was cleaned up.