posthog-js/dist/posthog-recorder.d.ts

Posthog-js allows you to automatically capture usage and send events to PostHog.

//#region ../rrweb/types/dist/index.d.ts
//#region src/index.d.ts
declare enum EventType {
  DomContentLoaded = 0,
  Load = 1,
  FullSnapshot = 2,
  IncrementalSnapshot = 3,
  Meta = 4,
  Custom = 5,
  Plugin = 6
}
type domContentLoadedEvent = {
  type: EventType.DomContentLoaded;
  data: unknown;
};
type loadedEvent = {
  type: EventType.Load;
  data: unknown;
};
type fullSnapshotEvent = {
  type: EventType.FullSnapshot;
  data: {
    node: serializedNodeWithId;
    initialOffset: {
      top: number;
      left: number;
    };
  };
};
type incrementalSnapshotEvent = {
  type: EventType.IncrementalSnapshot;
  data: incrementalData;
};
type metaEvent = {
  type: EventType.Meta;
  data: {
    href: string;
    width: number;
    height: number;
  };
};
type customEvent<T = unknown> = {
  type: EventType.Custom;
  data: {
    tag: string;
    payload: T;
  };
};
type pluginEvent<T = unknown> = {
  type: EventType.Plugin;
  data: {
    plugin: string;
    payload: T;
  };
};
declare enum IncrementalSource {
  Mutation = 0,
  MouseMove = 1,
  MouseInteraction = 2,
  Scroll = 3,
  ViewportResize = 4,
  Input = 5,
  TouchMove = 6,
  MediaInteraction = 7,
  StyleSheetRule = 8,
  CanvasMutation = 9,
  Font = 10,
  Log = 11,
  Drag = 12,
  StyleDeclaration = 13,
  Selection = 14,
  AdoptedStyleSheet = 15,
  CustomElement = 16
}
type mutationData = {
  source: IncrementalSource.Mutation;
} & mutationCallbackParam;
type mousemoveData = {
  source: IncrementalSource.MouseMove | IncrementalSource.TouchMove | IncrementalSource.Drag;
  positions: mousePosition[];
};
type mouseInteractionData = {
  source: IncrementalSource.MouseInteraction;
} & mouseInteractionParam;
type scrollData = {
  source: IncrementalSource.Scroll;
} & scrollPosition;
type viewportResizeData = {
  source: IncrementalSource.ViewportResize;
} & viewportResizeDimension;
type inputData = {
  source: IncrementalSource.Input;
  id: number;
} & inputValue;
type mediaInteractionData = {
  source: IncrementalSource.MediaInteraction;
} & mediaInteractionParam;
type styleSheetRuleData = {
  source: IncrementalSource.StyleSheetRule;
} & styleSheetRuleParam;
type styleDeclarationData = {
  source: IncrementalSource.StyleDeclaration;
} & styleDeclarationParam;
type canvasMutationData = {
  source: IncrementalSource.CanvasMutation;
} & canvasMutationParam;
type fontData = {
  source: IncrementalSource.Font;
} & fontParam;
type selectionData = {
  source: IncrementalSource.Selection;
} & selectionParam;
type adoptedStyleSheetData = {
  source: IncrementalSource.AdoptedStyleSheet;
} & adoptedStyleSheetParam;
type customElementData = {
  source: IncrementalSource.CustomElement;
} & customElementParam;
type incrementalData = mutationData | mousemoveData | mouseInteractionData | scrollData | viewportResizeData | inputData | mediaInteractionData | styleSheetRuleData | canvasMutationData | fontData | selectionData | styleDeclarationData | adoptedStyleSheetData | customElementData;
type eventWithoutTime = domContentLoadedEvent | loadedEvent | fullSnapshotEvent | incrementalSnapshotEvent | metaEvent | customEvent | pluginEvent;
type eventWithTime = eventWithoutTime & {
  timestamp: number;
  delay?: number;
};
type blockClass = string | RegExp;
type maskTextClass = string | RegExp;
type SamplingStrategy = Partial<{
  /**
   * false means not to record mouse/touch move events
   * number is the throttle threshold of recording mouse/touch move
   */
  mousemove: boolean | number;
  /**
   * number is the throttle threshold of mouse/touch move callback
   */
  mousemoveCallback: number;
  /**
   * false means not to record mouse interaction events
   * can also specify record some kinds of mouse interactions
   */
  mouseInteraction: boolean | Record<string, boolean | undefined>;
  /**
   * number is the throttle threshold of recording scroll
   */
  scroll: number;
  /**
   * number is the throttle threshold of recording media interactions
   */
  media: number;
  /**
   * 'all' will record all the input events
   * 'last' will only record the last input value while input a sequence of chars
   */
  input: "all" | "last";
  /**
   * 'all' will record every single canvas call
   * number between 1 and 60, will record an image snapshots in a web-worker a (maximum) number of times per second.
   *                          Number only supported where [`OffscreenCanvas`](http://mdn.io/offscreencanvas) is supported.
   */
  canvas: "all" | number;
}>;
interface ICrossOriginIframeMirror {
  getId(iframe: HTMLIFrameElement, remoteId: number, parentToRemoteMap?: Map<number, number>, remoteToParentMap?: Map<number, number>): number;
  getIds(iframe: HTMLIFrameElement, remoteId: number[]): number[];
  getRemoteId(iframe: HTMLIFrameElement, parentId: number, map?: Map<number, number>): number;
  getRemoteIds(iframe: HTMLIFrameElement, parentId: number[]): number[];
  reset(iframe?: HTMLIFrameElement): void;
}
type RecordPlugin<TOptions = unknown> = {
  name: string;
  observer?: (cb: (...args: Array<unknown>) => void, win: IWindow, options: TOptions) => listenerHandler;
  eventProcessor?: <TExtend>(event: eventWithTime) => eventWithTime & TExtend;
  getMirror?: (mirrors: {
    nodeMirror: IMirror<Node>;
    crossOriginIframeMirror: ICrossOriginIframeMirror;
    crossOriginIframeStyleMirror: ICrossOriginIframeMirror;
  }) => void;
  options: TOptions;
};
type hooksParam = {
  mutation?: mutationCallBack;
  mousemove?: mousemoveCallBack;
  mouseInteraction?: mouseInteractionCallBack;
  scroll?: scrollCallback;
  viewportResize?: viewportResizeCallback;
  input?: inputCallback;
  mediaInteaction?: mediaInteractionCallback;
  styleSheetRule?: styleSheetRuleCallback;
  styleDeclaration?: styleDeclarationCallback;
  canvasMutation?: canvasMutationCallback;
  font?: fontCallback;
  selection?: selectionCallback;
  customElement?: customElementCallback;
};
type textMutation = {
  id: number;
  value: string | null;
};
type styleOMValue = {
  [key: string]: styleValueWithPriority | string | false;
};
type styleValueWithPriority = [string, string];
type attributeMutation = {
  id: number;
  attributes: {
    [key: string]: string | styleOMValue | null;
  };
};
type removedNodeMutation = {
  parentId: number;
  id: number;
  isShadow?: boolean;
};
type addedNodeMutation = {
  parentId: number;
  previousId?: number | null;
  nextId: number | null;
  node: serializedNodeWithId;
};
type mutationCallbackParam = {
  texts: textMutation[];
  attributes: attributeMutation[];
  removes: removedNodeMutation[];
  adds: addedNodeMutation[];
  isAttachIframe?: true;
};
type mutationCallBack = (m: mutationCallbackParam) => void;
type mousemoveCallBack = (p: mousePosition[], source: IncrementalSource.MouseMove | IncrementalSource.TouchMove | IncrementalSource.Drag) => void;
type mousePosition = {
  x: number;
  y: number;
  id: number;
  timeOffset: number;
};
declare enum MouseInteractions {
  MouseUp = 0,
  MouseDown = 1,
  Click = 2,
  ContextMenu = 3,
  DblClick = 4,
  Focus = 5,
  Blur = 6,
  TouchStart = 7,
  TouchMove_Departed = 8,
  TouchEnd = 9,
  TouchCancel = 10
}
declare enum PointerTypes {
  Mouse = 0,
  Pen = 1,
  Touch = 2
}
declare enum CanvasContext {
  "2D" = 0,
  WebGL = 1,
  WebGL2 = 2
}
type mouseInteractionParam = {
  type: MouseInteractions;
  id: number;
  x?: number;
  y?: number;
  pointerType?: PointerTypes;
};
type mouseInteractionCallBack = (d: mouseInteractionParam) => void;
type scrollPosition = {
  id: number;
  x: number;
  y: number;
};
type scrollCallback = (p: scrollPosition) => void;
type styleSheetAddRule = {
  rule: string;
  index?: number | number[];
};
type styleSheetDeleteRule = {
  index: number | number[];
};
type styleSheetRuleParam = {
  id?: number;
  styleId?: number;
  removes?: styleSheetDeleteRule[];
  adds?: styleSheetAddRule[];
  replace?: string;
  replaceSync?: string;
};
type styleSheetRuleCallback = (s: styleSheetRuleParam) => void;
type adoptedStyleSheetParam = {
  id: number;
  styles?: {
    styleId: number;
    rules: styleSheetAddRule[];
  }[];
  styleIds: number[];
};
type styleDeclarationParam = {
  id?: number;
  styleId?: number;
  index: number[];
  set?: {
    property: string;
    value: string | null;
    priority: string | undefined;
  };
  remove?: {
    property: string;
  };
};
type styleDeclarationCallback = (s: styleDeclarationParam) => void;
type canvasMutationCommand = {
  property: string;
  args: Array<unknown>;
  setter?: true;
};
type canvasMutationParam = {
  id: number;
  type: CanvasContext;
  commands: canvasMutationCommand[];
  displayWidth?: number;
  displayHeight?: number;
} | ({
  id: number;
  type: CanvasContext;
  displayWidth?: number;
  displayHeight?: number;
} & canvasMutationCommand);
type canvasMutationCallback = (p: canvasMutationParam) => void;
type CanvasMaskRegion = {
  x: number;
  y: number;
  width: number;
  height: number;
};
type CanvasMasking = {
  regionsFn?: (canvas: HTMLCanvasElement) => CanvasMaskRegion[] | null | undefined;
  configured?: () => boolean;
};
type fontParam = {
  family: string;
  fontSource: string;
  buffer: boolean;
  descriptors?: FontFaceDescriptors;
};
type fontCallback = (p: fontParam) => void;
type viewportResizeDimension = {
  width: number;
  height: number;
};
type viewportResizeCallback = (d: viewportResizeDimension) => void;
type inputValue = {
  text: string;
  isChecked: boolean;
  userTriggered?: boolean;
};
type inputCallback = (v: inputValue & {
  id: number;
}) => void;
declare enum MediaInteractions {
  Play = 0,
  Pause = 1,
  Seeked = 2,
  VolumeChange = 3,
  RateChange = 4
}
type mediaInteractionParam = {
  type: MediaInteractions;
  id: number;
  currentTime?: number;
  volume?: number;
  muted?: boolean;
  loop?: boolean;
  playbackRate?: number;
};
type mediaInteractionCallback = (p: mediaInteractionParam) => void;
type SelectionRange = {
  start: number;
  startOffset: number;
  end: number;
  endOffset: number;
};
type selectionParam = {
  ranges: Array<SelectionRange>;
};
type selectionCallback = (p: selectionParam) => void;
type customElementParam = {
  define?: {
    name: string;
  };
};
type customElementCallback = (c: customElementParam) => void;
type listenerHandler = () => void;
type KeepIframeSrcFn = (src: string) => boolean;
declare global {
  interface Window {
    FontFace: typeof FontFace;
  }
}
type IWindow = Window & typeof globalThis;
declare enum NodeType {
  Document = 0,
  DocumentType = 1,
  Element = 2,
  Text = 3,
  CDATA = 4,
  Comment = 5
}
type documentNode = {
  type: NodeType.Document;
  childNodes: serializedNodeWithId[];
  compatMode?: string;
};
type documentTypeNode = {
  type: NodeType.DocumentType;
  name: string;
  publicId: string;
  systemId: string;
};
type cssTextKeyAttr = {
  _cssText?: string;
};
type attributes = cssTextKeyAttr & {
  [key: string]: string | number | true | null;
};
type elementNode = {
  type: NodeType.Element;
  tagName: string;
  attributes: attributes;
  childNodes: serializedNodeWithId[];
  isSVG?: true;
  needBlock?: boolean;
  isCustom?: true;
};
type textNode = {
  type: NodeType.Text;
  textContent: string;
  /**
   * @deprecated styles are now always snapshotted against parent <style> element
   * style mutations can still happen via an added textNode, but they don't need this attribute for correct replay
   */
  isStyle?: true;
};
type cdataNode = {
  type: NodeType.CDATA;
  textContent: "";
};
type commentNode = {
  type: NodeType.Comment;
  textContent: string;
};
type serializedNode = (documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode) & {
  rootId?: number;
  isShadowHost?: boolean;
  isShadow?: boolean;
};
type serializedNodeWithId = serializedNode & {
  id: number;
};
interface IMirror<TNode> {
  getId(n: TNode | undefined | null): number;
  getNode(id: number): TNode | null;
  getIds(): number[];
  getMeta(n: TNode): serializedNodeWithId | null;
  removeNodeFromMap(n: TNode): void;
  has(id: number): boolean;
  hasNode(node: TNode): boolean;
  add(n: TNode, meta: serializedNodeWithId): void;
  replace(id: number, n: TNode): void;
  reset(): void;
}
type DataURLOptions = Partial<{
  type: string;
  quality: number;
  maxBase64ImageLength: number;
}>;
type PackFn = (event: eventWithTime) => string;
//#endregion
//#region ../rrweb/rrweb-snapshot/dist/rrweb-snapshot.d.ts
type MaskInputOptions = Partial<{
  color: boolean;
  date: boolean;
  "datetime-local": boolean;
  email: boolean;
  month: boolean;
  number: boolean;
  range: boolean;
  search: boolean;
  tel: boolean;
  text: boolean;
  time: boolean;
  url: boolean;
  week: boolean;
  textarea: boolean;
  select: boolean;
  password: boolean;
}>;
type SlimDOMOptions = Partial<{
  script: boolean;
  comment: boolean;
  headFavicon: boolean;
  headWhitespace: boolean;
  headMetaDescKeywords: boolean;
  headMetaSocial: boolean;
  headMetaRobots: boolean;
  headMetaHttpEquiv: boolean;
  headMetaAuthorship: boolean;
  headMetaVerification: boolean;
  /**
   * blocks title tag 'animations' which can generate a lot of mutations that aren't usually displayed in replayers
   **/
  headTitleMutations: boolean;
}>;
type MaskTextFn = (text: string, element: HTMLElement | null) => string;
type MaskInputFn = (text: string, element: HTMLElement) => string;
type MaskAttributeFn = (name: string, value: string, element: Element) => string;
declare class Mirror implements IMirror<Node> {
  private idNodeMap;
  private nodeMetaMap;
  getId(n: Node | undefined | null): number;
  getNode(id: number): Node | null;
  getIds(): number[];
  getMeta(n: Node): serializedNodeWithId | null;
  removeNodeFromMap(n: Node): void;
  has(id: number): boolean;
  hasNode(node: Node): boolean;
  add(n: Node, meta: serializedNodeWithId): void;
  replace(id: number, n: Node): void;
  reset(): void;
}
//#endregion
//#region ../rrweb/rrweb/dist/rrweb.d.ts
//#endregion
//#region src/types.d.ts
type recordOptions<T> = {
  emit?: (e: T, isCheckout?: boolean) => void;
  checkoutEveryNth?: number;
  checkoutEveryNms?: number;
  blockClass?: blockClass;
  blockSelector?: string;
  ignoreClass?: string;
  ignoreSelector?: string;
  maskTextClass?: maskTextClass;
  maskTextSelector?: string;
  maskAllInputs?: boolean;
  maskInputOptions?: MaskInputOptions;
  maskInputFn?: MaskInputFn;
  maskTextFn?: MaskTextFn;
  maskAllElementAttributes?: boolean;
  maskAttributeFn?: MaskAttributeFn;
  slimDOMOptions?: SlimDOMOptions | "all" | true;
  ignoreCSSAttributes?: Set<string>;
  /**
   * Limit which DOM attributes the MutationObserver watches, by passing the
   * list through to the native `MutationObserver.observe` `attributeFilter`.
   * When set, mutations to unlisted attributes never fire the observer
   * callback at all, so they cost no recording CPU - useful to exclude
   * high-frequency inline `style` mutations from JS-driven animations.
   *
   * Filtered attributes are invisible to replay, so only set this when that
   * loss of fidelity is acceptable. When omitted (or set to an empty array)
   * all attributes are observed, the default behaviour.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#attributefilter
   */
  attributeFilter?: string[];
  inlineStylesheet?: boolean;
  /**
   * Caps how many CSSRules a single full snapshot may stringify.
   * `stringifyStylesheet` walks every CSSRule of every sheet, which on CSS-heavy
   * pages is the dominant cost of the (uninterruptible) snapshot task and can
   * freeze the UI for seconds.
   *
   * Once the cap is hit, remaining `<link rel=stylesheet>` elements are serialized
   * without `_cssText` - they keep `rel`/`href` - and are then inlined across idle
   * callbacks, arriving as attribute mutations. The queue is flushed synchronously
   * (bounded) when recording stops and on `pagehide`, so in the common case every
   * deferred sheet still reaches the recording. The residual risk: replay falls
   * back to loading a sheet from its original href - which may be purged,
   * auth-gated, or renamed by then - only if the tab dies without `pagehide`
   * firing, the sheet does not fit the teardown flush's safety cap (the flush
   * skips sheets too big to finish, so one such sheet cannot starve the rest),
   * or stringifying the sheet fails; those last two are counted in
   * `getDeferredStylesheetStats()`.
   *
   * Unset or 0 means no cap (the default): every sheet is inlined synchronously.
   */
  inlineStylesheetBudgetRules?: number;
  hooks?: hooksParam;
  packFn?: PackFn;
  sampling?: SamplingStrategy;
  dataURLOptions?: DataURLOptions;
  canvasResolutionScale?: number;
  canvasMasking?: CanvasMasking;
  recordDOM?: boolean;
  recordCanvas?: boolean;
  recordCrossOriginIframes?: boolean;
  recordAfter?: "DOMContentLoaded" | "load";
  userTriggeredOnInput?: boolean;
  collectFonts?: boolean;
  inlineImages?: boolean;
  plugins?: RecordPlugin[];
  mousemoveWait?: number;
  keepIframeSrcFn?: KeepIframeSrcFn;
  errorHandler?: ErrorHandler;
};
declare global {
  interface Window {
    FontFace: typeof FontFace;
    Array: typeof Array;
  }
}
type ErrorHandlerContext = "rrweb" | "host";
type ErrorHandler = (error: unknown, context?: ErrorHandlerContext) => void | boolean;
//#endregion
//#region src/record/index.d.ts
declare function record<T = eventWithTime>(options?: recordOptions<T>): listenerHandler | undefined;
declare namespace record {
  var addCustomEvent: <T>(tag: string, payload: T) => void;
  var freezePage: () => void;
  var takeFullSnapshot: (isCheckout?: boolean) => void;
  var isRecording: () => boolean;
  var mirror: Mirror;
}
//#endregion
export { record as default };