From aabe6827822508fafa6627b7d8c10da20f0ab8c2 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Tue, 5 Oct 2021 18:52:24 +1100 Subject: [PATCH 1/6] 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 +} From 3f6d919f2267a380b6404c2fac3c7d442df02e2d Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Tue, 5 Oct 2021 19:04:47 +1100 Subject: [PATCH 2/6] Add jscad to metadata --- app/web/src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/web/src/index.html b/app/web/src/index.html index 004d983..8c689aa 100644 --- a/app/web/src/index.html +++ b/app/web/src/index.html @@ -7,7 +7,7 @@ CadHub - + From c4c195074b48f8530c5b61a540f18e61ca91cdca Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Thu, 7 Oct 2021 20:22:51 +1100 Subject: [PATCH 3/6] Update cad lambda docs --- app/api/src/docker/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/app/api/src/docker/README.md b/app/api/src/docker/README.md index 2ecdf3c..4023b11 100644 --- a/app/api/src/docker/README.md +++ b/app/api/src/docker/README.md @@ -17,7 +17,6 @@ Because of the way the docker containers to be deployed as lambdas on aws are so The docker build relies on a git ignored file, the aws-lambda-rie. [Download it](https://github.com/aws/aws-lambda-runtime-interface-emulator/releases/download/v1.0/aws-lambda-rie), then put it into `app/api/src/docker/common/`. alternatively you can put this download into the DockerFiles by reading the instructions at around line 29 of the DockerFiles (`app/api/src/docker/openscad/Dockerfile` & `app/api/src/docker/cadquery/Dockerfile`). However this will mean slower build times as it will need download this 14mb file every build. -you will also need to create a .env in `app/api/src/docker/.env` for the following env-vars `DEV_AWS_SECRET_ACCESS_KEY, DEV_AWS_ACCESS_KEY_ID and DEV_BUCKET`. Ask @irev-dev for credentials and he can sort you out. Run From 32d6ef27ad1f5ca5ff50bbc0d5c9620f58887afd Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Thu, 7 Oct 2021 21:25:07 +1100 Subject: [PATCH 4/6] Attempt 2 at fixing prerendering error --- .../src/components/Hero/AssetWithGooey.tsx | 5 +- app/web/src/components/Hero/Hero.tsx | 52 ++++++++++--------- .../src/components/IdeViewer/IdeViewer.tsx | 4 +- app/web/src/helpers/hooks/useSafeTexture.ts | 11 ---- .../pages/FatalErrorPage/FatalErrorPage.js | 2 +- 5 files changed, 33 insertions(+), 41 deletions(-) delete mode 100644 app/web/src/helpers/hooks/useSafeTexture.ts diff --git a/app/web/src/components/Hero/AssetWithGooey.tsx b/app/web/src/components/Hero/AssetWithGooey.tsx index af8d82a..4c26620 100644 --- a/app/web/src/components/Hero/AssetWithGooey.tsx +++ b/app/web/src/components/Hero/AssetWithGooey.tsx @@ -5,8 +5,7 @@ import { STLLoader } from 'three/examples/jsm/loaders/STLLoader' import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit' import texture from 'src/components/IdeViewer/dullFrontLitMetal.png' import { Glitch, EffectComposer } from "@react-three/postprocessing"; -import useSafeTexture from 'src/helpers/hooks/useSafeTexture' -import { MeshDistortMaterial, Sphere } from '@react-three/drei' +import { MeshDistortMaterial, Sphere, useTexture } from '@react-three/drei' const thresholdAngle = 10 export default function AssetWithGooey({ @@ -20,7 +19,7 @@ export default function AssetWithGooey({ const edgeRef = useRef(null) const coffeeRef = useRef(null) const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo) - const colorMap = useSafeTexture(texture) + const colorMap = useTexture(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/Hero/Hero.tsx b/app/web/src/components/Hero/Hero.tsx index 50123e4..e743d66 100644 --- a/app/web/src/components/Hero/Hero.tsx +++ b/app/web/src/components/Hero/Hero.tsx @@ -12,6 +12,7 @@ import Gravatar from 'src/components/Gravatar/Gravatar' import ProjectsCell from 'src/components/ProjectsCell' import OutBound from 'src/components/OutBound/OutBound' import { DynamicProjectButton } from 'src/components/NavPlusButton/NavPlusButton' +import FatalErrorBoundary from 'src/components/FatalErrorBoundary/FatalErrorBoundary' // dynamic import to enable pre-render iof the homepage const AssetWithGooey = React.lazy( @@ -280,32 +281,35 @@ function ModelSection({ const { ref, inView } = useInView() return (
-
- - {!inView && } - - - - - - - - } +
something seams to have gone wrong here
}> +
+ - - + {!inView && } + + + + - {/* uncomment for framerate and render time */} - {/* */} - {/* */} - -
+ + + + } + > + + + + {/* uncomment for framerate and render time */} + {/* */} + {/* */} + +
+
) } diff --git a/app/web/src/components/IdeViewer/IdeViewer.tsx b/app/web/src/components/IdeViewer/IdeViewer.tsx index 69b1ee2..73b8f4e 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 = useSafeTexture(texture) + const colorMap = useTexture(texture) if (!incomingGeo) return null return ( diff --git a/app/web/src/helpers/hooks/useSafeTexture.ts b/app/web/src/helpers/hooks/useSafeTexture.ts deleted file mode 100644 index 0a4daaf..0000000 --- a/app/web/src/helpers/hooks/useSafeTexture.ts +++ /dev/null @@ -1,11 +0,0 @@ -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 -} diff --git a/app/web/src/pages/FatalErrorPage/FatalErrorPage.js b/app/web/src/pages/FatalErrorPage/FatalErrorPage.js index 790906a..0966be7 100644 --- a/app/web/src/pages/FatalErrorPage/FatalErrorPage.js +++ b/app/web/src/pages/FatalErrorPage/FatalErrorPage.js @@ -10,7 +10,7 @@ import Seo from 'src/components/Seo/Seo' export default () => (
- +