From cc939f9645971b288231616dc929981e67a8dce8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 8 Apr 2020 21:41:22 +0100
Subject: [PATCH] extract browser compatibility error handling out of app.js
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/vector/app.js | 64 +++++++++++++++++++--------------------------
src/vector/index.ts | 16 +++++++++---
src/vector/init.tsx | 13 +++++++--
3 files changed, 51 insertions(+), 42 deletions(-)
diff --git a/src/vector/app.js b/src/vector/app.js
index d0acce6374..222a76a061 100644
--- a/src/vector/app.js
+++ b/src/vector/app.js
@@ -126,7 +126,7 @@ function onTokenLoginCompleted() {
window.location.href = formatted;
}
-export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
+export async function loadApp(fragParams: {}) {
// 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;
@@ -148,45 +148,35 @@ export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
const urlWithoutQuery = window.location.protocol + '//' + window.location.host + window.location.pathname;
console.log("Vector starting at " + urlWithoutQuery);
- if (acceptBrowser) {
- platform.startUpdater();
- try {
- // Don't bother loading the app until the config is verified
- const config = await verifyServerConfig();
- const MatrixChat = sdk.getComponent('structures.MatrixChat');
- return <MatrixChat
- onNewScreen={onNewScreen}
- makeRegistrationUrl={makeRegistrationUrl}
- ConferenceHandler={VectorConferenceHandler}
- config={config}
- realQueryParams={params}
- startingFragmentQueryParams={fragParams}
- enableGuest={!config.disable_guests}
- onTokenLoginCompleted={onTokenLoginCompleted}
- initialScreenAfterLogin={getScreenFromLocation(window.location)}
- defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()}
- />;
- } catch (err) {
- console.error(err);
+ platform.startUpdater();
- let errorMessage = err.translatedMessage
- || _t("Unexpected error preparing the app. See console for details.");
- errorMessage = <span>{errorMessage}</span>;
+ try {
+ // Don't bother loading the app until the config is verified
+ const config = await verifyServerConfig();
+ const MatrixChat = sdk.getComponent('structures.MatrixChat');
+ return <MatrixChat
+ onNewScreen={onNewScreen}
+ makeRegistrationUrl={makeRegistrationUrl}
+ ConferenceHandler={VectorConferenceHandler}
+ config={config}
+ realQueryParams={params}
+ startingFragmentQueryParams={fragParams}
+ enableGuest={!config.disable_guests}
+ onTokenLoginCompleted={onTokenLoginCompleted}
+ initialScreenAfterLogin={getScreenFromLocation(window.location)}
+ defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()}
+ />;
+ } catch (err) {
+ console.error(err);
- // Like the compatibility page, AWOOOOOGA at the user
- const GenericErrorPage = sdk.getComponent("structures.GenericErrorPage");
- return <GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />;
- }
- } else {
- console.error("Browser is missing required features.");
- // take to a different landing page to AWOOOOOGA at the user
- const CompatibilityPage = sdk.getComponent("structures.CompatibilityPage");
- return <CompatibilityPage onAccept={function() {
- if (window.localStorage) window.localStorage.setItem('mx_accepts_unsupported_browser', true);
- console.log("User accepts the compatibility risks.");
- loadApp();
- }} />;
+ let errorMessage = err.translatedMessage
+ || _t("Unexpected error preparing the app. See console for details.");
+ errorMessage = <span>{errorMessage}</span>;
+
+ // Like the compatibility page, AWOOOOOGA at the user
+ const GenericErrorPage = sdk.getComponent("structures.GenericErrorPage");
+ return <GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />;
}
}
diff --git a/src/vector/index.ts b/src/vector/index.ts
index f3c091f566..1436171f2f 100644
--- a/src/vector/index.ts
+++ b/src/vector/index.ts
@@ -100,6 +100,7 @@ async function start() {
loadTheme,
loadApp,
showError,
+ showIncompatibleBrowser,
_t,
} = await import(
/* webpackChunkName: "init" */
@@ -148,9 +149,18 @@ async function start() {
// ##########################
// error handling begins here
// ##########################
+ console.log("DEBUG", acceptBrowser);
if (!acceptBrowser) {
await new Promise(resolve => {
- // todo
+ console.error("Browser is missing required features.");
+ // take to a different landing page to AWOOOOOGA at the user
+ showIncompatibleBrowser(() => {
+ if (window.localStorage) {
+ window.localStorage.setItem('mx_accepts_unsupported_browser', String(true));
+ }
+ console.log("User accepts the compatibility risks.");
+ resolve();
+ });
});
}
@@ -170,7 +180,7 @@ async function start() {
// ##################################
// app load critical path starts here
- // await things starting successfully
+ // assert things started successfully
// ##################################
await loadOlmPromise;
await loadSkinPromise;
@@ -179,7 +189,7 @@ async function start() {
// 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);
+ await loadApp(fragparts.params);
} catch (err) {
console.trace(err);
const { showError } = await import(
diff --git a/src/vector/init.tsx b/src/vector/init.tsx
index 583d96a921..c7c9141ebf 100644
--- a/src/vector/init.tsx
+++ b/src/vector/init.tsx
@@ -135,13 +135,13 @@ export async function loadTheme() {
setTheme();
}
-export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
+export async function loadApp(fragParams: {}) {
// 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),
+ window.matrixChat = ReactDOM.render(await module.loadApp(fragParams),
document.getElementById('matrixchat'));
}
@@ -154,4 +154,13 @@ export async function showError(title: string, messages?: string[]) {
document.getElementById('matrixchat'));
}
+export async function showIncompatibleBrowser(onAccept) {
+ const CompatibilityPage = (await import(
+ /* webpackChunkName: "compatibility-page" */
+ /* webpackPreload: true */
+ "matrix-react-sdk/src/components/structures/CompatibilityPage")).default;
+ window.matrixChat = ReactDOM.render(<CompatibilityPage onAccept={onAccept} />,
+ document.getElementById('matrixchat'));
+}
+
export const _t = languageHandler._t;