Display a red box of anger for config syntax errors

Fixes https://github.com/vector-im/riot-web/issues/9519

src/vector/index.js

@@ -222,10 +222,17 @@ async function loadApp() {
 
     let configJson;
     let configError;
+    let configSyntaxError = false;
     try {
         configJson = await platform.getConfig();
     } catch (e) {
         configError = e;
+
+        if (e && e.err && e.err instanceof SyntaxError) {
+            console.error("SyntaxError loading config:", e);
+            configSyntaxError = true;
+            configJson = {}; // to prevent errors between here and loading CSS for the error box
+        }
     }
 
     // XXX: We call this twice, once here and once in MatrixChat as a prop. We call it here to ensure
@@ -295,6 +302,22 @@ async function loadApp() {
         }
     }
 
+    // Now that we've loaded the theme (CSS), display the config syntax error if needed.
+    if (configSyntaxError) {
+        const errorMessage = _t(
+            "Your Riot configuration has invalid JSON in it. Please correct the problem and reload the page. " +
+            "The message from the parser is: %(message)s",
+            {message: configError.err.message || _t("Invalid JSON")},
+        );
+
+        const GenericErrorPage = sdk.getComponent("structures.GenericErrorPage");
+        window.matrixChat = ReactDOM.render(
+            <GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />,
+            document.getElementById('matrixchat'),
+        );
+        return;
+    }
+
     const validBrowser = checkBrowserFeatures([
         "displaytable", "flexbox", "es5object", "es5function", "localstorage",
         "objectfit", "indexeddb", "webworkers",