Fix Grafast playground by avoiding accessing 'process' in graphile-co…

…nfig (#2270)
graphile · Dec 6, 2024 · 16d88da · 16d88da
2 parents 8b790c8 + 4075e45
commit 16d88da
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 12 deletions.
diff --git a/.changeset/chatty-nails-poke.md 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
@@ -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
@@ -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 (
-    <BrowserOnly>
-      {() => {
-        const PlaygroundInner = require("./PlaygroundInner").default;
+    <ErrorBoundary
+      fallbackRender={({ error }) => {
+        console.dir(error);
+        const issueStack = (error?.stack ?? error)
+          ?.split("\n")
+          .slice(0, 2)
+          .map((s) => s.trim())
+          .join(" / ");
         return (
-          <>
-            <Head>
-              <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-            </Head>
-            <PlaygroundInner />
-          </>
+          <div>
+            <h2>Something went wrong</h2>
+            <p>
+              Sorry about this. Grafast isn&apos;t really intended for usage on
+              the web yet and we seem to break the playground quite frequently
+              as a consequence. Please{" "}
+              <strong>
+                <a
+                  href={`https://github.com/graphile/crystal/issues/new?title=${encodeURIComponent(
+                    `Grafast playground: ${issueStack ?? String(error)}`,
+                  )}`}
+                >
+                  open an issue
+                </a>
+              </strong>
+              .
+            </p>
+            <p>Details:</p>
+            <pre>
+              <code>{String(error?.stack ?? error)}</code>
+            </pre>
+          </div>
         );
       }}
-    </BrowserOnly>
+    >
+      <BrowserOnly>
+        {() => {
+          const PlaygroundInner = require("./PlaygroundInner").default;
+          return (
+            <>
+              <Head>
+                <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+              </Head>
+              <PlaygroundInner />
+            </>
+          );
+        }}
+      </BrowserOnly>
+    </ErrorBoundary>
   );
 }
diff --git 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<THooks extends FunctionalityObject<THooks>> {
   callbacks: {

diff --git 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"