Shared Observability Package

SkyWalking observability utilities shared across all ACS microfrontends.

Features

• Dual-mode support: Works in both composite (host-initialized) and standalone modes
• Automatic instrumentation: XHR/Fetch tracing, error capturing, performance monitoring
• MFE lifecycle tracking: Mount/unmount timing, route tracking
• User context: Attach user identity to all trace events
• Custom events: Report business-critical user actions

Installation

yarn add @saifraza/observability

Usage

Composite Mode (with host)

The host shell initializes SkyWalking once:

// custom-main-shell/Bootstrap.tsx
import { initSkyWalking } from '@saifraza/observability';

initSkyWalking({ service: 'custom-main-shell' });

MFEs import and use the Tracer:

// eops-mfe/App.tsx
import { Tracer, useMfeRouteTracker } from '@saifraza/observability';

const App = () => {
  useMfeRouteTracker();
  
  useEffect(() => {
    Tracer.mfeMounted('eops-mfe');
    return () => Tracer.mfeUnmounted('eops-mfe');
  }, []);
  
  return <Routes>...</Routes>;
};

Standalone Mode

MFE can initialize SkyWalking itself:

// publicsite-mfe/Bootstrap.tsx (standalone mode)
import { initSkyWalking, Tracer } from '@saifraza/observability';

initSkyWalking({ service: 'publicsite-mfe-standalone' });

API

initSkyWalking(overrides?)

Initialize the SkyWalking agent. Safe to call multiple times (subsequent calls are no-ops).

Tracer.mfeMounted(name)

Report MFE mount completion.

Tracer.mfeUnmounted(name)

Report MFE unmount.

Tracer.reportPageView(path)

Report client-side navigation.

Tracer.reportError(context, error)

Report caught errors to SkyWalking.

Tracer.setUserContext(userId, role, email?)

Attach user identity to traces.

Tracer.clearUserContext()

Clear user context on logout.

Tracer.reportCustomEvent(eventName, tags?)

Report business events.

useMfeRouteTracker()

React hook that automatically reports route changes.

Peer Dependencies

• react ^18.0.0 || ^19.0.0
• react-router-dom ^7.0.0
• skywalking-client-js ^1.0.0