Skip to main content

​
Options

KeyArgumentsDescriptionExample
on_url_change(page: {hostname: string; url: string})Fired on each call for the reload method.on_url_change: (page) => console.log(page)
on_socket(event: {event: string; time: number})Fired on socket lifecycle events (channelJoin, joinChannelError, unmonitor, onError).on_socket: (e) => console.log(e)
on_autocapture(element: Element, type: string)Fired when an auto-captured event occurs (click, submit, change).on_autocapture: (el,t) => console.log({el,t})

​
Example: Handling Callbacks

callbacks: {
  on_url_change: (page) => {
    console.log(page); // {hostname: HOSTNAME, url: URL}
  },
  on_socket: (event) => {
    console.log(event); // {event: channelJoin | joinChannelError | unmonitor | onError, time: TIMESTAMP}
  },
  on_autocapture: (element, type) => {
    console.log({ element, type }); // {element: DOM, type: click | submit | change}
  }
}

// Masking page view url call
callbacks: {
  on_url_change: (page = {url, hostname}) => {
    page.hostname = "https://example.com"
    page.url = `${page.hostname}${new URL(page.url).pathname}`
  }
}

// logging element
callbacks: {
  on_autocapture: (el, type) => {
    let selector = el.tagName.toLowerCase();
    
    selector += (el.id ? `#${el.id}` : "");
    
    if (el.classList && el.classList.length > 0) {
      const classes = Array.from(el.classList)
        .filter(Boolean) // remove empty strings
        .map(cls => `.${cls}`)
        .join("");
    
      selector += classes;
    }

    console.log("logging ... ", selector, type)
  }
}

​
Type definitions

type CallbacksConfig = {
  on_url_change?: (page: { hostname: string; url: string }) => void;
  on_socket?: (event: { event: "channelJoin" | "joinChannelError" | "unmonitor" | "onError"; time: number }) => void;
  on_autocapture?: (element: Element, type: "click" | "submit" | "change") => void;
};

​
Troubleshooting

  • “My callback doesn’t fire” – Ensure the SDK is initialized with callbacks defined before events occur.
  • “Socket events not showing” – Verify network connections and channel join logic.
  • “Autocapture callback too noisy” – Combine with excluded_elements or masked_elements to reduce unwanted triggers.