Installation ​

Prerequisites: NPM Access Token on QAMF private repo:

Init ​

The recommended approach is the modern QApp component. The legacy plugin approach is still supported for backward compatibility.

QApp Component ​

The modern way is by wrapping your application with the QApp component.

This replaces the previous plugin-based initialization.

Call the setup observability method at the entry point file of your web application. The recommended path is to initialize your observability provider in the host application and pass Lighthouse a ready trackEvent function. This keeps provider bootstrap under application control and prepares consumers for future async setup requirements in @qamf/observability.

The colorMode property specifies the visual theme used in your portal. You can pass "light", "dark", or a custom string if your portal uses a different theme name.

The usageType property defines how you're using the Lighthouse design system. Use components-only if you're using just the components without styles and color modes, or full if you're also using the design system entirely.

The advancedTelemetry property (optional, default: false) enables component render tracking. When true, tracks each component render once per session and per view. Use it only in production or staging to optimize observability costs.

The trackEvent property lets your application inject a ready telemetry transport. If your app bootstraps observability asynchronously, await that setup before passing trackEvent to Lighthouse.

import { useObservability } from "@qamf/observability";
import { setupDsyObservability } from "@qamf/lighthouse";

const { trackEvent } = useObservability();

setupDsyObservability({
    colorMode: "light",
    usageType: "full",
    advancedTelemetry: false,
    trackEvent
});

Plugin Approach ​

The traditional plugin-based initialization is still supported for existing applications and combines both UI and observability layers.

import { useObservability } from "@qamf/observability";
import { createDsy } from "@qamf/lighthouse";

const { trackEvent } = useObservability();

createDsy({
    colorMode: "light",
    usageType: "full",
    advancedTelemetry: false,
    trackEvent,
    bootstrap: {
        orchestrator: true
    }
});

Import Styles ​

You can choose to import SASS or CSS file. Right now the only available theme is lighthouse with built-in light and dark mode.

Color Modes ​

You can choose between light and dark mode by adding data-bs-theme on your HTMLElement.

TypeScript Features ​

Component Typings and explicit exports