Observability for Micro-Frontends

In this lesson, you will learn how to bridge the visibility gap between client-side user interactions and backend execution by correlating traces across federated micro-frontend architectures.

The Challenge of Distributed UI Context

In a federated architecture, a single user request might trigger code across three different micro-frontends (MFEs) and multiple backend microservices. When an error occurs, simply looking at backend logs is insufficient because the context—the specific "intent" initiated by the user in a remote MFE—is often lost. To achieve end-to-end observability, we must propagate a Trace Parent from the browser into our Node.js backend services.

Injecting and Propagating Context

The standard approach is to use W3C Trace Context headers (traceparent). When a micro-frontend makes an API call to your Node.js gateway or BFF (Backend for Frontend), it must inject the current trace ID into the headers.

On the server side, your Node.js application must be configured to extract this header and associate it with the incoming request's lifecycle. Here is how that looks conceptually using an OpenTelemetry middleware:

// Middleware to capture MFE context
app.use((req, res, next) => {
  const traceparent = req.headers['traceparent'];
  if (traceparent) {
    // The SDK automatically links the incoming trace 
    // to the spans created within this Node.js process
    telemetry.setContext(traceparent);
  }
  next();
});

By ensuring that the traceparent is passed through, any log entry or performance span generated by your Node.js service will be tagged with the same ID originating from the frontend.

Visualizing the Journey

Once these IDs are synchronized in your observability platform, you can perform "distributed tracing" that visualizes the path of a request:

1. Frontend: User clicks "Checkout" (MFE A).
2. Gateway: Node.js service receives request with traceparent.
3. Backend: Node.js service calls Inventory API using the same trace context.

When you search for the trace_id in your logs, you will see the UI event, the BFF processing time, and the backend service latency as a single, unified timeline, regardless of which team owns which micro-frontend.

Key Takeaway: Correlating micro-frontend events with backend traces requires mandatory propagation of W3C Trace Context headers across the network boundary to maintain a unified execution ID.