Fix netify's prerendering service (#546)

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