Improve error handling on the frontend

[obulat]

Problem

Our error handling is inconsistent and incomplete. We do not show error pages for some client errors, which causes errors down the line. This is very visible in the Sentry dashboard, where we get errors on the single result pages that are actually caused by 429 errors on the search pages.
The users don't get a clear indication of what they can do (how long they should wait) when they get 429.
The errors we do send to Sentry do not have enough information for us to resolve them.

Description

On errors, the front end should show error pages that clearly indicate why the error happened and what they can do next.
We should not hide or ignore the errors that prevent further requests from being successful.
To help solve the errors, we should capture the relevant error information in Sentry.

Outlined Steps

• Add Playwright VR tests for error pages #2610

These tests should test the search and single result pages, and for errors thrown on the server and only on the client.

• Update the error page design to include information about the error #2586

Kinds of errors

404 for pages that do not exist (openverse.org/nonexistentpage)
404 for single media result pages with non-existent id
429 for throttled requests
500 for API internal server error (can be the same as no. 1?)
Timeout errors

Special cases

What should we show for the following client-side errors:

1. For All content view: what should be done when only one of the media types received an error?
2. Errors on the "Load more" fetching?
3. Should we display an error when there is an error loading Related media, or just hide the section?

Related issue: #511

• Improve error handling in the media store #2588

The media store should set the fetchState.fetchingError errorStatus and message, and re-throw the original error.

The components (search.vue) or middleware (search.ts) should have a catch clause in the fetch function. Here, the error should be sent to Sentry, and the app should redirect to the error page that uses fetchState.fetchingError.

Update the search.vue component

The fetch method should capture error in Sentry and redirect to the error page if necessary.

Update the search middleware

The middleware should fetch media on the server and redirect to the error page if necessary.

[sarayourfriend]

@obulat what is this blocked on?