From f2555444f7f81dfcd758ba91136d7db087aa7475 Mon Sep 17 00:00:00 2001
From: Andrei Tipa <andrei.tipa@ffwagency.com>
Date: Mon, 21 Oct 2024 09:52:03 -0600
Subject: [PATCH 1/3] Implement error boundaries for ComponentRenderer.

---
 .../component-renderer/component-renderer.tsx |  8 +++-
 components/error-boundary/error-boundary.tsx  | 41 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 components/error-boundary/error-boundary.tsx

diff --git a/components/component-renderer/component-renderer.tsx b/components/component-renderer/component-renderer.tsx
index b7f79ac..dcf1584 100644
--- a/components/component-renderer/component-renderer.tsx
+++ b/components/component-renderer/component-renderer.tsx
@@ -1,3 +1,5 @@
+import ErrorBoundary from '#/components/error-boundary/error-boundary';
+
 import { componentMap } from './mappings';
 
 export default function ComponentRenderer({
@@ -30,7 +32,11 @@ export default function ComponentRenderer({
   // @ts-ignore
   const Component = componentMap[data.__typename];
   if (Component) {
-    return <Component data={data} />;
+    return (
+      <ErrorBoundary>
+        <Component data={data} />
+      </ErrorBoundary>
+    );
   }
 
   return null;
diff --git a/components/error-boundary/error-boundary.tsx b/components/error-boundary/error-boundary.tsx
new file mode 100644
index 0000000..fd0f1fd
--- /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> {
+  public state: ErrorBoundaryState = {
+    errorMessage: '',
+  };
+  constructor(props: Props) {
+    super(props);
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { errorMessage: error.message };
+  }
+
+  render() {
+    if (this.state.errorMessage) {
+      console.log('this.state.hasError', 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;

From 12980e417dbfe680f1d473197ce0ec7a4e5c68d4 Mon Sep 17 00:00:00 2001
From: Andrei Tipa <andrei.tipa@ffwagency.com>
Date: Mon, 21 Oct 2024 09:53:29 -0600
Subject: [PATCH 2/3] Code refactor.

---
 components/error-boundary/error-boundary.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/error-boundary/error-boundary.tsx b/components/error-boundary/error-boundary.tsx
index fd0f1fd..16615b6 100644
--- a/components/error-boundary/error-boundary.tsx
+++ b/components/error-boundary/error-boundary.tsx
@@ -10,13 +10,14 @@ interface ErrorBoundaryState {
   errorMessage: string;
 }
 class ErrorBoundary extends React.Component<Props> {
-  public state: ErrorBoundaryState = {
-    errorMessage: '',
-  };
   constructor(props: Props) {
     super(props);
   }
 
+  public state: ErrorBoundaryState = {
+    errorMessage: '',
+  };
+
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     return { errorMessage: error.message };
   }

From d977282ce29f65dcc541911c9457e66b52322200 Mon Sep 17 00:00:00 2001
From: Andrei Tipa <andrei.tipa@ffwagency.com>
Date: Mon, 21 Oct 2024 10:54:18 -0600
Subject: [PATCH 3/3] Remove debug data.

---
 components/error-boundary/error-boundary.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/error-boundary/error-boundary.tsx b/components/error-boundary/error-boundary.tsx
index 16615b6..cc1788c 100644
--- a/components/error-boundary/error-boundary.tsx
+++ b/components/error-boundary/error-boundary.tsx
@@ -24,7 +24,6 @@ class ErrorBoundary extends React.Component<Props> {
 
   render() {
     if (this.state.errorMessage) {
-      console.log('this.state.hasError', 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">