React SDK

@happycatlabs/dancer-react is the browser package. Its source package is configured for restricted npm access. Obtain a project key and package access from your Dancer administrator before installing it.

The following example is copied from the source file exercised by the docs test. It records one product event and one handled exception without sending a network request during that test.

import { captureException, init, track } from "@happycatlabs/dancer-react";

export function recordExample(): void {
  init({ projectKey: "example-project-key", captureGlobalErrors: false });
  track("draft.saved", { source: "toolbar" });
  captureException(new Error("Example failure"), { screen: "editor" });
}

import { DancerErrorBoundary, init } from "@happycatlabs/dancer-react";

init({ projectKey: "your-project-key", app: { name: "example-web" } });

export function Root() {
  return (
    <DancerErrorBoundary fallback={<p>Something went wrong.</p>}>
      <main>Example app</main>
    </DancerErrorBoundary>
  );
}

Call captureException(error, context) for handled errors, addBreadcrumb({ message, category }) before relevant actions, and track(name, properties?) for bounded product events. Product event properties are flat scalar values. Do not put personal data, prompts, credentials, or message bodies in telemetry.

Use projectKey for the managed target. An explicit ingestUrl with projectKey, or a dsn, selects a different target. Do not combine a DSN with either of the other endpoint fields. Check the installed package and initialization options to determine the effective endpoint.

Current init options

The option names above come from the package's exported InitOptions source on each build. For request payloads, see types and HTTP.

Source exports