Added handler for WebGL disabled error

src/components/dice/DiceInteraction.js

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
+import { Box, Text } from "theme-ui";
 import { Engine } from "@babylonjs/core/Engines/engine";
 import { Scene } from "@babylonjs/core/scene";
 import { Vector3, Color4, Matrix } from "@babylonjs/core/Maths/math";
@@ -18,15 +19,20 @@ import ReactResizeDetector from "react-resize-detector";
 
 import usePreventTouch from "../../hooks/usePreventTouch";
 
+import Banner from "../Banner";
+
 const diceThrowSpeed = 2;
 
 function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
+  const [error, setError] = useState();
+
   const sceneRef = useRef();
   const engineRef = useRef();
   const canvasRef = useRef();
   const containerRef = useRef();
 
   useEffect(() => {
+    try {
       const canvas = canvasRef.current;
       const engine = new Engine(canvas, true, {
         preserveDrawingBuffer: true,
@@ -72,6 +78,9 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
           selectedMeshVelocityWindowRef.current.push(velocity);
         }
       });
+    } catch (error) {
+      setError(error);
+    }
   }, [onSceneMount]);
 
   const selectedMeshRef = useRef();
@@ -128,10 +137,12 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
 
   function handleResize(width, height) {
     const engine = engineRef.current;
+    if (engine) {
       engine.resize();
       canvasRef.current.width = width;
       canvasRef.current.height = height;
     }
+  }
 
   usePreventTouch(containerRef);
 
@@ -155,6 +166,13 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
           style={{ outline: "none" }}
         />
       </ReactResizeDetector>
+      <Banner isOpen={!!error} onRequestClose={() => setError()}>
+        <Box p={1}>
+          <Text as="p" variant="body2">
+            Error: {error && error.message}
+          </Text>
+        </Box>
+      </Banner>
     </div>
   );
 }