mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

extract config error handling out of app.js

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-04-08 19:47:52 +01:00
parent 6a5268f09b
commit 4954c732ee
4 changed files with 96 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/vector/app.js
View file

@ -126,7 +126,7 @@ function onTokenLoginCompleted() {
window.location.href = formatted;
}
export async function loadApp(fragParams: {}, acceptBrowser: boolean, configError: Error|void) {
export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
// XXX: the way we pass the path to the worker script from webpack via html in body's dataset is a hack
// but alternatives seem to require changing the interface to passing Workers to js-sdk
const vectorIndexeddbWorkerScript = document.body.dataset.vectorIndexeddbWorkerScript;
@ -146,36 +146,9 @@ export async function loadApp(fragParams: {}, acceptBrowser: boolean, configErro
const params = parseQs(window.location);
// Now that we've loaded the theme (CSS), display the config syntax error if needed.
if (configError && configError.err && configError.err instanceof SyntaxError) {
const errorMessage = (
<div>
<p>
{_t(
"Your Riot configuration contains invalid JSON. Please correct the problem " +
"and reload the page.",
)}
</p>
<p>
{_t(
"The message from the parser is: %(message)s",
{message: configError.err.message || _t("Invalid JSON")},
)}
</p>
</div>
);
const GenericErrorPage = sdk.getComponent("structures.GenericErrorPage");
return <GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />;
}
const urlWithoutQuery = window.location.protocol + '//' + window.location.host + window.location.pathname;
console.log("Vector starting at " + urlWithoutQuery);
if (configError) {
return <div className="error">
Unable to load config file: please refresh the page to try again.
</div>;
} else if (acceptBrowser) {
if (acceptBrowser) {
platform.startUpdater();
try {

38
src/vector/index.ts
View file

@ -97,6 +97,8 @@ async function start() {
loadLanguage,
loadTheme,
loadApp,
showError,
_t,
} = await import(
/* webpackChunkName: "init" */
/* webpackPreload: true */
@ -130,12 +132,18 @@ async function start() {
// load config requires the platform to be ready
const loadConfigPromise = loadConfig();
let configError;
try {
// await config here
await loadConfigPromise;
} catch (err) {
configError = err;
} catch (error) {
// Now that we've loaded the theme (CSS), display the config syntax error if needed.
if (error.err && error.err instanceof SyntaxError) {
return showError(_t("Your Riot is misconfigured"), [
_t("Your Riot configuration contains invalid JSON. Please correct the problem and reload the page."),
_t("The message from the parser is: %(message)s", { message: error.err.message || _t("Invalid JSON")}),
]);
}
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
@ -150,9 +158,27 @@ async function start() {
await loadThemePromise;
await loadLanguagePromise;
// 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, configError);
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 */
"./init");
await showError(err);
}
}
start().catch(err => {
if (!acceptBrowser) {

24
src/vector/init.tsx
View file

@ -21,6 +21,7 @@ limitations under the License.
import olmWasmPath from "olm/olm.wasm";
import Olm from 'olm';
import * as ReactDOM from "react-dom";
import * as React from "react";
import * as languageHandler from "matrix-react-sdk/src/languageHandler";
import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
@ -134,12 +135,31 @@ export async function loadTheme() {
setTheme();
}
export async function loadApp(fragParams: {}, acceptBrowser: boolean, configError: Error|void) {
export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
// load app.js async so that its code is not executed immediately and we can catch any exceptions
const module = await import(
/* webpackChunkName: "riot-web-app" */
/* webpackPreload: true */
"./app");
window.matrixChat = ReactDOM.render(await module.loadApp(fragParams, acceptBrowser, configError),
window.matrixChat = ReactDOM.render(await module.loadApp(fragParams, acceptBrowser),
document.getElementById('matrixchat'));
}
export async function showError(title: string, messages?: string[]) {
const ErrorView = (await import(
/* 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} />,
document.getElementById('matrixchat'));
}
export const _t = languageHandler._t;