diff --git a/packages/web/app/routes/examples.server/components/Example/Example.tsx b/packages/web/app/routes/examples.server/components/Example/Example.tsx
index 7069fa9..a64c954 100644
--- a/packages/web/app/routes/examples.server/components/Example/Example.tsx
+++ b/packages/web/app/routes/examples.server/components/Example/Example.tsx
@@ -1,7 +1,7 @@
 import ExampleCodeBlock from '@/web/components/ExampleCodeBlock';
 
 interface ExampleProps {
-  message: string;
+  message: string | null;
 }
 
 const Example: React.FC<ExampleProps> = ({ message }) => {
diff --git a/packages/web/app/routes/examples.server/route.tsx b/packages/web/app/routes/examples.server/route.tsx
index 76a02e3..8e64b3c 100644
--- a/packages/web/app/routes/examples.server/route.tsx
+++ b/packages/web/app/routes/examples.server/route.tsx
@@ -3,12 +3,17 @@ import Example from './components/Example';
 import { getMessage } from './loaders';
 
 export const clientLoader = async () => {
-  const data = await getMessage();
-  return data;
+  try {
+    const { text } = await getMessage();
+    return text;
+  } catch (err) {
+    console.error('Error loading data:', err);
+    return null;
+  }
 };
 
 const ServerExample = ({ loaderData }: Route.ComponentProps) => {
-  const { text } = loaderData;
+  const text = loaderData;
 
   return (
     <div className="content">