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,28 +39,32 @@ function getConfig(configJsonFilename) {
         request(
             { method: "GET", url: configJsonFilename },
             (err, response, body) => {
-                if (err || response.status < 200 || response.status >= 300) {
+                try {
-                    // Lack of a config isn't an error, we should
+                    if (err || response.status < 200 || response.status >= 300) {
-                    // just use the defaults.
+                        // Lack of a config isn't an error, we should
-                    // Also treat a blank config as no config, assuming
+                        // just use the defaults.
-                    // the status code is 0, because we don't get 404s
+                        // Also treat a blank config as no config, assuming
-                    // from file: URIs so this is the only way we can
+                        // the status code is 0, because we don't get 404s
-                    // not fail if the file doesn't exist when loading
+                        // from file: URIs so this is the only way we can
-                    // from a file:// URI.
+                        // not fail if the file doesn't exist when loading
-                    if (response) {
+                        // from a file:// URI.
-                        if (response.status == 404 || (response.status == 0 && body == '')) {
+                        if (response) {
-                            resolve({});
+                            if (response.status == 404 || (response.status == 0 && body == '')) {
+                                resolve({});
+                            }
                         }
+                        reject({err: err, response: response});
+                        return;
                     }
-                    reject({err: err, response: response});
-                    return;
-                }
 
-                // We parse the JSON ourselves rather than use the JSON
+                    // We parse the JSON ourselves rather than use the JSON
-                // parameter, since this throws a parse error on empty
+                    // parameter, since this throws a parse error on empty
-                // which breaks if there's no config.json and we're
+                    // which breaks if there's no config.json and we're
-                // loading from the filesystem (see above).
+                    // loading from the filesystem (see above).
-                resolve(JSON.parse(body));
+                    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",