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/types/api.ts

@@ -10,6 +10,9 @@
  *
  * Thrown when the server returns a non-2xx HTTP status code.
  * Use the `type` discriminator to handle different error categories.
+ *
+ * The correlation_id enables tracing this error through request logs
+ * on both frontend and backend systems for debugging distributed issues.
  */
 export interface ApiErrorPayload {
   type: "api_error";
@@ -25,6 +28,8 @@ export interface ApiErrorPayload {
   detail?: string;
   /** Optional structured context for the error (e.g., field names, constraint violations). */
   metadata?: Record<string, string | number | boolean | null>;
+  /** Unique ID for correlating this error with request logs on both frontend and backend. */
+  correlationId?: string;
 }
 
 /**

frontend/src/types/response.ts

@@ -33,4 +33,6 @@ export interface ErrorResponse {
   detail: string;
   /** Optional structured context for the error (field names, constraint violations, etc.). */
   metadata: Record<string, string | number | boolean | null | undefined>;
+  /** Unique ID for correlating this error with request logs on both frontend and backend. */
+  correlation_id?: string;
 }