JavaScript SDK ⁠-⁠ 初始化 SDK

安装

以下行将为您安装追踪器及其 SDK，让您可以利用所有追踪器功能。

npm i @openreplay/tracker

初始化

在实例化 OpenReplay 追踪器时，您可以提供多种配置选项，以自定义录制的许多方面和录制体验。

您必须在构造函数中设置 projectKey 选项。您可以在 OpenReplay 仪表板的 ‘Preferences > Projects’ 下找到此值。

单页应用程序 (SPA)

如果您的网站是单页应用程序 (SPA)，请使用以下代码：

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
	projectKey: PROJECT_KEY
});
tracker.start(); // 返回一个带有会话信息的 promise (sessionID, sessionHash, userUUID)

服务器端渲染 (SSR)

否则，如果您的网络应用是服务器端渲染 (SSR)（例如 NextJS，NuxtJS），请使用下面的代码片段。确保在应用启动后调用 tracker.start()（在 useEffect 或 componentDidMount 中）。

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
	projectKey: PROJECT_KEY,
});
//...
function MyApp() {
  useEffect(() => { // 如果是 React 类组件，请使用 componentDidMount
  tracker.start(); // 返回一个带有会话信息的 promise (sessionID, sessionHash, userUUID)
  }, [])
}

示例

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest", // 当处理 OpenReplay 的自托管版本时
  capturePerformance: true,
  __DISABLE_SECURE_MODE: true // 本地测试时使用
});

初始化选项

您可以向构造函数传递一组选项。只有 projectKey 是必需的。

通用目的

projectKey: string 您正在跟踪的项目的 ID。
sessionHash?: string 初始会话的哈希值。当会话在您的网络应用的不同子域间穿越，但您希望将它们缝合成一条录制时，这很有用。如果无法继续会话（不存在或已结束），追踪器将自动启动一个新的。在 stop() 上也返回。更多细节在这里。
ingestPoint?: string 您的 OpenReplay 域名（例如 https://openreplay.mydomain.com/ingest），追踪器将向其发送事件。对于 OpenReplay 云用户，这是可选的。默认值：https://api.openreplay.com/ingest（指向 OpenReplay 云）。
revID?: string 您网络应用的修订 ID。在寻找特定发布版本上发生的问题时很有用。
resourceBaseHref?: string 指向可公开访问的域名，OpenReplay 可以从中获取资产（样式，字体和图标）。由于这些资源对于正确的会话重放是必需的，此选项对于绕过您的站点（因此资产）托管在私有域名中的限制很有用。例如：https://mypublicsite.com/assets/。
captureIFrames?: boolean 用于捕获您网络应用中所有同一域名的 iFrames。如果您希望跟踪特定的 iFrame，则只需将 data-openreplay-capture HTML 属性添加到 <iframe> 标签。默认值：true。
disableClickmaps?: boolean 用于禁用点击地图。默认值：true。
verbose?: boolean 用于启用日志。默认值：false。
autoResetOnWindowOpen?: boolean 启用此选项以在从您的应用中打开新标签时重置会话 ID。这将覆盖 window.open 方法，以避免由于浏览器标签之间共享的会话存储而导致的重复会话 ID。默认值：false。
forceSingleTab: boolean 禁用多标签录制功能。默认值：false。
disableStringDict: boolean 禁用录制中的字符串字典逻辑（用于优化存储）。默认值：false。

隐私

respectDoNotTrack?: boolean 如果用户浏览器中启用了不跟踪标志，则不启动追踪器。默认值：false。
obscureTextEmails?: boolean 在文本元素中隐藏电子邮件。电子邮件将被转换为随机的星号链。默认值：true。
obscureTextNumbers?: boolean 在文本元素中隐藏数字。数字将被转换为随机的星号链。默认值：false。
obscureInputEmails?: boolean 在输入字段中隐藏电子邮件。电子邮件值将被转换为随机的星号链。默认值：true。
obscureInputNumbers?: boolean 在输入字段中隐藏数字。数字值将被转换为随机的星号链。默认值：false。
obscureInputDates?: boolean 在输入字段中隐藏日期。日期值将被转换为随机的星号链。默认值：false。
defaultInputMode?: 0 | 1 | 2 输入值的默认捕获模式。分别是：明文、模糊或忽略。默认值：1（模糊）。

请注意，排除的数据在发送到 OpenReplay 服务器之前被模糊化或抑制。对上述选项的更改无法追溯，并且仅适用于新收集的数据。请参阅数据消毒了解更多细节。

控制台

consoleMethods?: Array<'log' | 'info' | 'warn' | 'error' 'debug' | 'assert'> | null 指定要捕获的控制台方法列表。默认值：['log', 'info', 'warn', 'error', 'debug', 'assert']
consoleThrottling?: number 每秒捕获的控制台条目的最大数量。默认值：30。

异常

captureExceptions?: boolean 捕获 JavaScript 异常和堆栈跟踪。默认值：true。

计时

captureResourceTimings?: boolean 记录资源计时。默认值：true。
capturePageLoadTimings?: boolean 记录页面加载计时。默认值：true。
capturePageRenderTimings?: boolean 计算页面渲染指标，如速度指数、视觉完成或交互时间。需要 captureResourceTimings = true。默认值：true。

性能

capturePerformance?: boolean 用于捕获性能指标，如帧率、CPU 和内存消耗。默认值：true。

网络

network 选项与捕获 fetch 和 XHR 的网络请求和负载有关。

network?: {
	failuresOnly: boolean;
	sessionTokenHeader: string;
	ignoreHeaders: Array<string> | boolean;
	capturePayload: boolean; // 在启用之前确保您已消毒数据
	sanitizer: (RequestResponseData) => RequestResponseData | null;
	captureInIframes: boolean;
	axiosInstances: AxiosInstance[];
	useProxy?: boolean;
	tokenUrlMatcher?: (url: string) => boolean;
}

请参见网络选项获取示例和更多关于如何编辑敏感数据的详细信息。

鼠标指针

mouse 选项与捕获点击以构建点击地图的选择器有关。

mouse?:
{
  disableClickmaps?: boolean
  minSelectorDepth?: number
  nthThreshold?: number
  maxOptimiseTries?: number
}

disableClickmaps?: boolean 完全禁用选择器计算。默认值：false。
minSelectorDepth?: number 优化选择器的最小长度（默认为 2）。例如：body > div > div > p => body > p
nthThreshold?: number 在回退到 nth-child 选择器之前的选择器尝试次数。这是一个昂贵的操作，可能会产生重大开销，不要设置高于 2000。默认值：1000。
maxOptimiseTries?: number 尝试优化和缩短选择器的次数。默认值：10 000。

重新连接

connAttemptCount?: number 当追踪器的 HTTP 请求无法到达后端时的最大重试次数。默认值：10。
connAttemptGap?: number 每次重试尝试之间的持续时间（以毫秒为单位）。默认值：8000。

安全性

__DISABLE_SECURE_MODE?: boolean 允许在没有 SSL 的站点上追踪器与后端之间的不安全连接。这应该仅用于开发目的。默认值：false。