diff --git a/.changeset/angry-ears-share.md b/.changeset/angry-ears-share.md new file mode 100644 index 00000000..3b938d72 --- /dev/null +++ b/.changeset/angry-ears-share.md @@ -0,0 +1,5 @@ +--- +'@hyperdx/browser': patch +--- + +feat: Add rrweb replay config diff --git a/packages/browser/README.md b/packages/browser/README.md index cd5f4109..d903b339 100644 --- a/packages/browser/README.md +++ b/packages/browser/README.md @@ -52,7 +52,24 @@ HyperDX.init({ ``` - `disableReplay` - (Optional) Whether to disable session replay (default `false`) - `recordCanvas` - (Optional) Whether to record canvas elements (default `false`) -- `sampling` - (Optional) The sampling [config](https://github.com/rrweb-io/rrweb/blob/5fbb904edb653f3da17e6775ee438d81ef0bba83/docs/recipes/optimize-storage.md?plain=1#L22) in the session recording +- `sampling` - (Optional) The sampling [config](https://github.com/rrweb-io/rrweb/blob/5fbb904edb653f3da17e6775ee438d81ef0bba83/docs/recipes/optimize-storage.md?plain=1#L22) in the session recording +- `replay` - (Optional) A passthrough for the underlying rrweb recorder + options, including `hooks` for observing events as rrweb captures them. + Explicit options (`maskAllInputs`, `recordCanvas`, `sampling`, etc.) take + precedence over the same fields set here. Example: + ```js + HyperDX.init({ + apiKey: '', + service: 'my-frontend-app', + replay: { + hooks: { + mutation: (...mutations) => { + // consumer-defined observation / filtering logic + }, + }, + }, + }); + ``` ## Additional Configuration diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts index ab7f656f..94674099 100644 --- a/packages/browser/src/index.ts +++ b/packages/browser/src/index.ts @@ -13,6 +13,8 @@ type ErrorBoundaryComponent = any; // TODO: Define ErrorBoundary type type Instrumentations = RumOtelWebConfig['instrumentations']; type IgnoreUrls = RumOtelWebConfig['ignoreUrls']; +type ReplayConfig = Omit; + type BrowserSDKConfig = { advancedNetworkCapture?: boolean; apiKey: string; @@ -29,6 +31,7 @@ type BrowserSDKConfig = { maskAllText?: boolean; maskClass?: string; recordCanvas?: boolean; + replay?: ReplayConfig; sampling?: RumRecorderConfig['sampling']; service: string; tracePropagationTargets?: (string | RegExp)[]; @@ -64,6 +67,7 @@ class Browser { maskAllText = false, maskClass, recordCanvas = false, + replay, sampling, service, tracePropagationTargets, @@ -127,6 +131,7 @@ class Browser { if (disableReplay !== true) { SessionRecorder.init({ + ...replay, apiKey, blockClass, debug,