Performance Monitoring

Performance Monitoring in Federated Micro Frontends

Monitoring the performance and reliability of federated micro frontends is critical to ensuring a seamless user experience, especially when shared components are loaded dynamically. Federated architectures introduce unique challenges, such as latency in shared libraries, version mismatches, and distributed error tracking. This section outlines key metrics, tools, and strategies for effectively monitoring federated micro frontend systems.

---

Key Metrics to Monitor

1. Core Web Vitals
2. Largest Contentful Paint (LCP): Measures time to render the largest content element.
3. First Input Delay (FID): Tracks responsiveness to user interactions.
4. Cumulative Layout Shift (CLS): Quantifies layout instability.

5. Use Web Vitals to collect and report these metrics across federated components.

6. Shared Component Performance

7. Monitor load times, render times, and resource usage for shared libraries (e.g., via web-vitals or custom metrics).

8. Track dependency version mismatches using tools like pkg or npm audit.

9. Error Rates

10. Count JavaScript errors, network failures, and rendering issues in shared components.

11. Use Sentry or Bugsnag to capture and categorize errors.

12. Network Latency

13. Measure time-to-first-byte (TTFB) and transfer durations for federated bundles.
14. Use browser devtools or tools like Lighthouse for detailed analysis.

---

Tools for Performance Monitoring

Tool	Purpose	Example Use Case
Lighthouse	Audits performance, accessibility, and SEO	Run npx lighthouse https://your-app.com to analyze federated components
Web Vitals	Tracks core metrics in real-time	Integrate with React via web-vitals to log LCP/FID/CLS
New Relic / Datadog	Application Performance Monitoring (APM)	Monitor latency and errors across micro frontend boundaries
Sentry	Error tracking and crash reporting	Capture unhandled exceptions in shared libraries
Grafana + Prometheus	Custom dashboards for metrics	Visualize load times and error rates for federated bundles

Example: Web Vitals Integration in React

import { useLayoutEffect } from 'react';
import { registerPerformanceMetrics } from 'web-vitals';

registerPerformanceMetrics({
  lcp: (metric) => console.log('LCP:', metric.value, 'ms'),
  fid: (metric) => console.log('FID:', metric.value, 'ms'),
  cls: (metric) => console.log('CLS:', metric.value),
});

---

Centralized Logging and Error Tracking

• Aggregate logs from all micro frontends using tools like ELK Stack (Elasticsearch, Logstash, Kibana) or Splunk.
• Correlate errors with specific shared components by including version identifiers in logs (e.g., shared-library@1.2.3).
• Use structured logging to tag events with component names, version, and context.

Example: Structured Logging in Node.js

const winston = require('winston');

const logger = winston.createLogger({
  transports: [
    new winston.transports.Console({
      format: winston.format.combine(
        winston.format.timestamp(),
        winston.format.printf(({ timestamp, level, message }) => {
          return `${timestamp} [${level}]: ${message}`;
        })
      ),
    }),
  ],
});

// Log shared component errors
logger.error('Shared component failed to load', { component: 'ui-library', version: '2.1.0' });

---

Real-Time Monitoring and Alerts

• Set up real-time dashboards in Grafana or Datadog to visualize metrics like LCP, error rates, and network latency.
• Configure threshold-based alerts for critical issues (e.g., FID > 400ms, CLS > 0.25).
• Use Sentry to trigger alerts for unhandled exceptions in shared components.

Example: Grafana Dashboard for Federated Metrics
- Panels:
- LCP Distribution (histogram)
- Error Rate by Component (bar chart)
- Network Latency Trends (line chart)
- Alerts: Trigger when LCP > 2500ms or error rate > 5% for any component.

---

Diagram: Federated Micro Frontend Monitoring Architecture

[User]  
    |  
    v  
[Browser] ------------------------> [Micro Frontend 1]  
    |                                |  
    |                                v  
    |                      [Shared Library A]  
    |                                |  
    |                                v  
[Performance Metrics] <----------- [Monitoring Tools]  
    |                                |  
    |                                v  
[Web Vitals] [Error Logs] [Network Latency] [APM Tools]  

---

Key takeaways

• Use Web Vitals and Lighthouse to track core performance metrics.
• Monitor shared components for version mismatches and latency.
• Implement centralized logging to correlate errors across federated boundaries.
• Set up real-time alerts for critical performance thresholds.
• Combine APM tools (e.g., New Relic) with custom metrics for granular insights.