"Error: Loading CSS chunk 469 failed." in Dashboard after OCP auth session is expired

[dmytro-ndp]

Describe the bug

Dashboard of Eclipse Che Next has shown error "Loading CSS chunk 469 failed." after OCP auth session is expired:

Error: Loading CSS chunk 469 failed. (https://eclipse-che.apps.ocp410.crw-qe.com/dashboard/469.dfe56f9999e93c8993d4.css)

    in Unknown
    in t
    in t
    in RoutesComponent
    in Suspense
    in kt
    in main
    in div
    in Page
    in Dt
    in Connect(Dt)
    in t
    in c
    in i
    in Connect(i)
    in AppComponent
    in u

Che version

next (development version)

Steps to reproduce

1. Deploy Eclipse Che Next (7.68.0-SNAPSHOT) to OCP.
2. Go to Eclipse Che Dashboard.
3. Switch to another browser tab till auth session is expired.
4. Return to browser tab with Eclipse Che Dashboard and go to Workspaces page.

Expected behavior

Workspaces page is opened

Runtime

OpenShift

Screenshots

Installation method

chectl/next

Environment

Linux

Eclipse Che Logs

No response

Additional context

There is workaround: refresh the browser page with Eclipse Che Dashboard.

[dkwon17]

I have a few solutions:

In dashboard's ErrorBoundary, check the error code for the failed chunk request and direct the user to the login page if necessary.

Unfortunately there doesn't seem to be a way to check the reason (e.g. 403 or 404 error) why a ChunkLoadError occurred. Webpack populates these fields in the error object (error.type is the same in both 403 and 404 cases). Also, response codes for requests are not available in window.performance.getEntries().

Therefore to determine the error reason, fetch is used to make a request to the chunk once more. If the error code is 403, direct the user to the login page.

Branch: https://github.com/eclipse-che/che-dashboard/compare/main...dkwon17:che-dashboard:1-fetch

1-fetch.webm

In dashboard's ErrorBoundary, let testBackends() direct the user to the login page

For this solution, when the Loading CSS chunk error appears, call this.props.onError() which calls testBackends()

The testBackends() function will eventually call signIn() since the provision requests will fail with 403.

For this solution, it takes a few seconds before the login page appears, because of the provision request retries.

Branch: https://github.com/eclipse-che/che-dashboard/compare/main...dkwon17:che-dashboard:2-check

second-check.webm

Skip authentication for `dashboard/*.css` and `dashboard/*.js` requests

For this solution, the dashboard/*.css and dashboard/*.js requests would skip auth checks in the oauth-proxy side.

https://github.com/eclipse-che/che-operator/blob/7997df38dc8ab7a79a554d1dd4de7024f831a82c/pkg/deploy/gateway/oauth_proxy.go#L147-L150

However this might not be safe to expose.

third-skip.webm

WDYT @dmytro-ndp @olexii4 @akurinnoy @ibuziuk ?

[akurinnoy]

@dkwon17 I have two more options:

• get rid of lazy loading;
• use lazy loading with prefetch (npmjs).

The advantage of these options is that users will not see errors about loading chanks failures any more.

[dkwon17]

Thanks for the feedback @akurinnoy , I have made a PR here: https://github.com/eclipse-che/che-dashboard/pull/965

[ibuziuk]

Merged in main and the fix will be part of 7.77 / DS 3.10

[ibuziuk]

@akurinnoy @olexii4 @dkwon17 reopening since I was able to reproduce a similar issue on Developer Sandbox / Dev Spaces 3.12:

[olexii4]

Cannot reproduce with Eclipse Che Next 7.92.0-next. Please, reopen this PR if this bug will reproduce again.