Merge pull request #49 from carbonplan/katamartin/cleanup-error-messages

Error message & miscellaneous cleanup

components/data/store.js

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 import Dataset from './dataset'
 
 const createDatasetSlice = (set, get) => ({

components/dataset.js

@@ -46,6 +46,7 @@ const sx = {
 
 const Dataset = () => {
   const [url, setUrl] = useState('')
+  const [hasInitializedQuery, setHasInitializedQuery] = useState(false)
   const [dataset, setDataset] = useState(null)
   const [errorMessage, setErrorMessage] = useState(null)
   const [focused, setFocused] = useState(false)
@@ -94,15 +95,16 @@ const Dataset = () => {
   )
 
   useEffect(() => {
-    if (!url && router.query?.dataset) {
+    if (!url && router.query?.dataset && !hasInitializedQuery) {
       setUrl(router.query.dataset)
       const clim = (router.query.clim ?? '').split(',').map(Number)
 
       submitUrl(router.query.dataset, {
         clim: clim && clim.length === 2 ? clim : null,
       })
+      setHasInitializedQuery(true)
     }
-  }, [!url, router.query?.dataset])
+  }, [!url, router.query?.dataset, hasInitializedQuery])
 
   return (
     <form onSubmit={handleSubmit}>

components/map.js

@@ -7,6 +7,7 @@ import PyramidMap from './pyramid-map'
 
 const Map = () => {
   const dataset = useStore((state) => state.dataset)
+  const loading = useStore((state) => state.getLoading())
 
   return (
     <Flex
@@ -31,7 +32,9 @@ const Map = () => {
             color: 'secondary',
           }}
         >
-          Provide a Zarr link to explore data
+          {loading
+            ? 'Loading Zarr store...'
+            : 'Provide a Zarr link to explore data'}
         </Box>
       )}
     </Flex>

components/utils/metadata.js

@@ -19,26 +19,20 @@ export const inspectDataset = async (url) => {
     response = await fetchMetadata(sanitized)
   } catch (e) {
     // Show generic error message when request fails before response can be inspected.
+    // Do not show URL for details because request is ultimately proxied via /api/metadata route.
     throw new Error(
-      'A network error occurred. This could be a CORS issue or a dropped internet connection.'
+      'A network error occurred while fetching metadata. This could be a CORS issue, a dropped internet connection, or another network problem.'
     )
   }
 
   if (!response.ok) {
     const statusText = response.statusText ?? 'Dataset request failed.'
-    if (response.status === 403) {
-      throw new Error(
-        `STATUS 403: Access forbidden. Ensure that URL is correct and that dataset is publicly accessible.`
-      )
-    } else if (response.status === 404) {
-      throw new Error(
-        `STATUS 404: ${statusText} Ensure that URL path is correct.`
-      )
-    } else {
-      throw new Error(
-        `STATUS ${response.status}: ${statusText}. URL: ${sanitized}`
-      )
-    }
+    const errorMessage = generateErrorMessage(
+      response.status,
+      statusText,
+      sanitized
+    )
+    throw new Error(errorMessage)
   }
   let metadata = await response.json()
 
@@ -57,6 +51,21 @@ export const inspectDataset = async (url) => {
   return { url: visualizedUrl, metadata, pyramid }
 }
 
+const generateErrorMessage = (status, statusText, sanitizedUrl) => {
+  switch (status) {
+    case 403:
+      return `STATUS 403: Access forbidden. Ensure that URL is correct and that dataset is publicly accessible.`
+    case 404:
+      return `STATUS 404: ${statusText}. Ensure that URL path is correct.`
+    case 500:
+    case 502:
+    case 503:
+      return `STATUS ${status}: ${statusText}. The server encountered an error. Please try again later.`
+    default:
+      return `STATUS ${status}: ${statusText}. URL: ${sanitizedUrl}`
+  }
+}
+
 // Infer axes from consolidated metadata
 export const inferCfAxes = (metadata, pyramid) => {
   const prefix = pyramid ? '0/' : ''