Display a red box of anger for config syntax errors

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

src/i18n/strings/en_EN.json

@@ -1,6 +1,8 @@
 {
-    "Unexpected error preparing the app. See console for details.": "Unexpected error preparing the app. See console for details.",
+    "Your Riot configuration has invalid JSON in it. Please correct the problem and reload the page. The message from the parser is: %(message)s": "Your Riot configuration has invalid JSON in it. Please correct the problem and reload the page. The message from the parser is: %(message)s",
+    "Invalid JSON": "Invalid JSON",
     "Your Riot is misconfigured": "Your Riot is misconfigured",
+    "Unexpected error preparing the app. See console for details.": "Unexpected error preparing the app. See console for details.",
     "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.",
     "Invalid configuration: no default server specified.": "Invalid configuration: no default server specified.",
     "Riot Desktop on %(platformName)s": "Riot Desktop on %(platformName)s",

src/vector/getconfig.js

@@ -39,6 +39,7 @@ function getConfig(configJsonFilename) {
         request(
             { method: "GET", url: configJsonFilename },
             (err, response, body) => {
+                try {
                     if (err || response.status < 200 || response.status >= 300) {
                         // Lack of a config isn't an error, we should
                         // just use the defaults.
@@ -61,6 +62,9 @@ function getConfig(configJsonFilename) {
                     // which breaks if there's no config.json and we're
                     // loading from the filesystem (see above).
                     resolve(JSON.parse(body));
+                } catch (e) {
+                    reject({err: e});
+                }
             },
         );
     });

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",