@whop-core/observability

Whop Observability Package

This package is designed to export standardized helpers and wrappers to cover every application in the Whop Frontend/Apps stack with observability. Our observability stack exists on top of Highlight, but is designed such that we can drop in any provider as we see fit. It exports numerous things, so we'll cover those down the list here.

• cf-otel.ts exports a function called instrumentCfWorker. This is used to instrument all our app components with Highlight.
• config-wrapper.ts exports a function called withObservabilityConfig. This is used to instrument our Next.JS apps on the server side.
• error-boundary.tsx exports a React component that renders the Highlight Error Boundary. This allows us to standardize the error state across our apps.
• highlight.ts exports the H helper from Highlight's client library. This ensures that we use the same version of Highlight across all of our apps, in case you need to call Highlight directly.
• identify-user.ts exports helpers to identify users in Highlight inside of a Whop App. It uses the Whop Apps SDK to retrieve the user and set the user in the current Highlight session.
• opentelemetry.ts exports everything from the @opentelemetry/api package
• track-event.ts exports a standardized method to track an analytics/observability event. It sends the event to both Highlight and PostHog, and if we want to add another provider, we can do so here to keep it standard for all apps.
• vercel-otel.ts exports a helper to configure Next.js instrumentation
• whop-apps-observability-provider.ts exports a React component that is designed to wrap a Whop App in the Highlight error boundary, initialize Highlight on the page, and identify the user with the session they are currently on.
• whop-core-observability-provider.ts exports a React component that is designed to wrap a Whop Core application in the Highlight error boundary and initialize Highlight on the page.