Fix netify's prerendering service

If there's an error in netlify's prerendering service,
we don't have access to the log so we have to spin it up locally to
check.

textures was causing a issue on the home page resulting in "Fatal Error"
as the social preview text, not good.

As a bonus I thing I fix FE sentry logging too.

app/web/src/App.tsx

@@ -1,7 +1,8 @@
 import { AuthProvider } from '@redwoodjs/auth'
 import GoTrue from 'gotrue-js'
 
-import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodProvider } from '@redwoodjs/web'
+import FatalErrorBoundary from 'src/components/FatalErrorBoundary/FatalErrorBoundary'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import { createMuiTheme } from '@material-ui/core/styles'

app/web/src/components/FatalErrorBoundary/FatalErrorBoundary.tsx

@@ -2,7 +2,30 @@ import { FatalErrorBoundary as FatalErrorBoundaryBase } from '@redwoodjs/web'
 import * as Sentry from '@sentry/browser'
 
 class FatalErrorBoundary extends FatalErrorBoundaryBase {
-  componentDidCatch(error, errorInfo) {
+  async componentDidCatch(error, errorInfo) {
+    // debug netlify prerender code below
+    // const div = document.createElement('div')
+    // div.innerHTML = JSON.stringify(error)
+    // document.body.append(div)
+
+    /* More debug explanation.
+    If there's an error in netlify's prerendering service,
+    we don't have access to the log so we have to spin it up locally to check.
+    This can be with the following commands
+    ```
+    $ git clone https://github.com/netlify/prerender.git
+    $ cd prerender
+    $ npm install
+    $ npm start
+    ```
+    This will spin up the service on port 3000, prerendering can than be tested with
+    http://localhost:3000/https://cadhub.xyz
+    or
+    http://localhost:3000/http://localhost:8910/
+    where the second url is the route you want to test.
+    However we don't have access to the console since it's run by a separate chrome instance,
+    so instead errors are put into the DOM
+    */
     Sentry.withScope((scope) => {
       scope.setExtras(errorInfo)
       Sentry.captureException(error)

app/web/src/components/Hero/AssetWithGooey.tsx

@@ -4,8 +4,9 @@ import { useLoader, useThree, useFrame } from '@react-three/fiber'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
 import texture from 'src/components/IdeViewer/dullFrontLitMetal.png'
-import { useTexture, MeshDistortMaterial, Sphere } from '@react-three/drei'
 import { Glitch, EffectComposer } from "@react-three/postprocessing";
+import useSafeTexture from 'src/helpers/hooks/useSafeTexture'
+import { MeshDistortMaterial, Sphere } from '@react-three/drei'
 
 const thresholdAngle = 10
 export default function AssetWithGooey({
@@ -19,7 +20,7 @@ export default function AssetWithGooey({
   const edgeRef = useRef(null)
   const coffeeRef = useRef(null)
   const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo)
-  const colorMap = useTexture(texture)
+  const colorMap = useSafeTexture(texture)
   const edges = React.useMemo(() => new THREE.EdgesGeometry(geo, 12), [geo])
   const position = [0, 0, 5]
   const scaleArr = Array.from({ length: 3 }).map(() => scale)

app/web/src/components/IdeViewer/IdeViewer.tsx

@@ -8,8 +8,8 @@ import {
   GizmoViewport,
   OrbitControls,
   Environment,
-  useTexture,
 } from '@react-three/drei'
+import useSafeTexture from 'src/helpers/hooks/useSafeTexture'
 import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
 import { Vector3 } from 'three'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
@@ -28,7 +28,7 @@ function Asset({ geometry: incomingGeo }) {
         : new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
     [incomingGeo]
   )
-  const colorMap = useTexture(texture)
+  const colorMap = useSafeTexture(texture)
   if (!incomingGeo) return null
 
   return (

app/web/src/helpers/hooks/useSafeTexture.ts

@@ -0,0 +1,11 @@
+import { useTexture } from '@react-three/drei'
+
+export default function useSafeTexture(texture: string) {
+  let colorMap
+  try {
+    // breaks on netlify's prerendering service if not caught
+    // see app/web/src/components/FatalErrorBoundary/FatalErrorBoundary.tsx for more into on debugging the service
+    colorMap = useTexture(texture)
+  } catch (error) {}
+  return colorMap
+}