Skip to content

Commit

Permalink
Move assetCapture params to @rrweb/types and add them to meta events
Browse files Browse the repository at this point in the history
  • Loading branch information
@Juice10
Juice10 committed Nov 27, 2023
1 parent 13bfe1d commit 51ab260
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 88 deletions.
12 changes: 6 additions & 6 deletions docs/recipes/assets.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ The `inlineImages` configuration option is deprecated and should not be used any

The `assetCapture` configuration option allows you to customize the asset capture process. It is an object with the following properties:

- `captureObjectURLs` (default: `true`): This property specifies whether to capture same-origin `blob:` assets using object URLs. Object URLs are created using the `URL.createObjectURL()` method. Setting `captureObjectURLs` to `true` enables the capture of object URLs.
- `objectURLs` (default: `true`): This property specifies whether to capture same-origin `blob:` assets using object URLs. Object URLs are created using the `URL.createObjectURL()` method. Setting `objectURLs` to `true` enables the capture of object URLs.

- `captureOrigins` (default: `false`): This property determines which origins to capture assets from. It can have the following values:
- `origins` (default: `false`): This property determines which origins to capture assets from. It can have the following values:
- `false` or `[]`: Disables capturing any assets apart from object URLs.
- `true`: Captures assets from all origins.
- `[origin1, origin2, ...]`: Captures assets only from the specified origins. For example, `captureOrigins: ['https://s3.example.com/']` captures all assets from the origin `https://s3.example.com/`.
- `[origin1, origin2, ...]`: Captures assets only from the specified origins. For example, `origins: ['https://s3.example.com/']` captures all assets from the origin `https://s3.example.com/`.

## TypeScript Type Definition

