App gets stuck on spinner if workers fail to load

dbkr commented 7 months ago

Steps to reproduce

If Element Web can't load the files for its workers (as in https://github.com/vector-im/element-web/issues/26698) it simply infinispinners. It should display an error message.

Outcome

What did you expect?

What happened instead?

Operating system

No response

Browser information

No response

URL for webapp

No response

Application version

No response

Homeserver

No response

Will you send logs?

No

langleyd commented 4 months ago

@dosu-bot would you have any suggestions on this issue?

dosubot[bot] commented 4 months ago

🤖

Hey @langleyd, great to see you around here again! How's everything going on your end?

Based on the information provided, it seems like the issue you're experiencing is related to the application getting stuck on the spinner when it fails to load the files for its workers. This is a known issue and a similar one was reported in the past (Loading the page shows an infinite spinner). The solution in that case was to restart the browser.

However, to prevent this from happening in the future, error handling can be added to the promises that load these files. This can be done by adding a .catch block to the promises that load these files. In the catch block, an error message can be displayed to the user. Here's an example of how you can add error handling to the loadOlmPromise:

const loadOlmPromise = loadOlm().catch((err) => {
    logger.error(err);
    showError(_t("error|misconfigured"), [
        extractErrorMessageFromError(err, _t("error|app_launch_unexpected_error")),
    ]);
});

You can do the same for the other promises. This way, if any of these promises fail, an error message will be displayed to the user, and the application will not get stuck on the spinner.

Currently, the Element Web codebase uses the ErrorBoundary component for error handling. This component catches JavaScript errors anywhere in their child component tree, logs those errors, and displays a fallback UI. If an error is thrown in the component tree wrapped by ErrorBoundary, the getDerivedStateFromError static method is called. This method updates the state with the error that was thrown, which triggers a re-render of the ErrorBoundary component. During this re-render, if this.state.error is truthy (i.e., an error was caught), a fallback UI is rendered.

I hope this information helps. If you need further assistance, please provide more details about the issue.

Sources

#### About Dosu

This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. If you want to continue the conversation, start your reply with @dosu-bot.

element-hq / element-web