rrweb 文档
rrwebDocs

简体中文

English

简体中文

English

代理录制端点 ​

如果你希望避免在浏览器中暴露 api.rrweb.com 的录制端点，可以通过一些配置将它们代理出去。

为什么要代理录制端点？ ​

  • 技术原因：向第三方域名发送请求可能会遇到 CORS 问题
  • 避免被屏蔽：一旦 api.rrweb.com 被列入了分析服务提供商名单
  • 合规要求：例如在 GDPR 管辖范围内，你的服务只能使用预先批准的域名。我们默认使用欧盟数据中心，并且可以在代理之后于后端满足任何额外的合规要求。

添加一条从你拥有的子域名指向 api.rrweb.com 的 CNAME，将 serverUrl 指向它，并把该子域名告知我们以便加入白名单。

为 rrweb Cloud 录制设置一个独立的子域名，是将请求转发给我们的最直接方法。 这可以通过在你域名的 DNS 配置中添加一条 CNAME 记录来实现。你的托管服务商会提供相应的操作指南。

DNS

;; Sample DiG output:
events.my-domain.com. 86400 IN  CNAME api.rrweb.com.

本示例中使用了 events 作为子域名，但你可以使用任意名称。 配置生效后，将浏览器客户端指向你自己的子域名：

html
<script type="module">
  import { start } from 'https://cdn.rrweb.com/browser-client/next/browser-client.js';

  start({
    publicApiKey: 'your-public-api-key-here',
    serverUrl:
      'https://events.my-domain.com/recordings/{recordingId}/events/ws',
  });
</script>

最后一步：将你使用的子域名告知我们，以便我们将其加入允许列表。

转发整个子域名意味着下文提到的各个 API 端点也可以通过该子域名访问，例如 rrwebcloud.my-domain.com/recordings/{recordingId}/events/ws。

通过自有服务器上的路径代理 ​

INFO

本指南其余内容仅在你无法或不希望进行 CNAME 转发时才相关，例如你无法访问网站的 DNS 系统。以下细节仅作为参考草案，rrweb Cloud 团队可以协助你完成首次配置。

配置 serverUrl ​

浏览器客户端的默认 serverUrl 是 https://api.rrweb.com/recordings/{recordingId}/events/ws。通过 script 标签安装时，若省略该值，也可以从托管脚本的 URL 推断出来。

你可以在启动配置中通过设置 serverUrl 参数来提供不同的值。本示例中以 my-domain.com/proxy 作为你需要的示例端点：

"serverUrl": "https://my-domain.com/proxy/{recordingId}/events/ws"

上述配置要求代理一组额外的 URL 模式，该模式由上述 serverUrl 值派生而来：

  • https://my-domain.com/proxy/([0-9a-f])+/events/ws（用于 WebSocket）
  • https://my-domain.com/proxy/([0-9a-f])+/events（用于 POST 请求）

以下是 nginx 配置示例：

nginx

location ~ /proxy/(?<recordingId>.+)/events/ws {
    proxy_pass https://api.rrweb.com/recordings/$recordingId/events/ws;
    # websocket upgrade headers:
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}
location ~ /proxy/(?<recordingId>.+)/events {
    proxy_pass https://api.rrweb.com/recordings/$recordingId/events;
    proxy_set_header Host $host;
}

如需协助完成配置，请联系我们。

我可以从自己的域名提供录制器脚本吗？ ​

可以。请通过你自己的源代理 CDN 脚本，使其与我们的后端保持同步更新。请勿将该文件复制到你的服务器上。

如果你按照浏览器客户端中的说明使用 script 标签引入浏览器客户端，并且希望从你自己的域名提供该 JavaScript 文件，那么请务必对该文件进行_代理_，而不是将其复制到你的服务器上，因为我们会与后端服务器的变更保持同步，定期更新该文件。

如果你代理 UMD 全局构建版本，例如通过 <script src="https://my-domain.com/record.umd.min.cjs" autostart async> 提供服务，那么除非你显式提供 serverUrl，否则该 JavaScript 文件会检查自身的 URL 并使用以下 URL 模式：

nginx

# proxy the js you have specified in the <script> tag above
location ~ /record.umd.min.cjs {
    proxy_pass https://cdn.rrweb.com/browser-client/next/browser-client.umd.min.cjs;
}
# these paths are autogenerated without an explicit `serverUrl` param
location ~ /recordings/(?<recordingId>.+)/events/ws {
    proxy_pass https://api.rrweb.com/recordings/$recordingId/events/ws;
    # websocket upgrade headers:
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}
location ~ /recordings/(?<recordingId>.+)/events {
    proxy_pass https://api.rrweb.com/recordings/$recordingId/events;
    proxy_set_header Host $host;
}

我可以省略 {recordingId} 占位符吗？ ​

注意： URL 中特殊的 {recordingId} 部分在实际使用时会被替换为真实的 UUID。如果你需要省略它，recordingId 将改为以 GET 参数的形式添加。这需要由代理服务器将其转换为上述示例中展示的正确 URL 模式；不过，我们的后端目前尚不支持以 GET 参数传递 recordingId 的方式。