From 6483f507ce239f9d2e9cb5e831bfcd9b52239b8d Mon Sep 17 00:00:00 2001
From: Kata Martin <katasm@gmail.com>
Date: Wed, 16 Oct 2024 14:46:12 -0700
Subject: [PATCH 1/2] Set up error boundary

---
 src/error-boundary.js | 41 ++++++++++++++++++++++++++++++
 src/map.js            | 58 +++++++++++++++++++++++--------------------
 2 files changed, 72 insertions(+), 27 deletions(-)
 create mode 100644 src/error-boundary.js

diff --git a/src/error-boundary.js b/src/error-boundary.js
new file mode 100644
index 0000000..38b9c79
--- /dev/null
+++ b/src/error-boundary.js
@@ -0,0 +1,41 @@
+import React from 'react'
+
+// Based on https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+const DEFAULT_ERROR = 'Your device doesn’t support rendering this map.'
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { errorMessage: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return {
+      errorMessage: error.message ?? defaultError,
+    }
+  }
+
+  componentDidCatch(error, info) {
+    // Example "componentStack":
+    //   in ComponentThatThrows (created by App)
+    //   in ErrorBoundary (created by App)
+    //   in div (created by App)
+    //   in App
+    console.error(error, info.componentStack)
+  }
+
+  render() {
+    if (this.state.errorMessage) {
+      // You can render any custom fallback UI
+      return (
+        <div style={{ textAlign: 'center', padding: 24 }}>
+          {this.props.showErrorTrace ? this.state.errorMessage : DEFAULT_ERROR}
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary
diff --git a/src/map.js b/src/map.js
index 121d8a0..fba6ad4 100644
--- a/src/map.js
+++ b/src/map.js
@@ -3,6 +3,7 @@ import Mapbox from './mapbox'
 import Regl from './regl'
 import { RegionProvider } from './region/context'
 import { LoadingProvider, LoadingUpdater } from './loading'
+import ErrorBoundary from './error-boundary'
 
 const Map = ({
   id,
@@ -24,6 +25,7 @@ const Map = ({
   setMetadataLoading,
   /** Tracks any requests of new chunks by containing `Raster` layers */
   setChunkLoading,
+  showErrorTrace = false,
 }) => {
   return (
     <div
@@ -38,34 +40,36 @@ const Map = ({
         ...style,
       }}
     >
-      <Mapbox
-        zoom={zoom}
-        minZoom={minZoom}
-        maxZoom={maxZoom}
-        maxBounds={maxBounds}
-        center={center}
-        debug={debug}
-        glyphs={glyphs}
-        style={{ position: 'absolute' }}
-      >
-        <Regl
-          extensions={extensions}
-          style={{
-            position: 'absolute',
-            pointerEvents: 'none',
-            zIndex: -1,
-          }}
+      <ErrorBoundary showErrorTrace={showErrorTrace}>
+        <Mapbox
+          zoom={zoom}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          maxBounds={maxBounds}
+          center={center}
+          debug={debug}
+          glyphs={glyphs}
+          style={{ position: 'absolute' }}
         >
-          <LoadingProvider>
-            <LoadingUpdater
-              setLoading={setLoading}
-              setMetadataLoading={setMetadataLoading}
-              setChunkLoading={setChunkLoading}
-            />
-            <RegionProvider>{children}</RegionProvider>
-          </LoadingProvider>
-        </Regl>
-      </Mapbox>
+          <Regl
+            extensions={extensions}
+            style={{
+              position: 'absolute',
+              pointerEvents: 'none',
+              zIndex: -1,
+            }}
+          >
+            <LoadingProvider>
+              <LoadingUpdater
+                setLoading={setLoading}
+                setMetadataLoading={setMetadataLoading}
+                setChunkLoading={setChunkLoading}
+              />
+              <RegionProvider>{children}</RegionProvider>
+            </LoadingProvider>
+          </Regl>
+        </Mapbox>
+      </ErrorBoundary>
     </div>
   )
 }

From acbbf036c637a0f694d84a2a65e6263a992c6471 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Wed, 16 Oct 2024 16:41:32 -0700
Subject: [PATCH 2/2] place message below the header

---
 src/error-boundary.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/error-boundary.js b/src/error-boundary.js
index 38b9c79..9c9326f 100644
--- a/src/error-boundary.js
+++ b/src/error-boundary.js
@@ -28,7 +28,7 @@ class ErrorBoundary extends React.Component {
     if (this.state.errorMessage) {
       // You can render any custom fallback UI
       return (
-        <div style={{ textAlign: 'center', padding: 24 }}>
+        <div style={{ textAlign: 'center', padding: 24, marginTop: '56px' }}>
           {this.props.showErrorTrace ? this.state.errorMessage : DEFAULT_ERROR}
         </div>
       )