Chapter 13: Observability from the UI: Logging, Error Handling & Recovery

// utils/logger.js
const LOG_LEVELS = {
  DEBUG: 0,
  INFO: 1,
  WARN: 2,
  ERROR: 3,
};

const MIN_LOG_LEVEL = LOG_LEVELS.INFO; // Set this based on your environment (e.g., process.env.NODE_ENV)

function sendLogToRemote(logEntry) {
  // In a real application, you would send this to a remote logging service
  // e.g., Sentry, LogRocket, custom API endpoint, etc.
  // For now, we'll just log to console.
  if (MIN_LOG_LEVEL <= LOG_LEVELS[logEntry.level]) {
    console.log(`[${logEntry.level}]`, JSON.stringify(logEntry, null, 2));
    // Example of a real fetch call (would need a proper backend endpoint)
    /*
    fetch('/api/logs', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(logEntry),
    }).catch(err => console.error('Failed to send log to remote:', err));
    */
  }
}

const logger = {
  debug: (message, context = {}) => {
    sendLogToRemote({ level: 'DEBUG', timestamp: new Date().toISOString(), message, ...context });
  },
  info: (message, context = {}) => {
    sendLogToRemote({ level: 'INFO', timestamp: new Date().toISOString(), message, ...context });
  },
  warn: (message, context = {}) => {
    sendLogToRemote({ level: 'WARN', timestamp: new Date().toISOString(), message, ...context });
  },
  error: (message, error = null, context = {}) => {
    const errorDetails = error ? {
      errorMessage: error.message,
      errorStack: error.stack,
      errorName: error.name,
    } : {};
    sendLogToRemote({ level: 'ERROR', timestamp: new Date().toISOString(), message, ...context, ...errorDetails });
  },
};

export default logger;

// components/ChatInterface.js
import React, { useState, useCallback } from 'react';
import logger from '../utils/logger'; // Import our logger

// Assume these are available from previous chapters
// import { callAIService } from '../services/aiService';
// import { useSession } from '../context/SessionContext'; // For userId, sessionId

function ChatInterface() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  // const { userId, sessionId } = useSession(); // Get user and session ID from context

  const userId = 'user-123'; // Placeholder
  const sessionId = 'sess-abc'; // Placeholder

  const handleSendMessage = useCallback(async () => {
    if (!input.trim()) return;

    const userMessage = { id: Date.now(), text: input, sender: 'user' };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);

    // Log the initiation of the AI request
    logger.info('ai_request_initiated', {
      userId,
      sessionId,
      promptText: input,
      modelConfig: { model: 'gpt-4o-mini', temperature: 0.7 }, // Example config
      promptId: userMessage.id,
    });

    try {
      // Simulate an AI service call (replace with your actual AI service logic)
      const aiResponse = await new Promise(resolve => setTimeout(() => {
        if (Math.random() > 0.1) { // 90% success rate
          resolve(`Echo: "${userMessage.text}" - How can I assist further?`);
        } else { // 10% failure rate
          throw new Error('AI service temporarily unavailable.');
        }
      }, 1500));

      const aiMessage = { id: Date.now(), text: aiResponse, sender: 'ai' };
      setMessages(prev => [...prev, aiMessage]);

      // Log the successful AI response
      logger.info('ai_response_received', {
        userId,
        sessionId,
        promptId: userMessage.id,
        responseLength: aiResponse.length,
        latencyMs: 1500, // Placeholder
        tokenUsage: { promptTokens: 10, completionTokens: 20 }, // Placeholder
      });

    } catch (error) {
      const errorMessage = error.message || 'An unknown error occurred with the AI service.';
      const errorContext = {
        userId,
        sessionId,
        promptId: userMessage.id,
        errorType: 'AI_SERVICE_ERROR',
        promptText: userMessage.text,
      };
      logger.error('ai_error', error, errorContext); // Log the error

      setMessages(prev => [...prev, {
        id: Date.now(),
        text: `Error: ${errorMessage} Please try again.`,
        sender: 'system-error'
      }]);
    } finally {
      setIsLoading(false);
    }
  }, [input, userId, sessionId]);

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: 'auto', border: '1px solid #ccc', borderRadius: '8px' }}>
      <div style={{ height: '300px', overflowY: 'scroll', border: '1px solid #eee', marginBottom: '10px', padding: '10px' }}>
        {messages.map(msg => (
          <div key={msg.id} style={{ textAlign: msg.sender === 'user' ? 'right' : 'left', marginBottom: '8px' }}>
            <span style={{
              display: 'inline-block',
              padding: '8px 12px',
              borderRadius: '15px',
              backgroundColor: msg.sender === 'user' ? '#007bff' : (msg.sender === 'ai' ? '#e9ecef' : '#dc3545'),
              color: msg.sender === 'user' ? 'white' : 'black'
            }}>
              {msg.text}
            </span>
          </div>
        ))}
        {isLoading && <div style={{ textAlign: 'left', fontStyle: 'italic', color: '#666' }}>AI is thinking...</div>}
      </div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
        placeholder="Type your message..."
        style={{ width: 'calc(100% - 80px)', padding: '10px', borderRadius: '5px', border: '1px solid #ccc' }}
        disabled={isLoading}
      />
      <button
        onClick={handleSendMessage}
        style={{ width: '70px', padding: '10px', borderRadius: '5px', border: 'none', backgroundColor: '#28a745', color: 'white', marginLeft: '10px' }}
        disabled={isLoading}
      >
        Send
      </button>
    </div>
  );
}

