show error gui when initial json loading fails

src/dataloaders/DataLoaderUtil.ts

@@ -5,17 +5,30 @@ import {
     getLocalCompressedBinaryDataLoader,
 } from "./DataLoaders";
 import type { DataColumn, DataType, LoadedDataColumn } from "@/charts/charts";
+import { createMdvPortal } from "@/react/react_utils";
+import ErrorComponentReactWrapper from "@/react/components/ErrorComponentReactWrapper";
 
 let projectRoot = "";
-export async function fetchJsonConfig(url: string, root: string) {
+/**
+ * This could potentially also have some more awareness of what type of json it is fetching, and e.g. do some zod validation
+ */
+export async function fetchJsonConfig(url: string, root: string)  {
     try {
         const resp = await fetch(url);
         const config = await resp.json();
+        if (!resp.ok) {
+            throw new Error(JSON.stringify(config, null, 2));
+        }
         //rewriteBaseUrlRecursive(config, root); //removed.
         return config;
-    } catch (e) {
-        console.error(`Error fetching ${url}: ${e}`);
-        return { error: e };
+    } catch (error: any) {
+        //todo less hacky CSS - also consider making the dialog open by default
+        document.body.style.display = "flex";
+        document.body.style.justifyContent = "center";
+        document.body.style.alignItems = "center";
+        createMdvPortal(ErrorComponentReactWrapper({ error: {message: `Error fetching JSON '${url}'`}, extraMetaData: {message: `${error}`} }), document.body);
+        console.error(`Error fetching ${url}: ${error}`);
+        return { error };
     }
 }
 

src/react/components/ErrorComponentReactWrapper.tsx

@@ -62,7 +62,7 @@ const ErrorComponent = ({error, extraMetaData}: ErrorComponentType) => {
                             },
                         }}
                     >
-                        ERROR: Click to view details
+                        {error.message} (click to view details or submit a bug report)
                     </Button>
                 </Alert>
                 <ReusableDialog