Implementing Observability in JavaScript Microfrontends with OpenTelemetry and Grafana Loki

Why Observability Matters in Microfrontends

When a single-page application is split into dozens of independently deployed microfrontends, a failure in one fragment can cascade into a poor user experience across the entire site. A 2023 survey by the Cloud Native Computing Foundation reported that 68% of teams cite debugging latency issues as their top pain point. Without a unified view of request flows, latency spikes and JavaScript errors become isolated islands of data, making root‑cause analysis time‑consuming and error‑prone.

Observability bridges that gap by collecting traces, metrics, and logs that travel together across module boundaries. In the context of JavaScript microfrontends, tracing the lifecycle of a user action—from a button click in one widget to an API call triggered by another—provides the context needed to pinpoint which fragment introduced the latency.

Getting Started with OpenTelemetry in a JavaScript Microfrontend

OpenTelemetry offers a vendor‑agnostic API that works both in the browser and in Node.js. Begin by adding the core SDK and a few instrumentations that cover the most common browser interactions.

npm install @opentelemetry/sdk-trace-web @opentelemetry/sdk-trace-base @opentelemetry/instrumentation @opentelemetry/instrumentation-fetch @opentelemetry/instrumentation-document-load

After installation, initialize the tracer in the entry point of each microfrontend. The following snippet creates a WebTracerProvider, registers fetch and document‑load instrumentations, and sends spans to the console for early validation.

import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { ConsoleSpanExporter } from '@opentelemetry/sdk-trace-base';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';

const provider = new WebTracerProvider();
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.register();

registerInstrumentations({
  instrumentations: [
    new FetchInstrumentation(),
    new DocumentLoadInstrumentation(),
  ],
});

Each microfrontend can share the same provider instance via a global variable or a tiny bootstrap script, ensuring that spans from different fragments are part of a single trace context.

Routing Traces to Grafana Loki

Grafana Loki excels at aggregating log streams, but it can also store structured trace payloads when combined with the OpenTelemetry Collector. Deploy a lightweight collector container and configure it to forward spans to Loki’s HTTP endpoint.

First, add the collector exporter to the project:

npm install @opentelemetry/exporter-collector

Then extend the initialization code to use a BatchSpanProcessor that points to the collector’s URL. Replace https://loki.example.com/api/v1/push with your actual Loki endpoint.

import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';

const collectorOptions = {
  url: 'https://loki.example.com/api/v1/push',
  headers: { 'Content-Type': 'application/json' },
};

const exporter = new CollectorTraceExporter(collectorOptions);
provider.addSpanProcessor(new BatchSpanProcessor(exporter));

With this configuration, every span generated by the microfrontend is serialized as JSON and pushed to Loki. In Grafana, you can create a “Traces” panel that queries the Loki data source, filters by trace ID, and visualizes the end‑to‑end latency of a user journey across fragments.

Practical Tips for Frontend Tracing

1. Propagate Trace Context Manually: When a microfrontend loads a remote script or communicates via postMessage, explicitly forward the traceparent header. This prevents context loss between isolated bundles.

2. Sample Strategically: Browser environments generate many spans. Use a probabilistic sampler (e.g., 10% of sessions) to keep payload size manageable while still capturing representative data.

3. Correlate with Logs: Attach the trace ID to console logs or to a custom logger. Loki can then join logs and traces, giving you a single pane of glass for debugging.

4. Version Tagging: Include the microfrontend’s version number as an attribute on every span. When a regression appears, you can quickly isolate the offending version without digging through deployment pipelines.

Conclusion

Implementing observability in JavaScript microfrontends does not require a heavyweight APM suite. By leveraging OpenTelemetry for instrumentation and Grafana Loki for storage, teams gain end‑to‑end visibility with minimal runtime overhead. The key is to standardize tracer initialization, ensure trace context flows across module boundaries, and push structured spans to Loki where they can be queried alongside logs. With these building blocks in place, debugging latency spikes becomes a systematic, data‑driven process rather than a guessing game.

Author: Mahmut Sarıkaya — sarikayadev.com

Sources

OpenTelemetry JavaScript Documentation

Grafana Loki Official Guide

Cloud Native Computing Foundation Survey 2023