handle errors

src/components/Layers.jsx

@@ -54,9 +54,9 @@ function Child({ node, ...other }) {
 
 
 export default function Layers() {
-  const { data, isLoading } = useMetadata();
+  const { data, isLoading, error } = useMetadata();
 
-  if (isLoading) {
+  if (isLoading || error) {
     return null;
   }
 

src/components/Map.jsx

@@ -47,7 +47,7 @@ const geocoderApi = {
 export default function Map() {
   const mapContainer = useRef(null);
   const { map, setMap } = useContext(MapContext);
-  const { data } = useMetadata();
+  const { data, error } = useMetadata();
 
   useEffect(() => {
     if (data && !map) {
@@ -71,6 +71,15 @@ export default function Map() {
     }
   }, [data, map]);
 
+  if (error) {
+    return (
+      <div>
+        <h2>An error occurred</h2>
+        <p>{error.info.message}</p>
+      </div>
+    )
+  }
+
   return (
     <div className="map-wrap">
       <div ref={mapContainer} className="map" />

src/hooks/useMetadata.js

@@ -1,9 +1,20 @@
 import useSWR from "swr";
 
-const fetcher = (url) => fetch(url, {
-  credentials: 'include'
-}).then(res => res.json());
-
+const fetcher = async url => {
+  const res = await fetch(url, { credentials: 'include' })
+
+  // If the status code is not in the range 200-299,
+  // we still try to parse and throw it.
+  if (!res.ok) {
+    const error = new Error('An error occurred while fetching the data.')
+    // Attach extra info to the error object.
+    error.info = await res.json()
+    error.status = res.status
+    throw error
+  }
+
+  return res.json()
+}
 export default function useMetadata() {
   return useSWR(window.MAPS_API_URL.replace('{MAP_ID}', location.hash.slice(1)), fetcher);
 }