# @complyco/client-recorder-web 中文文档

规范地址：https://npmcn.com/package/%40complyco/client-recorder-web/

版本：0\.3\.1
npm 元数据更新时间：2026-08-08T07:14:15.103Z
中文译文更新时间：2026-11-10T13:44:35.823Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40complyco/client-recorder-web
原文对照：https://npmcn.com/package/%40complyco/client-recorder-web/?lang=original
项目主页：https://github.com/ComplyCo/client-widget-js#readme
源码仓库：https://github.com/ComplyCo/client-widget-js

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：83.2 kB，31 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：4 个
- 首次发布：2024-10-01T20:17:47.390Z
- 最新版本发布：2026-08-08T07:14:14.878Z
- 近 30 天下载量：8509（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 3 个）

## 中文简介

ComplyCo的客户端网络记录器

## 安装

```sh
npm install @complyco/client-recorder-web
```

也可以使用：`pnpm add @complyco/client-recorder-web`、`yarn add @complyco/client-recorder-web`、`bun add @complyco/client-recorder-web`

## README

# 客户端- 记录

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

## 开始

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

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

```ts
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后端时压缩录音.

## 反应实例

```tsx
"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;
}
```

## 常见问题

### @complyco/client-recorder-web 是什么？

ComplyCo的客户端网络记录器

### 如何安装 @complyco/client-recorder-web？

在项目目录运行 npm install @complyco/client-recorder-web，或使用 pnpm add / yarn add / bun add。

### @complyco/client-recorder-web 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @complyco/client-recorder-web 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @complyco/client-recorder-web 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @complyco/client-recorder-web 可以商用吗？

@complyco/client-recorder-web 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @complyco/client-recorder-web 的下载量有多少？

根据 npm 官方下载统计，@complyco/client-recorder-web 在 2026/10/11 – 2026/11/09 这 30 天内被下载 8,509 次，日均约 284 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @complyco/client-recorder-web 还在维护吗？

最新版本 0\.3\.1 发布于 2026/08/08（3 个月前）；至今共发布 11 个版本，其中过去 12 个月发布了 3 个；首次发布于 2024/10/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。