Expand All @@ -26,14 +26,14 @@ export type recordOptions<T> = {
// Other configuration options...
inlineImages?: boolean;
assetCapture?: {
captureObjectURLs: boolean;
captureOrigins: string[] | true | false;
objectURLs: boolean;
origins: string[] | true | false;
};
// Other configuration options...
};
```

This type definition shows that `assetCapture` is an optional property of the `recordOptions` object. It contains the `captureObjectURLs` and `captureOrigins` properties, which have the same meanings as described above.
This type definition shows that `assetCapture` is an optional property of the `recordOptions` object. It contains the `objectURLs` and `origins` properties, which have the same meanings as described above.

## Conclusion

Expand Down
62 changes: 31 additions & 31 deletions guide.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,37 +135,37 @@ setInterval(save, 10 * 1000);

The parameter of `rrweb.record` accepts the following options.

| key | default | description |
| ------------------------ | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| emit | required | the callback function to get emitted events |
| checkoutEveryNth | - | take a full snapshot after every N events<br />refer to the [checkout](#checkout) chapter |
| checkoutEveryNms | - | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter |
| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
| ignoreSelector | null | Use a string to configure which selector should be ignored, refer to the [privacy](#privacy) chapter |
| ignoreCSSAttributes | null | array of CSS attributes that should be ignored |
| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
| maskAllInputs | false | mask all input content as \* |
| maskInputOptions | { password: true } | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
| maskInputFn | - | customize mask input content recording logic |
| maskTextFn | - | customize mask text content recording logic |
| slimDOMOptions | {} | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
| dataURLOptions | {} | Canvas image format and quality ,This parameter will be passed to the OffscreenCanvas.convertToBlob(),Using this parameter effectively reduces the size of the recorded data |
| inlineStylesheet | true | whether to inline the stylesheet in the events |
| hooks | {} | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
| recordCanvas | false | Whether to record the canvas element. Available options:<br/>`false`, <br/>`true` |
| recordCrossOriginIframes | false | Whether to record cross origin iframes. rrweb has to be injected in each child iframe for this to work. Available options:<br/>`false`, <br/>`true` |
| recordAfter | 'load' | If the document is not ready, then the recorder will start recording after the specified event is fired. Available options: `DOMContentLoaded`, `load` |
| inlineImages | false | whether to record the image content (deprecated, use `assetCapture` instead) |
| assetCapture | { captureObjectURLs: true, captureOrigins: false } | Configure the asset (image) capture and generates async asset events.<br/>Refer to the [asset capture documentation](./docs/recipes/assets.md) for more info. |
| collectFonts | false | whether to collect fonts in the website |
| userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
| plugins | [] | load plugins to provide extended record functions. [What is plugins?](./docs/recipes/plugin.md) |
| errorHandler | - | A callback that is called if something inside of rrweb throws an error. The callback receives the error as argument. |
| key | default | description |
| ------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| emit | required | the callback function to get emitted events |
| checkoutEveryNth | - | take a full snapshot after every N events<br />refer to the [checkout](#checkout) chapter |
| checkoutEveryNms | - | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter |
| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
| ignoreSelector | null | Use a string to configure which selector should be ignored, refer to the [privacy](#privacy) chapter |
| ignoreCSSAttributes | null | array of CSS attributes that should be ignored |
| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
| maskAllInputs | false | mask all input content as \* |
| maskInputOptions | { password: true } | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
| maskInputFn | - | customize mask input content recording logic |
| maskTextFn | - | customize mask text content recording logic |
| slimDOMOptions | {} | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
| dataURLOptions | {} | Canvas image format and quality ,This parameter will be passed to the OffscreenCanvas.convertToBlob(),Using this parameter effectively reduces the size of the recorded data |
| inlineStylesheet | true | whether to inline the stylesheet in the events |
| hooks | {} | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
| recordCanvas | false | Whether to record the canvas element. Available options:<br/>`false`, <br/>`true` |
| recordCrossOriginIframes | false | Whether to record cross origin iframes. rrweb has to be injected in each child iframe for this to work. Available options:<br/>`false`, <br/>`true` |
| recordAfter | 'load' | If the document is not ready, then the recorder will start recording after the specified event is fired. Available options: `DOMContentLoaded`, `load` |
| inlineImages | false | whether to record the image content (deprecated, use `assetCapture` instead) |
| assetCapture | { objectURLs: true, origins: false } | Configure the asset (image) capture and generates async asset events.<br/>Refer to the [asset capture documentation](./docs/recipes/assets.md) for more info. |
| collectFonts | false | whether to collect fonts in the website |
| userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
| plugins | [] | load plugins to provide extended record functions. [What is plugins?](./docs/recipes/plugin.md) |
| errorHandler | - | A callback that is called if something inside of rrweb throws an error. The callback receives the error as argument. |

#### Privacy

Expand Down
4 changes: 2 additions & 2 deletions packages/rrweb/src/record/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ function record<T = eventWithTime>(
collectFonts = false,
inlineImages = false,
assetCapture = {
captureObjectURLs: true,
captureOrigins: false,
objectURLs: true,
origins: false,
},
plugins,
keepIframeSrcFn = () => false,
Expand Down
8 changes: 4 additions & 4 deletions packages/rrweb/src/record/observers/asset-manager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default class AssetManager {

const urlObjectMap = this.urlObjectMap;

if (this.config.captureObjectURLs) {
if (this.config.objectURLs) {
try {
const restoreHandler = patch(
win.URL,
Expand Down Expand Up @@ -86,15 +86,15 @@ export default class AssetManager {
const urlIsBlob = url.startsWith(`blob:${window.location.origin}/`);

// Check if url is a blob and we should ignore blobs
if (urlIsBlob) return !this.config.captureObjectURLs;
if (urlIsBlob) return !this.config.objectURLs;

// Check if url matches any ignorable origins
for (const origin of originsToIgnore) {
if (url.startsWith(origin)) return true;
}

// Check the captureOrigins
const captureOrigins = this.config.captureOrigins;
// Check the origins
const captureOrigins = this.config.origins;
if (typeof captureOrigins === 'boolean') {
return !captureOrigins;
} else if (Array.isArray(captureOrigins)) {
Expand Down
Loading

0 comments on commit 51ab260

Please sign in to comment.