ug-fms-sdk

Browser SDK for the Frontend Monitoring System. Automatically captures JavaScript errors, Core Web Vitals, and user interactions, then sends them to your FMS backend.

Install

npm install ug-fms-sdk
# or
pnpm add ug-fms-sdk

web-vitals is an optional peer dependency. Add it to get Core Web Vitals (LCP, CLS, INP, FCP, TTFB):

npm install web-vitals

Usage

Call init() once as early as possible in your app entry point.

import { init } from 'ug-fms-sdk';

init({
  apiKey:   'your-project-api-key',   // from the FMS dashboard
  endpoint: 'https://your-fms-server.example.com',
});

React

// main.tsx
import { init } from 'ug-fms-sdk';

init({ apiKey: import.meta.env.VITE_FMS_API_KEY, endpoint: import.meta.env.VITE_FMS_ENDPOINT });

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

Next.js

// app/layout.tsx  (or _app.tsx for pages router)
import { init } from 'ug-fms-sdk';

if (typeof window !== 'undefined') {
  init({ apiKey: process.env.NEXT_PUBLIC_FMS_API_KEY!, endpoint: process.env.NEXT_PUBLIC_FMS_ENDPOINT! });
}

Configuration

| Option | Type | Default | Description | |---|---|---|---| | apiKey | string | required | Project API key from the FMS dashboard | | endpoint | string | required | FMS backend URL (no trailing slash) | | bufferSize | number | 20 | Flush immediately when this many events accumulate | | flushInterval | number | 5000 | Auto-flush interval in milliseconds | | collectors.errors | boolean | true | Capture JS errors and unhandled rejections | | collectors.performance | boolean | true | Capture Core Web Vitals and resource timing | | collectors.interactions | boolean | true | Capture clicks, navigation, and session events |

What is collected

• Errors — window.onerror, unhandledrejection
• Performance — LCP, CLS, INP, FCP, TTFB (via web-vitals), resource timing
• Interactions — clicks (with CSS selector), SPA navigation (patches history.pushState), page visibility changes

Each event includes: sessionId, url, userAgent, timestamp.

Cleanup

const fms = init({ ... });
// later:
fms.destroy(); // stops collectors, flushes remaining events

License

MIT