@ebdev/angular-monitor

The in-app runtime for the Angular Monitor Chrome DevTools extension.

This package only collects data inside your app. The viewer is the DevTools panel — install it from the Chrome Web Store before you wire this in. Docs, a live demo, and the full product live at angular-monitor.ebdev-design.com.

Angular exposes no public API that lets an extension read change detection, signals or RxJS from outside the app, so the collectors run inside it. This package is where they live: the DevTools panel is the viewer, and it has nothing to show until your app provides it.

Install

npm install @ebdev/angular-monitor
# pnpm add @ebdev/angular-monitor
# yarn add @ebdev/angular-monitor

Usage

import { bootstrapApplication } from '@angular/platform-browser';
import { providePerformanceMonitor } from '@ebdev/angular-monitor';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [providePerformanceMonitor()],
});

It is a no-op while the DevTools panel isn't open, and you'll usually want it in your development build only.

Development-only wiring

import { isDevMode } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [...(isDevMode() ? [providePerformanceMonitor()] : [])],
});

API

| Export | Description | | --- | --- | | providePerformanceMonitor(options?) | EnvironmentProviders that installs the bridge during app bootstrap. | | installRuntimeBridge() | Installs the bridge manually, outside Angular's DI. Returns a RuntimeHandle. | | RuntimeController | The controller class backing the bridge. | | detectCapabilities() | Reports the detected AngularEnvironment (version, zone/zoneless, signals, RxJS). | | safeCollect(fn, onError?) | Runs a collector, swallowing and reporting errors instead of breaking your app. | | notifySignalWrite() / notifyComputed() / notifyEffect() | Manual instrumentation hooks for signal activity. |

Options

providePerformanceMonitor({ level }) accepts a MonitorLevel of 0 | 1 | 2 | 3, trading detail for overhead — 0 collects the least, 3 the most.

Requirements

• rxjs ^7.8.0 — a peer dependency. It must resolve to the same rxjs instance your app uses; the RxJS collector patches Observable.prototype.subscribe and cannot see subscriptions created by a second, duplicate copy of rxjs.
• @angular/core >=17 <23 — an optional peer dependency. Required for providePerformanceMonitor(); the standalone helpers work without it.

Privacy

The runtime sends data only to the DevTools panel on the same page, over postMessage. Nothing is transmitted off-device. See the privacy policy.

License

MIT © Eliran Bar