Merge pull request #25 from will-moore/cors_error_handling

Try to detect errors due to CORS when fetch fails

src/App.svelte

@@ -4,6 +4,7 @@
   import JsonValidator from "./JsonValidator/index.svelte";
   import Title from "./Title.svelte"
   import Modal from "svelte-simple-modal";
+  import SplashScreen from "./SplashScreen.svelte";
 
   import { getJson } from "./utils";
   import CheckMark from "./CheckMark.svelte";
@@ -45,17 +46,10 @@
           </div>
         {:catch error}
           <CheckMark valid={false}/>
-          <p style="color: red; margin: 20px 0">{error.message}</p>
+          <p class="error">{error.message}</p>
         {/await}
       {:else}
-        <article>
-          To validate an OME-ZARR file, use e.g.
-          <a
-            href="{location}?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr"
-          >
-            ?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr
-          </a>
-        </article>
+        <SplashScreen />
       {/if}
     </section>
   </main>
@@ -123,4 +117,12 @@
       white-space: nowrap;
     }
   }
+
+  .error {
+    color: red;
+    margin: 20px 0;
+    text-align: center;
+    background: white;
+    padding: 10px;
+  }
 </style>

src/SplashScreen.svelte

@@ -0,0 +1,44 @@
+<article>
+  <p>To validate an OME-NGFF file, use ?source=URL to open a sample. For example:</p>
+
+  <ul>
+    <li>
+      A single image:
+      <a
+        href="{location}?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr"
+      >
+        ?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr
+      </a>
+    </li>
+
+    <li>
+      A bioformats2raw.layout collection:
+      <a
+        href="{location}?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.2/idr0070A/9838562.zarr"
+      >
+        ?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.2/idr0070A/9838562.zarr
+      </a>
+    </li>
+
+    <li>
+      A plate:
+      <a
+        href="{location}?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0001A/2551.zarr"
+      >
+        ?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0001A/2551.zarr
+      </a>
+    </li>
+  </ul>
+</article>
+
+<style>
+  article {
+    width: 90%;
+    margin: auto;
+  }
+
+  li {
+    list-style: none;
+    margin: 15px;
+  }
+</style>

src/utils.js

@@ -12,15 +12,36 @@ export function getSchemaUrl(schemaName, version) {
 
 // fetch() doesn't error for 404 etc.
 async function fetchHandleError(url) {
-  return await fetch(url).then(function (response) {
-    if (!response.ok) {
-      console.log("Fetch error:", response);
-      // make the promise be rejected if we didn't get a 2xx response
-      throw new Error(`Error loading ${url}: ${response.statusText}`);
-    } else {
-      return response;
+  let msg = `Error Loading ${url}:`;
+  let rsp;
+  try {
+    rsp = await fetch(url).then(function (response) {
+      if (!response.ok) {
+        // make the promise be rejected if we didn't get a 2xx response
+        msg += ` ${response.statusText}`;
+      } else {
+        return response;
+      }
+    });
+  } catch (error) {
+    console.log("check for CORS...");
+    console.log(error);
+    try {
+      let corsRsp = await fetch(url, { mode: "no-cors" });
+      console.log("corsRsp", corsRsp);
+      // If the 'no-cors' mode allows this to return, then we
+      // likely failed due to CORS in the original request
+      msg += " Failed due to CORS issues.";
+    } catch (anotherError) {
+      console.log("Even `no-cors` request failed!", anotherError);
+      // return the original error (same as anotherError?)
+      msg += ` ${error}`;
     }
-  });
+  }
+  if (rsp) {
+    return rsp;
+  }
+  throw Error(msg);
 }
 
 export async function getJson(url) {