客户端- 记录

此软件包允许您在您的网络应用程序中设置网络会话记录 .

开始

请注意 baseUrl 来源于您在ComplyCO的仪表板上注册的客户端. 它会看起来像 app-<...>.client.complyco.com。 。 。 .

这个 onAuthTokenRequested 调用需要击中您后端的端点, 而后端的端点被配置为生成并签名 JWT . 您在 ComplyCO 仪表板上注册的客户端应当配置与所使用的私钥对应的公钥 在您的后端 API 中签名.

import { createClientRecorder } from "@complyco/client-recorder-web";
import { GzipPlugin } from "@complyco/client-recorder-web/plugins";

// initialize the recorder once for your pageload
const recorder = createClientRecorder({
  syncOptions: {
    baseUrl: process.env.NEXT_PUBLIC_WIDGET_API as string,
    onAuthTokenRequested,
    plugins: [GzipPlugin],
  },
});

// if your JWT callback function changes, you can pass in your new one
recorder.setOnAuthTokenRequested(onAuthTokenRequested);

// start the recording; you only need to do this once.
// NOTE: The argument is optional. This example shows the defaults
recorder.record({
  blockClass: "complyco-block",
  ignoreClass: "complyco-ignore",
  maskTextClass: "complyco-mask",
  maskAllInputs: true,
  captureNavigation: false,
});

// stops the recording and forces a sync to ComplyCO's backend.
recorder.shutdown();

化妆

默认情况下所有输入都被遮住,但您可以选择解析所有输入. 与 maskAllInputs 设置为 true (默认值),标出任何您想要被卸载的字段 data-complyco-unmask="true" 或 complyco-unmask 类(例如:. <input class="complyco-unmask"> 或者说 <select data-complyco-unmask="true">) (中文(简体) ). 使用这个来保持特定的非敏感字段的可见度(例如产品名下放),同时将其他所有东西都遮住.

您可以用块、 忽略并遮盖文本类来配置记录器, 或者您可以使用我们的默认值 。 我们的默认是:

• apec 块
• 符合
• 调试任务

如果您的UI已经从 Sentry 的回放功能中拥有类, 您可以在引用时通过相应的类名 recorder.record(...)。 。 。 .

导航

这个 captureNavigation 选项允许您在单页应用程序中跟踪页面导航事件。 当启用时,它将记录通过下列方式发生的 URL 变化:

• 历史 API 调用 (pushState, (中文(简体) ), replaceState(中文(简体) )
• 向后浏览器导航
• 散列变化

插件

插件的使用是可选的,但在某些情况下它们可能会提供性能改进.

• GzipPlugin:发送到ComplyCO后端时压缩录音.

反应实例

"use client";
import { useState, useEffect } from "react";
import { createClientRecorder } from "@complyco/client-recorder-web";
import { GzipPlugin } from "@complyco/client-recorder-web/plugins";

export type AuthTracerProviderProps = {
  children: React.ReactNode;
  onAuthTokenRequested: any | undefined;
};

export default function AuthTracerProvider({ children, onAuthTokenRequested }: AuthTracerProviderProps) {
  const [recorder] = useState(() => {
    return createClientRecorder({
      syncOptions: {
        baseUrl: process.env.NEXT_PUBLIC_WIDGET_API as string,
        onAuthTokenRequested,
        plugins: [GzipPlugin],
      },
    });
  });

  useEffect(() => {
    if (onAuthTokenRequested) {
      recorder.setOnAuthTokenRequested(onAuthTokenRequested);
    }
  }, [recorder, onAuthTokenRequested]);

  useEffect(() => {
    recorder.record();

    return () => {
      recorder.shutdown();
    };
  });

  return null;
}