Telemetry Layout Bridge

A host layout that forwards routing and micro-app lifecycle details to a telemetry sink.

Capabilities

Route change telemetry

• On every change of routeInfo, emit a telemetry payload containing the pathname and matched app name exactly once per change via the provided sender. @test

App enter telemetry

• When appEnter data is present, emit a telemetry payload before rendering children that includes the app name, entry path, and timestamp, and ensure repeated renders with the same data are not double-sent. @test

App leave telemetry

• When appLeave data is present, emit a telemetry payload after unmount that includes the app name, leave path, and timestamp. @test

Route context access

• Expose the latest routeInfo through a hook so nested components can read the active pathname and matched app without prop drilling. @test

Implementation

@generates

API

import React from "react";

export interface RouteInfo {
  pathname: string;
  matchedApp?: {
    name: string;
    path: string;
  };
}

export interface AppLifecycleEvent {
  name: string;
  path: string;
  timestamp: number;
  extras?: Record<string, unknown>;
}

export type TelemetryPayload =
  | { type: "route-change"; routeInfo: RouteInfo }
  | { type: "app-enter"; app: AppLifecycleEvent }
  | { type: "app-leave"; app: AppLifecycleEvent };

export type SendTelemetry = (payload: TelemetryPayload) => Promise<void> | void;

export interface TelemetryLayoutProps {
  routeInfo: RouteInfo;
  appEnter?: AppLifecycleEvent;
  appLeave?: AppLifecycleEvent;
  sendTelemetry: SendTelemetry;
  renderApp: () => React.ReactNode;
}

export function TelemetryLayout(props: TelemetryLayoutProps): JSX.Element;

export function useLatestRoute(): RouteInfo;

Dependencies { .dependencies }

@ice/plugin-icestark { .dependency }

Provides micro-frontend routing context and lifecycle data.