export default ChatInterface;

    try {
      // AI service call
    } catch (error) {
      // Handle the error here
      logger.error('ai_error', error, errorContext);
      // Update UI to show error message
    } finally {
      // Cleanup, always runs
      setIsLoading(false);
    }

// Inside your handleSendMessage function's catch block
catch (error) {
  let errorMessageForUser = 'An unexpected error occurred. Please try again.';
  let errorType = 'UNKNOWN_ERROR';

  if (error instanceof TypeError && error.message === 'Failed to fetch') {
    // Network error
    errorMessageForUser = 'Network error: Please check your internet connection.';
    errorType = 'NETWORK_ERROR';
  } else if (error.response) { // Assuming error.response exists for HTTP errors (e.g., from Axios or custom fetch wrapper)
    const status = error.response.status;
    const data = await error.response.json(); // Or error.response.text()

    if (status === 401) {
      errorMessageForUser = 'Authentication failed. Please log in again.';
      errorType = 'AUTH_ERROR';
    } else if (status === 429) {
      errorMessageForUser = 'Too many requests. Please wait a moment and try again.';
      errorType = 'RATE_LIMIT_ERROR';
    } else if (status >= 500) {
      errorMessageForUser = 'AI service is currently unavailable. We are working to fix it.';
      errorType = 'AI_SERVICE_UNAVAILABLE';
    } else if (data && data.error && data.error.message) {
      // AI-specific error from response body
      errorMessageForUser = `AI Error: ${data.error.message}`;
      errorType = 'AI_API_ERROR';
    }
  } else if (error.message.includes('AI service temporarily unavailable')) {
    // Our simulated error
    errorMessageForUser = error.message;
    errorType = 'SIMULATED_AI_ERROR';
  }

  logger.error('ai_error', error, {
    userId,
    sessionId,
    promptId: userMessage.id,
    errorType,
    promptText: userMessage.text,
  });

  setMessages(prev => [...prev, {
    id: Date.now(),
    text: `Error: ${errorMessageForUser}`,
    sender: 'system-error'
  }]);
}

// components/ErrorBoundary.js
import React from 'react';
import logger from '../utils/logger'; // Import our logger

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  // This method is called after an error has been thrown by a descendant component.
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error };
  }

  // This method is called after an error has been thrown by a descendant component.
  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logger.error('ui_rendering_error', error, {
      componentStack: errorInfo.componentStack,
      // Add more context if available, e.g., userId, sessionId
    });
    this.setState({ errorInfo });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div style={{ padding: '20px', border: '1px solid red', backgroundColor: '#ffe6e6', borderRadius: '8px', color: '#cc0000' }}>
          <h2>Oops! Something went wrong in the UI.</h2>
          <p>We're sorry for the inconvenience. Please try refreshing the page or contact support.</p>
          {/* For development, you might show error details */}
          {process.env.NODE_ENV === 'development' && (
            <details style={{ whiteSpace: 'pre-wrap' }}>
              {this.state.error && this.state.error.toString()}
              <br />
              {this.state.errorInfo && this.state.errorInfo.componentStack}
            </details>
          )}
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// App.js (or a parent component)
import React from 'react';
import ErrorBoundary from './components/ErrorBoundary';
import ChatInterface from './components/ChatInterface'; // Our AI chat component

function App() {
  return (
    <ErrorBoundary>
      <ChatInterface />
    </ErrorBoundary>
  );
}

export default App;

