diff --git a/.changeset/chatty-nails-poke.md b/.changeset/chatty-nails-poke.md new file mode 100644 index 0000000000..3424adcb96 --- /dev/null +++ b/.changeset/chatty-nails-poke.md @@ -0,0 +1,5 @@ +--- +"graphile-config": patch +--- + +Check that `process` exists before reading from it. diff --git a/grafast/website/package.json b/grafast/website/package.json index 04dfb6a29e..db10bbbe2b 100644 --- a/grafast/website/package.json +++ b/grafast/website/package.json @@ -28,7 +28,8 @@ "grafast": "workspace:^", "prism-react-renderer": "^2.0.6", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-error-boundary": "^4.1.2" }, "devDependencies": { "@docusaurus/module-type-aliases": "2.4.1", diff --git a/grafast/website/src/components/Playground/index.jsx b/grafast/website/src/components/Playground/index.jsx index 7c90f3d1f0..ccb9581a97 100644 --- a/grafast/website/src/components/Playground/index.jsx +++ b/grafast/website/src/components/Playground/index.jsx @@ -1,21 +1,57 @@ import BrowserOnly from "@docusaurus/BrowserOnly"; import Head from "@docusaurus/Head"; import React from "react"; +import { ErrorBoundary } from "react-error-boundary"; export default function Playground() { return ( - - {() => { - const PlaygroundInner = require("./PlaygroundInner").default; + { + console.dir(error); + const issueStack = (error?.stack ?? error) + ?.split("\n") + .slice(0, 2) + .map((s) => s.trim()) + .join(" / "); return ( - <> - - - - - +
+

Something went wrong

+

+ Sorry about this. Grafast isn't really intended for usage on + the web yet and we seem to break the playground quite frequently + as a consequence. Please{" "} + + + open an issue + + + . +

+

Details:

+ 
+              {String(error?.stack ?? error)}
+
+
); }} - + > + + {() => { + const PlaygroundInner = require("./PlaygroundInner").default; + return ( + <> + + + + + + ); + }} + + ); } diff --git a/utils/graphile-config/src/hooks.ts b/utils/graphile-config/src/hooks.ts index c78e5b971e..109a58502d 100644 --- a/utils/graphile-config/src/hooks.ts +++ b/utils/graphile-config/src/hooks.ts @@ -7,7 +7,8 @@ import type { UnwrapCallback, } from "./interfaces.js"; -const isDev = process.env.GRAPHILE_ENV === "development"; +const isDev = + typeof process !== "undefined" && process.env.GRAPHILE_ENV === "development"; export class AsyncHooks> { callbacks: { diff --git a/yarn.lock b/yarn.lock index 2794c2becf..9bf846ab99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3962,6 +3962,7 @@ __metadata: prism-react-renderer: "npm:^2.0.6" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" + react-error-boundary: "npm:^4.1.2" sqlite3: "npm:^5.1.6" languageName: unknown linkType: soft @@ -18294,6 +18295,17 @@ __metadata: languageName: node linkType: hard +"react-error-boundary@npm:^4.1.2": + version: 4.1.2 + resolution: "react-error-boundary@npm:4.1.2" + dependencies: + "@babel/runtime": "npm:^7.12.5" + peerDependencies: + react: ">=16.13.1" + checksum: b0adb5de94acfe625a1ff62b55ce9b3f0b5e486f1ce17132ebe4486ee14082917fe28a24c69b57a758cd487e1a8eb41ffbf15e1349a8fbb544cf85ba5d6149f5 + languageName: node + linkType: hard + "react-error-overlay@npm:^6.0.11": version: 6.0.11 resolution: "react-error-overlay@npm:6.0.11"