End-to-End Observability

OpenTelemetry implementation for distributed tracing from browser click to Julia inference

CNC Optimizer Performance Analysis

The Visibility Gap

Where does the time go?

14s
User-perceived latency
~1s
Julia solver time

Request Flow Architecture

🌐
Browser
React / Next.js
HTTP + traceparent
☁️
CNC AppService
Azure / .NET
Service Bus + baggage
📨
Service Bus
Azure Queue
Diagnostic-Id header
🔗
QSM Sidecar
C# / gRPC
RPC + trace context
🧮
Julia Inference
HiGHS Optimizer
Single Trace ID propagates end-to-end
00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01
Component Details

Implementation Phases

0
Discovery & Baseline
1 day

Establish current state and measurement baseline

  • Analyze frontend instrumentation points
  • Map backend trace injection locations
  • Document infrastructure gaps
  • Measure 14-second breakdown
1
Quick Wins
1-2 days

Add immediate visibility with manual timing

  • Performance API marks
  • Console timing output
  • Backend Stopwatch logging
  • Basic timing dashboard
2
OpenTelemetry Foundation
1 week

Implement distributed tracing infrastructure

  • Design trace schema
  • Deploy OTel Collector
  • Frontend WebTracerProvider
  • Backend ActivitySource
  • Julia telemetry integration
3
Frontend Optimization
1 week

Optimize React rendering and reduce client-side time

  • Profile soft refresh behavior
  • Apply React.memo optimizations
  • Implement surgical state updates
  • Add Web Vitals monitoring
4
Dashboards & Alerting
3-5 days

Create operational dashboards

  • Azure Monitor dashboard
  • Grafana Tempo integration
  • User-facing performance view
  • SLA alerting rules
5
Documentation Site
2-3 days

Build the observability guide

  • Interactive architecture diagram
  • Step-by-step implementation guide
  • Tooling comparison matrix
  • Troubleshooting guides

Deep Dives

OpenTelemetry Azure Monitor Grafana Tempo React .NET 8 Julia HiGHS ARM64/AMD64