From aabe6827822508fafa6627b7d8c10da20f0ab8c2 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Tue, 5 Oct 2021 18:52:24 +1100 Subject: [PATCH] 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 | 3 ++- .../FatalErrorBoundary/FatalErrorBoundary.tsx | 25 ++++++++++++++++++- .../src/components/Hero/AssetWithGooey.tsx | 5 ++-- .../src/components/IdeViewer/IdeViewer.tsx | 4 +-- app/web/src/helpers/hooks/useSafeTexture.ts | 11 ++++++++ 5 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 app/web/src/helpers/hooks/useSafeTexture.ts diff --git a/app/web/src/App.tsx b/app/web/src/App.tsx index bc6577b..61cd7fa 100644 --- a/app/web/src/App.tsx +++ b/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' diff --git a/app/web/src/components/FatalErrorBoundary/FatalErrorBoundary.tsx b/app/web/src/components/FatalErrorBoundary/FatalErrorBoundary.tsx index 6004437..9475815 100644 --- a/app/web/src/components/FatalErrorBoundary/FatalErrorBoundary.tsx +++ b/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) diff --git a/app/web/src/components/Hero/AssetWithGooey.tsx b/app/web/src/components/Hero/AssetWithGooey.tsx index f075a1f..af8d82a 100644 --- a/app/web/src/components/Hero/AssetWithGooey.tsx +++ b/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) diff --git a/app/web/src/components/IdeViewer/IdeViewer.tsx b/app/web/src/components/IdeViewer/IdeViewer.tsx index 73b8f4e..69b1ee2 100644 --- a/app/web/src/components/IdeViewer/IdeViewer.tsx +++ b/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 ( diff --git a/app/web/src/helpers/hooks/useSafeTexture.ts b/app/web/src/helpers/hooks/useSafeTexture.ts new file mode 100644 index 0000000..0a4daaf --- /dev/null +++ b/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 +}