revert: Remove debugging infrastructure while keeping bug fixes
Removed: - ErrorBoundary component and all error boundary wrapping - Debug console.log statements from useReasoningTranslation - Debug useEffect in DashboardPage - Dev mode Dockerfile (Dockerfile.kubernetes.dev) - Dev mode Tilt configuration - Enhanced vite watcher config (depth, awaitWriteFinish, HMR overlay) Kept actual bug fixes: - String() coercion in translation functions - useMemo/useCallback for formatters - Null guards in components - Basic vite ignored patterns (node_modules, dist, .git) - Conditional rendering in DashboardPage
This commit is contained in:
@@ -1,68 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -151,70 +151,33 @@ export function useReasoningFormatter() {
|
||||
const translation = useReasoningTranslation();
|
||||
|
||||
const formatPOAction = useCallback((reasoningData?: ReasoningData) => {
|
||||
console.log('🔍 formatPOAction called with:', reasoningData);
|
||||
|
||||
if (!reasoningData) {
|
||||
const fallback = {
|
||||
return {
|
||||
reasoning: String(translation.translatePOReasonng({} as ReasoningData) || 'Purchase order required'),
|
||||
consequence: String(''),
|
||||
severity: String('')
|
||||
};
|
||||
console.log('🔍 formatPOAction: No reasoning data, returning fallback:', fallback);
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const reasoning = String(translation.translatePOReasonng(reasoningData) || 'Purchase order required');
|
||||
const consequence = String(translation.translateConsequence(reasoningData.consequence) || '');
|
||||
const severity = String(translation.translateSeverity(reasoningData.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;
|
||||
return { reasoning, consequence, severity };
|
||||
}, [translation]);
|
||||
|
||||
const formatBatchAction = useCallback((reasoningData?: ReasoningData) => {
|
||||
console.log('🔍 formatBatchAction called with:', reasoningData);
|
||||
|
||||
if (!reasoningData) {
|
||||
const fallback = {
|
||||
return {
|
||||
reasoning: String(translation.translateBatchReasoning({} as ReasoningData) || 'Production batch scheduled'),
|
||||
urgency: String('normal')
|
||||
};
|
||||
console.log('🔍 formatBatchAction: No reasoning data, returning fallback:', fallback);
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const reasoning = String(translation.translateBatchReasoning(reasoningData) || 'Production batch scheduled');
|
||||
const urgency = String(reasoningData.urgency?.level || 'normal');
|
||||
|
||||
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;
|
||||
return { reasoning, urgency };
|
||||
}, [translation]);
|
||||
|
||||
return {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* - Trust-building (explain system reasoning)
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { RefreshCw, ExternalLink } from 'lucide-react';
|
||||
import { useTenant } from '../../stores/tenant.store';
|
||||
@@ -34,7 +34,6 @@ 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();
|
||||
@@ -72,25 +71,6 @@ 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();
|
||||
@@ -167,12 +147,10 @@ export function NewDashboardPage() {
|
||||
{/* Main Dashboard Layout */}
|
||||
<div className="space-y-6">
|
||||
{/* SECTION 1: Bakery Health Status */}
|
||||
<ErrorBoundary componentName="HealthStatusCard">
|
||||
<HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />
|
||||
</ErrorBoundary>
|
||||
{healthStatus && <HealthStatusCard healthStatus={healthStatus} loading={healthLoading} />}
|
||||
|
||||
{/* SECTION 2: What Needs Your Attention (Action Queue) */}
|
||||
<ErrorBoundary componentName="ActionQueueCard">
|
||||
{actionQueue && (
|
||||
<ActionQueueCard
|
||||
actionQueue={actionQueue}
|
||||
loading={actionQueueLoading}
|
||||
@@ -180,33 +158,33 @@ export function NewDashboardPage() {
|
||||
onViewDetails={handleViewDetails}
|
||||
onModify={handleModify}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
)}
|
||||
|
||||
{/* SECTION 3: What the System Did for You (Orchestration Summary) */}
|
||||
<ErrorBoundary componentName="OrchestrationSummaryCard">
|
||||
{orchestrationSummary && (
|
||||
<OrchestrationSummaryCard
|
||||
summary={orchestrationSummary}
|
||||
loading={orchestrationLoading}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
)}
|
||||
|
||||
{/* SECTION 4: Today's Production Timeline */}
|
||||
<ErrorBoundary componentName="ProductionTimelineCard">
|
||||
{productionTimeline && (
|
||||
<ProductionTimelineCard
|
||||
timeline={productionTimeline}
|
||||
loading={timelineLoading}
|
||||
onStart={handleStartBatch}
|
||||
onPause={handlePauseBatch}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
)}
|
||||
|
||||
{/* SECTION 5: Quick Insights Grid */}
|
||||
<ErrorBoundary componentName="InsightsGrid">
|
||||
{insights && (
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user