Client API

📦 init(options)

import { init } as palette from "@palette.dev/browser";

init({
  key: "your-client-api-key",
});

Paramaters

options

Property	Description	Values
key	The client API key	String
version	The name of the release	String (optional)
plugins	A list of plugins that enable	Plugin[]
debug	Enable debug mode	Boolean (default: false)
enabled	Whether to enable Palette	Boolean (default: true)
beforeSend	Callback to mutate events before data transport	BeforeSend (optional)
beforeSendTags	Callback to mutate tags before data transport	BeforeSendTags (optional)

📦 beforeSend(event: Event): Event

Paramaters

event

Property	Description	Values
type	The of the event	"paint.click" | "paint.keydown" | "paint.scroll" | "paint.mark" | "paint.mousemove" | "network.resource" | "network.navigation" | "profile" | "markers.mark" | "markers.measure" | "events.load" | "events.dcl" | "events.longtask" | "events.window.blur" | "events.window.close" | "events.window.focus" | "events.window.resize" | "events.window.show" | "events.window.hide" | "events.window.minimize" | "events.window.maximize" | "events.window.restore" | "events.window.closed" | "events.window.move" | "events.click" | "events.scroll" | "events.mousemove" | "events.keypress" | "vitals.cls" | "vitals.fcp" | "vitals.fid" | "vitals.lcp" | "vitals.ttfb"
details	Data associated with the event	string | JSONObject | undefined

Example: Appending additonal data to events

const beforeSend = (event) => {
  if (event.type === "paint.keydown") {
    event.details = {
      ...event.details,
      additionalDetails: "some info",
    };
  }
  // Modify the event before sending
  return event;
};

Returns

• Event — the (possibly modified) event object to send.

📦 beforeSendTags(tags: Tags): Tags

A callback function that allows you to modify, filter, or add to the tags before they are sent with the payload. This is useful for dynamically adding context or redacting sensitive information from tags.

Parameters

tags

An object containing all the tags that have been set for the session.

Property	Description	Values
tags	The current tags object	Record<string, string>

Returns

• Tags — the (possibly modified) tags object to send.
• null or undefined — return to keep the original tags unchanged.

Example: Adding dynamic tags before send

import { init } from "@palette.dev/browser";

init({
  key: "your-api-key",
  beforeSendTags: (tags) => {
    return {
      ...tags,
      userId: "user-123",
      orgId: "org-456",
    };
  },
});

Example: Redacting sensitive information

import { init } from "@palette.dev/browser";

init({
  key: "your-api-key",
  beforeSendTags: (tags) => {
    const { email, ...safeTags } = tags;
    return safeTags;
  },
});