show special error state for ChunkLoadError

[christianvogt]

https://issues.redhat.com/browse/RHOAIENG-2690

Description

@ UX please suggest icon and text

The times in which this screen may be shown is very very small. A possible way to encounter this issue in production is to have the web app opened while the dashboard updates behind the scene. Then the user attempts to navigate the already opened application.

A ChunkLoadError is a special case that indicates a failure to load a build artifact. This generally occurs because the web page was opened on a previous version of the application and the build artifacts have changed on the server. It may also occur as a result of cache not getting the latest version although this case hasn't been proven in our environment where it's expected that we do not cache such files.

Whenever a ChunkLoadError is detected, the best course of action for the user is to simply refresh the page. As such this change will provide the user with a clear action button for how to proceed. Furthermore in case the error persists for some reason, we give the option to display the error as is done with all other errors. Since it's a possibility that other errors may also be resolved by reloading the page, a general message and reload action is provided in the header of the standard error page. eg. if after an update, the endpoint of an action on longer exists and throws an error.

Clicking the Show error button will display the standard error screen for data collection purposes:

How Has This Been Tested?

Added unit tests.
This has been tested locally.

1. Build the frontend npm run build
2. Start the backend npm run start:dev
3. Open your web browser to localhost:4000
4. Open web inspector.
5. Navigate to the Explore page.
6. From the network tab web inspector look, for ###.js javascript file request. This is the chunk related to the explore page.
7. Rename frontend/public/###.js to anything else. eg ###.js.bak
8. Reload the page or first go to localhost:4000 and then click on the Explore page link.
9. Observe the new error state.

Test Impact

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Commits have been squashed into descriptive, self-contained units of work (e.g. 'WIP' and 'Implements feedback' style messages have been removed)
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change (find relevant UX in the SMEs section).

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

cc @andrewballantyne @kywalker-rh @kaedward @vconzola

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 77.48%. Comparing base (b0073d9) to head (c5b7433).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2834      +/-   ##
==========================================
+ Coverage   77.44%   77.48%   +0.04%     
==========================================
  Files        1102     1103       +1     
  Lines       23206    23213       +7     
  Branches     5856     5857       +1     
==========================================
+ Hits        17971    17986      +15     
+ Misses       5235     5227       -8     

Files	Coverage Δ
frontend/src/components/error/ErrorBoundary.tsx	100.00% <100.00%> (+38.88%)	⬆️
frontend/src/components/error/ErrorDetails.tsx	36.36% <ø> (+27.27%)	⬆️
frontend/src/components/error/UpdateState.tsx	100.00% <100.00%> (ø)

... and 1 file 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 b0073d9...c5b7433. Read the comment docs.

[andrewballantyne]

/approve

Might want to consider tests more so because this is a near impossible reproduce state in the app.

[christianvogt]

Added unit tests.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: andrewballantyne

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [andrewballantyne]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment