@dreamhorizonorg/pulse-web
Advanced tools
Pulse observability SDK for web — OpenTelemetry-based RUM, sessions, errors, web vitals, network, and click instrumentation
OpenTelemetry-based web SDK for Pulse RUM telemetry.
Captures:
yarn add @dreamhorizonorg/pulse-web
npm install @dreamhorizonorg/pulse-web
PulseProvider from @dreamhorizonorg/pulse-web/react does everything in one shot:
Pulse.init on mountPulseErrorBoundaryReact (CRA / Vite):
import { PulseProvider } from '@dreamhorizonorg/pulse-web/react'
import { PulseDataCollectionConsent } from '@dreamhorizonorg/pulse-web'
const config = {
apiKey: 'your-project-key',
serviceName: 'my-app',
dataCollectionState: PulseDataCollectionConsent.ALLOWED,
}
<PulseProvider config={config}>
<App />
</PulseProvider>
Next.js App Router: the compiled SDK dist does not include "use client", so PulseProvider cannot be imported directly from a Server Component. Create a thin wrapper first:
// app/providers/PulseProvider.tsx
'use client'
import { PulseProvider as SDKPulseProvider } from '@dreamhorizonorg/pulse-web/react'
export function PulseProvider({ config, children }: { config: any; children: React.ReactNode }) {
return <SDKPulseProvider config={config} shutdownOnUnmount={false}>{children}</SDKPulseProvider>
}
Then use the wrapper in layout.tsx:
// app/layout.tsx
import { PulseProvider } from './providers/PulseProvider'
import { PulseDataCollectionConsent } from '@dreamhorizonorg/pulse-web'
const config = {
apiKey: process.env.NEXT_PUBLIC_PULSE_API_KEY,
serviceName: 'my-app',
dataCollectionState: PulseDataCollectionConsent.ALLOWED,
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<PulseProvider config={config}>
{children}
</PulseProvider>
</body>
</html>
)
}
After mount, these signals auto-capture with zero extra work:
| Signal | Trigger |
|---|---|
session.start / session.end | Tab open / close |
http | Every fetch / XMLHttpRequest |
app.click | User clicks anywhere |
web_vital | LCP, FID, CLS, TTFB, FCP, INP |
screen_load | Navigation timing (incl. tti on initial load when available) |
device.crash | Uncaught JS errors + React render errors (via built-in PulseErrorBoundary) |
useRouterTracking from @dreamhorizonorg/pulse-web/react requires react-router-dom — it won't work in Next.js. Add this null-rendering component once inside <PulseProvider> in layout.tsx:
// app/components/PulsePageView.tsx
'use client'
import { usePathname } from 'next/navigation'
import { useEffect } from 'react'
import { Pulse } from '@dreamhorizonorg/pulse-web'
export function PulsePageView() {
const pathname = usePathname()
useEffect(() => { Pulse.setScreenName(pathname) }, [pathname])
return null
}
// layout.tsx — add inside <PulseProvider>
<PulseProvider config={config}>
<PulsePageView />
{children}
</PulseProvider>
For React Router apps, use the built-in hook instead — no extra component needed:
import { useRouterTracking } from '@dreamhorizonorg/pulse-web/react'
useRouterTracking() // inside a component rendered within <BrowserRouter>
Pulse.init(config)Pulse.shutdown()Pulse.isInitialized()Pulse.setScreenName(name)Pulse.trackEvent(name, attrs?)Pulse.reportException(error, attrs?)Pulse.reportDeviceCrash(error, attrs?)Pulse.trackNonFatal(name, attrs?)Interaction configs are fetched from:
default-project*_*): {collector→8080}/v1/interaction-configs/ with X-API-KEYhttps://pulse-otel-collector.pulse-ux.com/config/projects/{projectId}/interaction-config.json (no /v1/interaction-configs/ — search DevTools for interaction-config.json)Remote pulse-config.json may set features[].interaction.sessionSampleRate < 1 for pulse_web_js; interaction spans stay gated, but the SDK still loads interaction configs when instrumentations.interactions is not enabled: false.
Web runtime now uses backend/Android wire shape directly:
id: numberdescription: stringname (not key)EQUALS | NOTEQUALS | CONTAINS | NOTCONTAINS | STARTSWITH | ENDSWITHglobalBlacklistedEvents is an array of event objects# Node >= 18.13
corepack enable
yarn install
# Build SDK
yarn build
# Run demo apps
yarn demo # React ecommerce-demo → localhost:3002
yarn demo:docs # Vanilla web-sdk-docs → localhost:3003
# Typecheck + unit tests
yarn lint
yarn test:run
# One-time browser install
cd examples/ecommerce-demo
yarn playwright install --with-deps chromium firefox webkit
# From SDK root
cd ../..
yarn workspace ecommerce-demo e2e:m2-interactions
yarn workspace ecommerce-demo e2e:web-sdk-gates
docs/prd/README.md — feature PRDs under docs/prd/; PRD.md in that folder symlinks to the active Ralph PRD when applicabledocs/instrumentations/integration/SPEC.mddocs/instrumentations/sdk-core/SPEC.mddocs/instrumentations/docs/publishing/SPEC.md · docs/publishing/QUICKSTART.md · docs/publishing/PUBLISHING.mdFAQs
Pulse observability SDK for web — OpenTelemetry-based RUM, sessions, errors, web vitals, network, and click instrumentation
The npm package @dreamhorizonorg/pulse-web receives a total of 24 weekly downloads. As such, @dreamhorizonorg/pulse-web popularity was classified as not popular.
We found that @dreamhorizonorg/pulse-web demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js is debating whether AI-driven security report volume warrants moving more vulnerability reports into public workflows.
Security News
PolinRider expands across npm, Packagist, Go modules, and Chrome extensions, using hidden loaders to target developer environments.
Security News
Open source attacks are accelerating as AI coding agents pull in dependencies faster, with less human review.