// Simplified example of a retry function
async function callAIServiceWithRetry(prompt, retries = 3, delay = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      // Simulate API call
      const response = await new Promise((resolve, reject) => {
        setTimeout(() => {
          if (Math.random() > 0.3 || i === retries - 1) { // 70% chance of success, or force success on last retry
            resolve(`AI processed: "${prompt}" after ${i + 1} attempt(s).`);
          } else {
            reject(new Error(`Transient AI error on attempt ${i + 1}.`));
          }
        }, delay * (i + 1)); // Exponential-ish backoff
      });
      logger.info(`AI call successful on attempt ${i + 1}.`, { prompt });
      return response;
    } catch (error) {
      logger.warn(`AI call failed on attempt ${i + 1}. Retrying...`, { prompt, error: error.message });
      if (i === retries - 1) {
        throw error; // Re-throw if all retries failed
      }
    }
  }
}

// How you'd use it in ChatInterface:
// const aiResponse = await callAIServiceWithRetry(userMessage.text);

// Example for EventSource (if your backend uses SSE)
const eventSource = new EventSource('/api/ai-stream');

eventSource.onmessage = (event) => {
  // Process incoming message chunks
  logger.debug('ai_stream_chunk_received', { data: event.data });
};

eventSource.onerror = (error) => {
  // Log and handle streaming errors
  logger.error('ai_streaming_error', error, { userId, sessionId });
  eventSource.close(); // Close the connection to prevent further errors
  // Update UI: "Streaming interrupted. Please try again."
};

eventSource.onopen = () => {
  logger.info('ai_stream_opened', { userId, sessionId });
};

// Inside ChatInterface.js, modify handleSendMessage:
// ... (imports and state are the same)

  const MAX_RETRIES = 3;
  const BASE_RETRY_DELAY_MS = 1000; // 1 second

  const handleSendMessage = useCallback(async () => {
    if (!input.trim()) return;

    const userMessage = { id: Date.now(), text: input, sender: 'user' };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);

    logger.info('ai_request_initiated', {
      userId,
      sessionId,
      promptText: input,
      modelConfig: { model: 'gpt-4o-mini', temperature: 0.7 },
      promptId: userMessage.id,
    });

    let aiResponse = null;
    let finalError = null;

    for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
      try {
        if (attempt > 0) {
          const delay = BASE_RETRY_DELAY_MS * (2 ** (attempt - 1)); // Exponential backoff
          logger.warn(`Retrying AI service in ${delay}ms (Attempt ${attempt + 1}/${MAX_RETRIES})...`, {
            userId, sessionId, promptId: userMessage.id,
          });
          setMessages(prev => [...prev, {
            id: Date.now() + attempt,
            text: `(Retrying AI... Attempt ${attempt + 1}/${MAX_RETRIES})`,
            sender: 'system-info'
          }]);
          await new Promise(resolve => setTimeout(resolve, delay));
        }

        const currentAttemptLatency = 1500 + Math.random() * 500; // Simulate varying latency
        const response = await new Promise(resolve => setTimeout(() => {
          // Simulate 70% success rate overall, but force success on last attempt for demonstration
          if (Math.random() > 0.3 || attempt === MAX_RETRIES - 1) {
            resolve(`Echo: "${userMessage.text}" - Processed on attempt ${attempt + 1}.`);
          } else {
            throw new Error(`AI service transient error.`);
          }
        }, currentAttemptLatency));

        aiResponse = response;
        logger.info('ai_response_received', {
          userId,
          sessionId,
          promptId: userMessage.id,
          responseLength: aiResponse.length,
          latencyMs: currentAttemptLatency,
          tokenUsage: { promptTokens: 10, completionTokens: 20 },
          attempt: attempt + 1,
        });
        break; // Success! Exit retry loop
      } catch (error) {
        finalError = error; // Keep track of the last error
        const errorContext = {
          userId, sessionId, promptId: userMessage.id,
          errorType: 'AI_SERVICE_TRANSIENT_ERROR',
          promptText: userMessage.text,
          attempt: attempt + 1,
        };
        logger.error(`ai_error_attempt_${attempt + 1}`, error, errorContext);
      }
    }

    if (aiResponse) {
      const aiMessage = { id: Date.now(), text: aiResponse, sender: 'ai' };
      setMessages(prev => [...prev, aiMessage]);
    } else {
      // All retries failed
      const errorMessage = finalError?.message || 'The AI service could not be reached after multiple attempts.';
      const errorContext = {
        userId, sessionId, promptId: userMessage.id,
        errorType: 'AI_SERVICE_FAILED_AFTER_RETRIES',
        promptText: userMessage.text,
        maxRetries: MAX_RETRIES,
      };
      logger.error('ai_error_all_retries_failed', finalError, errorContext);
      setMessages(prev => [...prev, {
        id: Date.now(),
        text: `Error: ${errorMessage} Please try again later.`,
        sender: 'system-error'
      }]);
    }
    setIsLoading(false);
  }, [input, userId, sessionId]);

// ... (rest of the component's JSX)