factor out config error handling

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/13095/head
Michael Telatynski 2 years ago
parent 4954c732ee
commit 2837c41ca4
  1. 20
      src/components/structures/ErrorView.tsx
  2. 42
      src/vector/index.ts
  3. 10
      src/vector/init.tsx

@ -17,23 +17,29 @@ limitations under the License.
import * as React from "react";
import * as PropTypes from "prop-types";
import { _t } from "matrix-react-sdk/src/languageHandler";
interface IProps {
title: React.ReactNode;
message: React.ReactNode;
title: string;
messages?: string[];
}
const ErrorView: React.FC<IProps> = ({title, message}) => {
const ErrorView: React.FC<IProps> = ({title, messages}) => {
return <div className="mx_GenericErrorPage">
<div className="mx_GenericErrorPage_box">
<h1>{ title }</h1>
<p>{ message }</p>
<h1>{title}</h1>
<div>
{messages && messages.map(msg => <p key={msg}>
{ _t(msg) }
</p>)}
</div>
</div>
</div>;
};
ErrorView.propTypes = {
title: PropTypes.object.isRequired, // jsx for title
message: PropTypes.object.isRequired, // jsx to display
title: PropTypes.string.isRequired,
messages: PropTypes.arrayOf(PropTypes.string.isRequired),
};
export default ErrorView;

@ -131,6 +131,28 @@ async function start() {
preparePlatform();
// load config requires the platform to be ready
const loadConfigPromise = loadConfig();
await settled(loadConfigPromise); // wait for it to settle
// keep initialising so that we can show any possible error with as many features (theme, i18n) as possible
// Load language after loading config.json so that settingsDefaults.language can be applied
const loadLanguagePromise = loadLanguage();
// as quickly as we possibly can, set a default theme...
const loadThemePromise = loadTheme();
const loadSkinPromise = loadSkin();
// await things settling so that any errors we have to render have features like i18n running
await settled(loadSkinPromise);
await settled(loadThemePromise);
await settled(loadLanguagePromise);
// ##########################
// error handling begins here
// ##########################
if (!acceptBrowser) {
await new Promise(resolve => {
// todo
});
}
try {
// await config here
@ -146,33 +168,20 @@ async function start() {
return showError(_t("Unable to load config file: please refresh the page to try again."));
}
// Load language after loading config.json so that settingsDefaults.language can be applied
const loadLanguagePromise = loadLanguage();
// as quickly as we possibly can, set a default theme...
const loadThemePromise = loadTheme();
const loadSkinPromise = loadSkin();
// ##################################
// app load critical path starts here
// await things starting successfully
// ##################################
await loadOlmPromise;
await settled(loadSkinPromise);
await loadThemePromise;
await loadLanguagePromise;
if (!acceptBrowser) {
await new Promise(resolve => {
// todo
});
}
// Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
// run on the components.
await loadApp(fragparts.params, acceptBrowser);
} catch (err) {
console.trace(err);
// check errors in this order:
// Browser Compatibility (skippable)
// config.json
// runtime errors
const { showError } = await import(
/* webpackChunkName: "init" */
/* webpackPreload: true */
@ -181,6 +190,7 @@ async function start() {
}
}
start().catch(err => {
console.error(err);
if (!acceptBrowser) {
alert("Incompatible browser");
}

@ -150,15 +150,7 @@ export async function showError(title: string, messages?: string[]) {
/* webpackChunkName: "error-view" */
/* webpackPreload: true */
"../components/structures/ErrorView")).default;
const message = <div>
{messages && messages.map(msg => <p key={msg}>
{languageHandler._t(
"Your Riot configuration contains invalid JSON. Please correct the problem and reload the page.",
)}
</p>)}
</div>;
window.matrixChat = ReactDOM.render(<ErrorView title={title} message={message} />,
window.matrixChat = ReactDOM.render(<ErrorView title={title} messages={messages} />,
document.getElementById('matrixchat'));
}

Loading…
Cancel
Save