diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
new file mode 100644
index 00000000..cfd39cb3
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,68 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  componentName?: string;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: ErrorInfo;
+}
+
+/**
+ * Error Boundary to catch React errors and show debug information
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('🔴 ErrorBoundary caught error:', {
+      component: this.props.componentName || 'Unknown',
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+    });
+
+    this.setState({ error, errorInfo });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="bg-red-50 border-2 border-red-300 rounded-xl p-6 m-4">
+          <h2 className="text-xl font-bold text-red-900 mb-2">
+            🔴 Error in {this.props.componentName || 'Component'}
+          </h2>
+          <div className="bg-white rounded p-4 mb-4">
+            <p className="text-sm font-mono text-red-800 mb-2">
+              <strong>Error:</strong> {this.state.error?.message}
+            </p>
+            {this.state.error?.stack && (
+              <details className="text-xs text-gray-700">
+                <summary className="cursor-pointer font-semibold">Stack Trace</summary>
+                <pre className="mt-2 overflow-auto">{this.state.error.stack}</pre>
+              </details>
+            )}
+          </div>
+          <button
+            onClick={() => this.setState({ hasError: false, error: undefined, errorInfo: undefined })}
+            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg"
+          >
+            Try Again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/frontend/src/hooks/useReasoningTranslation.ts b/frontend/src/hooks/useReasoningTranslation.ts
index ce4476e6..df9431df 100644
--- a/frontend/src/hooks/useReasoningTranslation.ts
+++ b/frontend/src/hooks/useReasoningTranslation.ts
@@ -137,40 +137,70 @@ export function useReasoningFormatter() {
   const translation = useReasoningTranslation();
 
   const formatPOAction = useCallback((reasoningData?: ReasoningData) => {
+    console.log('🔍 formatPOAction called with:', reasoningData);
+
     if (!reasoningData) {
-      return {
+      const fallback = {
         reasoning: translation.translatePOReasonng({} as ReasoningData) || 'Purchase order required',
         consequence: '',
         severity: ''
       };
+      console.log('🔍 formatPOAction: No reasoning data, returning fallback:', fallback);
+      return fallback;
     }
 
     const reasoning = translation.translatePOReasonng(reasoningData) || 'Purchase order required';
     const consequence = translation.translateConsequence(reasoningData.consequence) || '';
     const severity = translation.translateSeverity(reasoningData.consequence?.severity) || '';
 
-    return {
-      reasoning,
-      consequence,
-      severity
-    };
+    const result = { reasoning, consequence, severity };
+
+    // Debug: Check for undefined values
+    if (reasoning === undefined || consequence === undefined || severity === undefined) {
+      console.error('🔴 formatPOAction returned undefined value!', {
+        reasoningData,
+        result,
+        reasoning,
+        consequence,
+        severity
+      });
+    } else {
+      console.log('✅ formatPOAction result:', { type: reasoningData.type, result });
+    }
+
+    return result;
   }, [translation]);
 
   const formatBatchAction = useCallback((reasoningData?: ReasoningData) => {
+    console.log('🔍 formatBatchAction called with:', reasoningData);
+
     if (!reasoningData) {
-      return {
+      const fallback = {
         reasoning: translation.translateBatchReasoning({} as ReasoningData) || 'Production batch scheduled',
         urgency: 'normal'
       };
+      console.log('🔍 formatBatchAction: No reasoning data, returning fallback:', fallback);
+      return fallback;
     }
 
     const reasoning = translation.translateBatchReasoning(reasoningData) || 'Production batch scheduled';
     const urgency = reasoningData.urgency?.level || 'normal';
 
-    return {
-      reasoning,
-      urgency
-    };
+    const result = { reasoning, urgency };
+
+    // Debug: Check for undefined values
+    if (reasoning === undefined || urgency === undefined) {
+      console.error('🔴 formatBatchAction returned undefined value!', {
+        reasoningData,
+        result,
+        reasoning,
+        urgency
+      });
+    } else {
+      console.log('✅ formatBatchAction result:', { type: reasoningData.type, result });
+    }
+
+    return result;
   }, [translation]);
 
   return {
diff --git a/frontend/src/pages/app/DashboardPage.tsx b/frontend/src/pages/app/DashboardPage.tsx
index 66b99936..575457d3 100644
--- a/frontend/src/pages/app/DashboardPage.tsx
+++ b/frontend/src/pages/app/DashboardPage.tsx
@@ -15,7 +15,7 @@
  * - Trust-building (explain system reasoning)
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { RefreshCw, ExternalLink } from 'lucide-react';
 import { useTenant } from '../../stores/tenant.store';
@@ -34,6 +34,7 @@ import { ActionQueueCard } from '../../components/dashboard/ActionQueueCard';
 import { OrchestrationSummaryCard } from '../../components/dashboard/OrchestrationSummaryCard';
 import { ProductionTimelineCard } from '../../components/dashboard/ProductionTimelineCard';
 import { InsightsGrid } from '../../components/dashboard/InsightsGrid';
+import { ErrorBoundary } from '../../components/ErrorBoundary';
 
 export function NewDashboardPage() {
   const navigate = useNavigate();
@@ -71,6 +72,25 @@ export function NewDashboardPage() {
     refetch: refetchInsights,
   } = useInsights(tenantId);
 
+  // Debug logging for data
+  useEffect(() => {
+    console.log('🔍 Dashboard Data:', {
+      healthStatus: healthStatus,
+      orchestrationSummary: orchestrationSummary,
+      actionQueue: actionQueue,
+      productionTimeline: productionTimeline,
+      insights: insights,
+      loading: {
+        health: healthLoading,
+        orchestration: orchestrationLoading,
+        actionQueue: actionQueueLoading,
+        timeline: timelineLoading,
+        insights: insightsLoading
+      }
+    });
+  }, [healthStatus, orchestrationSummary, actionQueue, productionTimeline, insights,
+      healthLoading, orchestrationLoading, actionQueueLoading, timelineLoading, insightsLoading]);
+
   // Mutations
   const approvePO = useApprovePurchaseOrder();
   const startBatch = useStartProductionBatch();
@@ -147,36 +167,46 @@ export function NewDashboardPage() {
         {/* Main Dashboard Layout */}
         <div className="space-y-6">
           {/* SECTION 1: Bakery Health Status */}
