From 9d933e3890073b1b94ef4287a57b6776f483989d Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Tue, 5 Oct 2021 18:47:19 +1100 Subject: [PATCH] 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 | 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 +} -- 2.39.5