:^)

aslilac · aslilac · commit 8d2c0a5a38b9 · 2024-01-03T21:48:45.000Z
diff --git a/site/src/components/ErrorBoundary/ErrorBoundary.tsx b/site/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,15 +1,18 @@
-import { Component, ReactNode, PropsWithChildren } from "react";
+import { Component, type ReactNode } from "react";
 import { RuntimeErrorState } from "./RuntimeErrorState";
 
-type ErrorBoundaryProps = PropsWithChildren<unknown>;
+interface ErrorBoundaryProps {
+  fallback?: ReactNode;
+  children: ReactNode;
+}
 
 interface ErrorBoundaryState {
   error: Error | null;
 }
 
 /**
  * Our app's Error Boundary
- * Read more about React Error Boundaries: https://reactjs.org/docs/error-boundaries.html
+ * Read more about React Error Boundaries: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
  */
 export class ErrorBoundary extends Component<
   ErrorBoundaryProps,
@@ -20,13 +23,15 @@ export class ErrorBoundary extends Component<
     this.state = { error: null };
   }
 
-  static getDerivedStateFromError(error: Error): { error: Error } {
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     return { error };
   }
 
   render(): ReactNode {
     if (this.state.error) {
-      return <RuntimeErrorState error={this.state.error} />;
+      return (
+        this.props.fallback ?? <RuntimeErrorState error={this.state.error} />
+      );
     }
 
     return this.props.children;
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -2,7 +2,9 @@ import { css, Global, useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
+import { visuallyHidden } from "@mui/utils";
 import { type FC, lazy, Suspense } from "react";
+import { ErrorBoundary } from "components/ErrorBoundary/ErrorBoundary";
 import { Loader } from "components/Loader/Loader";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "components/Stack/Stack";
@@ -11,7 +13,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "components/Popover/Popover";
-import { visuallyHidden } from "@mui/utils";
 
 // See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
 const urlFromUnifiedCode = (unified: string) =>
@@ -118,9 +119,12 @@ export const IconField: FC<IconFieldProps> = ({
       so we just have to sneak it into the DOM, which is kind of annoying, but means
       that users shouldn't ever spend time waiting for it to load. */}
       <div css={{ ...visuallyHidden }}>
-        <Suspense>
-          <EmojiPicker onEmojiSelect={() => {}} />
-        </Suspense>
+        {/* `ErrorBoundary` is for tests, this component requires `IntersectionObserver` */}
+        <ErrorBoundary fallback={null}>
+          <Suspense>
+            <EmojiPicker onEmojiSelect={() => {}} />
+          </Suspense>
+        </ErrorBoundary>
       </div>
     </Stack>
   );