-          <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
+          <ErrorBoundary componentName="HealthStatusCard">
+            <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
+          </ErrorBoundary>
 
           {/* SECTION 2: What Needs Your Attention (Action Queue) */}
-          <ActionQueueCard
-            actionQueue={actionQueue}
-            loading={actionQueueLoading}
-            onApprove={handleApprove}
-            onViewDetails={handleViewDetails}
-            onModify={handleModify}
-          />
+          <ErrorBoundary componentName="ActionQueueCard">
+            <ActionQueueCard
+              actionQueue={actionQueue}
+              loading={actionQueueLoading}
+              onApprove={handleApprove}
+              onViewDetails={handleViewDetails}
+              onModify={handleModify}
+            />
+          </ErrorBoundary>
 
           {/* SECTION 3: What the System Did for You (Orchestration Summary) */}
-          <OrchestrationSummaryCard
-            summary={orchestrationSummary}
-            loading={orchestrationLoading}
-          />
+          <ErrorBoundary componentName="OrchestrationSummaryCard">
+            <OrchestrationSummaryCard
+              summary={orchestrationSummary}
+              loading={orchestrationLoading}
+            />
+          </ErrorBoundary>
 
           {/* SECTION 4: Today's Production Timeline */}
-          <ProductionTimelineCard
-            timeline={productionTimeline}
-            loading={timelineLoading}
-            onStart={handleStartBatch}
-            onPause={handlePauseBatch}
-          />
+          <ErrorBoundary componentName="ProductionTimelineCard">
+            <ProductionTimelineCard
+              timeline={productionTimeline}
+              loading={timelineLoading}
+              onStart={handleStartBatch}
+              onPause={handlePauseBatch}
+            />
+          </ErrorBoundary>
 
           {/* SECTION 5: Quick Insights Grid */}
-          <div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
-            <InsightsGrid insights={insights} loading={insightsLoading} />
-          </div>
+          <ErrorBoundary componentName="InsightsGrid">
+            <div>
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
+              <InsightsGrid insights={insights} loading={insightsLoading} />
+            </div>
+          </ErrorBoundary>
 
           {/* SECTION 6: Quick Action Links */}
           <div className="bg-white rounded-xl shadow-md p-6">