From fe07517f0d5eb2dfc9438dd6b9c83a7f8264485b Mon Sep 17 00:00:00 2001
From: Alvaro <pursuance@gmail.com>
Date: Mon, 28 Oct 2024 16:44:05 +0100
Subject: [PATCH] Catch error

---
 package.json                       |  3 +-
 pnpm-lock.yaml                     | 18 +++++++++
 src/components/globe-map/index.tsx | 65 +++++++++++++++++++++++-------
 3 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index bbf96fa..4c9805e 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "eslint-config-next": "14.2.4",
     "postcss": "8",
     "tailwindcss": "3.4.4",
-    "typescript": "5"
+    "typescript": "5",
+    "use-error-boundary": "^2.0.6"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fe975a5..e071177 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -114,6 +114,9 @@ importers:
       typescript:
         specifier: '5'
         version: 5.5.3
+      use-error-boundary:
+        specifier: ^2.0.6
+        version: 2.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
 packages:
 
@@ -3302,6 +3305,15 @@ packages:
       '@types/react':
         optional: true
 
+  use-error-boundary@2.0.6:
+    resolution: {integrity: sha512-AWCVKSAanLe6R/on/ZkHYtGKfXs8BQX6z/TUGYqtvkajLqQyrGKJJscbahtq8OyN8L3LqTRjJWx4gCOLmfIObw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   use-sidecar@1.1.2:
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
@@ -7001,6 +7013,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  use-error-boundary@2.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      react-dom: 18.3.1(react@18.3.1)
+
   use-sidecar@1.1.2(@types/react@18.3.3)(react@18.3.1):
     dependencies:
       detect-node-es: 1.1.0
diff --git a/src/components/globe-map/index.tsx b/src/components/globe-map/index.tsx
index fbe2f42..0314b8e 100644
--- a/src/components/globe-map/index.tsx
+++ b/src/components/globe-map/index.tsx
@@ -6,6 +6,7 @@ import { Controls } from './controls';
 import { markers } from './data';
 import GlobeGroup from './globe-group';
 import { useGesture } from '@use-gesture/react';
+import { useErrorBoundary } from 'use-error-boundary'
 
 export default function GlobeMap({ videoMaterial, className, style, hasMarkers = false, globePhase, rotate = false }:
   {
@@ -23,6 +24,18 @@ export default function GlobeMap({ videoMaterial, className, style, hasMarkers =
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [enabled, setEnabled] = useState(false);
 
+  useEffect(() => {
+    const handleDeviceOrientation = (e: DeviceOrientationEvent) => {
+      e.preventDefault();
+    };
+
+    window.addEventListener('deviceorientation', handleDeviceOrientation);
+
+    return () => {
+      window.removeEventListener('deviceorientation', handleDeviceOrientation);
+    };
+  }, []);
+
   const resetSelectedMarker = useCallback(() => {
     setSelectedMarker(null);
   }, []);
@@ -59,6 +72,23 @@ export default function GlobeMap({ videoMaterial, className, style, hasMarkers =
       }
     }
   )
+  const { onWheel, onDrag } = bind();
+
+  // const dcontrols = new DeviceOrientationControls(camera, renderer.domElement);
+
+
+  // addEventListener('touchstart', function (evt) {
+  //   dcontrols.enabled = false;
+  //   evt.preventDefault();
+  // }, false);
+
+  const { ErrorBoundary, didCatch, error } = useErrorBoundary();
+  useEffect(() => {
+    if (didCatch) {
+      console.log(error)
+    }
+  }
+    , [didCatch, error]);
 
   return (
     <>
@@ -66,21 +96,26 @@ export default function GlobeMap({ videoMaterial, className, style, hasMarkers =
         className={className}
         style={style}
       >
-        <Canvas
-          camera={{ fov: 35 }}
-          ref={canvasRef}
-          resize={{ scroll: false, debounce: { scroll: 0, resize: 0 } }}
-          {...bind()}
-        >
-          <Controls canvasRef={canvasRef} marker={marker} active={hasMarkers} enabled={enabled} setEnabled={setEnabled} groupRef={groupRef} resetSelectedMarker={resetSelectedMarker} globePhase={globePhase} />
-          <GlobeGroup
-            groupRef={groupRef}
-            hasMarkers={hasMarkers} markers={markers} selectedMarker={selectedMarker} setSelectedMarker={setSelectedMarker} rotate={rotate}
-            setEnabled={setEnabled}
-            videoMaterial={videoMaterial}
-          />
-        </Canvas>
-      </div>
+        {!didCatch && (
+          <ErrorBoundary>
+            <Canvas
+              camera={{ fov: 35 }}
+              ref={canvasRef}
+              resize={{ scroll: false, debounce: { scroll: 0, resize: 0 } }}
+              fallback={<div>Sorry no WebGL supported!</div>}
+              onWheel={onWheel}
+              onDrag={onDrag}
+            >
+              <Controls canvasRef={canvasRef} marker={marker} active={hasMarkers} enabled={enabled} setEnabled={setEnabled} groupRef={groupRef} resetSelectedMarker={resetSelectedMarker} globePhase={globePhase} />
+              <GlobeGroup
+                groupRef={groupRef}
+                hasMarkers={hasMarkers} markers={markers} selectedMarker={selectedMarker} setSelectedMarker={setSelectedMarker} rotate={rotate}
+                setEnabled={setEnabled}
+                videoMaterial={videoMaterial}
+              />
+            </Canvas>
+          </ErrorBoundary>)}
+      </div >
     </>
   );
 }