Add specific message for network errors on app launch (Web UI)

[gabrielcorado]

Related to #24255.

This PR changes the error Failed to fetch returned when launching an application (from Web UI) with a more specific message that can help users better understand why it is failing.

The error cause is better described on the issue:

The Failed to fetch error is due to the browser not trusting the self-signed certificates from the Teleport proxy (NET::ERR_CERT_AUTHORITY_INVALID on Chrome). It happens on the /web/launch page because, before redirecting the application domain, it requests the https://app.domain.dev/x-teleport-auth (responsible for setting the authentication cookies).

Screenshot of how the page will look after the change.

[r0mant]

I'm no expert but TypeError seems broad. Would be it better to check if the error text is "Failed to fetch" like what we see is being returned in this case?

@ryanclark @kimlisa I'll defer to you on this one.

[kimlisa]

roman has a point b/c there could be other TypeError's like accessing a field in an undefined variable (seems unlikely though), however different browsers will have different error messages for network errors. tested them out:

chrome: failed to fetch
firefox: network error when attempting to fetch resource.
safari: load failed

so i think the way it is okay, as long as we are aware it could mean something else which the web console will print out the real error

[kimlisa]

or we could just add the real error message err.message along with the status text

[kimlisa]

after addressing roman's comment

[kimlisa]

roman has a point b/c there could be other TypeError's like accessing a field in an undefined variable (seems unlikely though), however different browsers will have different error messages for network errors. tested them out:

chrome: failed to fetch
firefox: network error when attempting to fetch resource.
safari: load failed

so i think the way it is okay, as long as we are aware it could mean something else which the web console will print out the real error

[gabrielcorado]

@r0mant I've updated the message (attached an image on the PR description to see how it looks on the page). I couldn't add a link to the error message because the component accepts only text. I'm not sure if we want to update it to have a dangerouslySetInnerHTML attribute, update the component to support children, or solve it differently.

[public-teleport-github-review-bot]

@gabrielcorado See the table below for backport results.

Branch	Result
branch/v11	Create PR
branch/v12	Create PR
branch/v13	Create PR