Implement frontend and backend observability alignment

Align frontend and backend error observability with correlation IDs and
structured telemetry for distributed tracing across systems.

Backend changes:
- Add CorrelationIdMiddleware to generate/extract correlation IDs
- Include correlation_id in all ErrorResponse objects
- Store correlation ID in structlog contextvars for automatic inclusion in logs
- Add correlation ID to response headers (X-Correlation-ID)

Frontend changes:
- API client automatically generates session-scoped UUID4 and includes
  X-Correlation-ID header in all requests
- Extract correlation ID from API error responses
- Update error handlers to use telemetry with correlation IDs
- Add telemetry logging to ErrorBoundary, PageErrorBoundary, SectionErrorBoundary
- Implement redaction utilities for privacy-safe logging of sensitive data

Documentation:
- Add observability guidelines to Web-Development.md
  * Correlation ID usage patterns
  * Privacy & security best practices
  * Telemetry event structure
  * Redaction utilities for sensitive data
- Add distributed tracing architecture section to Architecture.md
  * Correlation ID flow across frontend/backend
  * Example troubleshooting scenario
  * Implementation details for future enhancements

Testing:
- Add comprehensive tests for correlation middleware
- Update error boundary tests to verify telemetry integration
- Verify TypeScript and ESLint pass with no warnings

Fixes: Issue #40 - Frontend and backend observability are not aligned

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/components/ErrorBoundary.tsx

@@ -4,9 +4,13 @@
  * Catches render-time exceptions in child components and shows a fallback UI.
  * This is the base component; use PageErrorBoundary or SectionErrorBoundary
  * for page and section-level boundaries.
+ *
+ * All errors are logged using the telemetry service with structured context
+ * for distributed tracing and debugging.
  */
 import React from "react";
 import { Button, makeStyles, Text, tokens } from "@fluentui/react-components";
+import { recordCritical } from "../utils/telemetry";
 
 interface ErrorBoundaryState {
   hasError: boolean;
@@ -102,6 +106,13 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
     const { onError } = this.props;
+
+    // Log the error using telemetry for distributed tracing
+    recordCritical("component_render_error", error, {
+      component_stack: errorInfo.componentStack,
+      error_message: error.message,
+    });
+
     if (onError) {
       onError(error, errorInfo);
     } else {