extract browser compatibility error handling out of app.js

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/13095/head
Michael Telatynski 2 years ago
parent f6ad5bf54c
commit cc939f9645
  1. 70
      src/vector/app.js
  2. 16
      src/vector/index.ts
  3. 13
      src/vector/init.tsx

@ -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);
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")} />;
}
} 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();
}} />;
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);
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")} />;
}
}

@ -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(

@ -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;

Loading…
Cancel
Save