你可以在全局和/或细粒度级别清理 OpenReplay 所捕获的内容。任何被遮蔽或忽略的数据都不会在源头被捕获。换句话说，这些数据永远不会离开用户的浏览器。

在设置 OpenReplay 时，可以在 tracker 级别清理数据。

1. 在 ‘Preferences > Projects’ 下点击你项目的 Tracking Code。
2. 数据录制选项应该会显示在代码片段之前：

• Inputs：用于忽略、遮蔽或记录所有用户的输入值。
• Do not record any numeric text：用于忽略文本元素中包含的数字值。
• Do not record email addresses：默认情况下，文本元素中包含的所有电子邮件都会被遮蔽，并且不会出现在回放中。你可以通过取消勾选该复选框来禁用此功能。

3. 更改数据录制选项会影响代码片段。请务必将更新后的脚本复制粘贴到你的 Web 应用中。

你可以向构造函数传递一组与隐私相关的选项：

• obscureTextEmails?: boolean 遮蔽文本元素中的电子邮件。电子邮件将被转换为随机的星号串。默认值：true。
• obscureTextNumbers?: boolean 遮蔽文本元素中的数字。数字将被转换为随机的星号串。默认值：false。
• obscureInputEmails?: boolean 遮蔽输入字段中的电子邮件。电子邮件值将被转换为随机的星号串。默认值：true。
• obscureInputNumbers?: boolean 遮蔽输入字段中的数字。数字值将被转换为随机的星号串。默认值：false。
• obscureInputDates?: boolean 遮蔽输入字段中的日期。日期值将被转换为随机的星号串。默认值：false。
• defaultInputMode?: 0 | 1 | 2 输入值的默认捕获模式。分别为：明文、遮蔽或忽略。默认值：1（遮蔽）。

经过清理的文本、电子邮件和数字会在数据发送到 OpenReplay 服务器之前被遮蔽或删除。因此，对上述选项所做的更改不能追溯生效，仅适用于新收集的数据。

你也可以在代码级别清理数据，以获得更精细的粒度控制。这对于遮蔽或忽略 DOM 元素和输入字段非常有用。

• data-openreplay-obscured 用于遮蔽 <input> 标签、<img> 以及其他 HTML 元素（例如 <div>）的文本内容，但 <svg> 和 <canvas> 除外。

<!--Obscuring input fields-->
<form action="/action_page.php">
  Name: <input type="text" name="fname" data-openreplay-obscured><br>
  <input type="submit" value="Submit">
</form>
<!--Obscuring a div element-->
<div style="background-color:lightblue" data-openreplay-obscured>
  <h3>This is a sensitive information</h3>
  <p>This is an important paragraph</p>
  <img src="important_image.jpg">
</div>

• data-openreplay-hidden 用于删减 <input> 标签、<img>、<svg> 以及其他 HTML 元素（例如 <div>）的内容，但 <canvas> 除外。元素的内容（包括其子组件）会被移除，但其 props 和参数会被保留，如以下示例所示：

<div style="background-color:lightblue" data-openreplay-hidden>
  <div>This is a sensitive information</div>
  <svg>An important chart</svg>
</div>

这将导致 tracker 录制以下 DOM：

<div style="background-color:lightblue" data-openreplay-hidden>
</div>

• domSanitizer: (node: Element) => SanitizeLevel 函数可以避免对每个需要清理的 HTML 组件进行单独标注。SanitizeLevel 可以是 Plain (0)、Obscured (1) 或 Hidden (2)。该函数会传递给 tracker 的构造函数。下面是一个删减所有具有特定 CSS 类名的 HTML 元素的示例：

// Import SanitizeLevel enum
import Tracker, { SanitizeLevel } from "@openreplay/tracker";

const tracker = new Tracker({
  projectKey: PROJECT_KEY,
  domSanitizer: (node: Element) => {
    const elementClassNames = node.classList

    if (elementClassNames.contains('to_be_redacted_class')) {
      return SanitizeLevel.Hidden
    }

    if (node.id === 'sensitiveData') {
      return SanitizeLevel.Obscured
    }

    return SanitizeLevel.Plain
  }
})
tracker.start()

注意： 所有被清理的元素都会在源头（tracker）级别被遮蔽/删减，因此敏感数据永远不会到达 OpenReplay 实例。

你可以使用 OpenReplay SDK 来清理网络数据和应用程序状态。

捕获请求/响应可能会记录你的应用程序正在发送/接收的高度敏感或私密的信息。请务必妥善删减你的网络数据。

使用 sanitizer 选项从 Fetch/XHR 请求/响应中删减敏感数据。有关更多详细信息，请参阅网络选项。

此外，请查看这篇关于如何捕获和清理网络请求的分步教程。

要清理 GraphQL 数据，你需要在调用 tracker 之前克隆操作中的关键变量和结果。有关更多详细信息，请参阅如何清理 GraphQL 中录制的数据。

使用 OpenReplay SDK 从你的前端状态存储中清除敏感数据。

使用 actionFilter、actionTransformer 和 stateTransformer 选项从你的 store 中删减敏感的 action 和子树。有关更多详细信息，请参阅 redux 插件文档。

使用 filter、transformer 和 mutationTransformer 选项从你的 store 中删减敏感的 mutation 和子树。有关更多详细信息，请参阅 vuex 插件文档。

使用 filter、transformer 和 mutationTransformer 选项从你的 store 中删减敏感的 mutation 和子树。有关更多详细信息，请参阅 zustand 插件文档。

使用 filter、transformer 和 mutationTransformer 选项从你的 store 中删减敏感的 mutation 和子树。有关更多详细信息，请参阅 pinia 插件文档。

使用 actionFilter、actionTransformer 和 stateTransformer 选项从你的 store 中删减敏感的 action 和子树。有关更多详细信息，请参阅 ngrx 插件文档。

我们一直在不断改进与隐私相关的功能，因此如果你需要我们尚未支持的功能，请告诉我们。如果你在清理数据时遇到问题，请通过我们的 Slack 联系我们，或查看我们的论坛并从我们的社区获取帮助。