diff --git a/components/component-renderer/component-renderer.tsx b/components/component-renderer/component-renderer.tsx
index 93f6f3e..c9dccc3 100644
--- a/components/component-renderer/component-renderer.tsx
+++ b/components/component-renderer/component-renderer.tsx
@@ -12,6 +12,7 @@
 
 import { componentMap } from './mappings';
 import { ComponentProps } from 'react';
+import ErrorBoundary from '#/components/error-boundary/error-boundary';
 
 type ComponentMapType = typeof componentMap;
 type Data = ComponentProps<ComponentMapType[ComponentKey]>['data'];
@@ -41,7 +42,11 @@ export default function ComponentRenderer<T extends DataWithTypename | DataWithT
   if (isComponentKey(data.__typename)) {
     const Component = componentMap[data.__typename];
     // At this point we know data is one of the accepted props for the component
-    return <Component data={data as any} />;
+    return (
+      <ErrorBoundary>
+        <Component data={data as any} />
+      </ErrorBoundary>
+    );
   }
 
   // If we don't know the component, we don't render anything
diff --git a/components/error-boundary/error-boundary.tsx b/components/error-boundary/error-boundary.tsx
new file mode 100644
index 0000000..cc1788c
--- /dev/null
+++ b/components/error-boundary/error-boundary.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import React, { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  errorMessage: string;
+}
+class ErrorBoundary extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public state: ErrorBoundaryState = {
+    errorMessage: '',
+  };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { errorMessage: error.message };
+  }
+
+  render() {
+    if (this.state.errorMessage) {
+      return (
+        <div className="mx-auto max-w-6xl px-5 py-12">
+          <div className="rounded-xl bg-gray p-8 text-center">
+            <strong>Unable to render the component.</strong>
+            <pre>{this.state.errorMessage}</pre>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;