Render error boundary in Map

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, marginTop: '56px' }}>
+          {this.props.showErrorTrace ? this.state.errorMessage : DEFAULT_ERROR}
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

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>
   )
 }