@grafana/faro-instrumentation-replay 2.2.2 → 2.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -23,7 +23,9 @@ initializeFaro({
23
23
  password: true,
24
24
  email: true,
25
25
  },
26
+ maskInputFn: (value) => '*'.repeat(value.length),
26
27
  maskAllInputs: false,
28
+ recordAfter: 'load',
27
29
  recordCrossOriginIframes: false,
28
30
  }),
29
31
  ],
@@ -34,37 +36,52 @@ initializeFaro({
34
36
 
35
37
  ### Privacy & Masking Options
36
38
 
37
- - **`maskAllInputs`** (default: `false`): Whether to mask all input elements
38
- - **`maskInputOptions`** (default: `{ password: true }`): Fine-grained control over which input types to mask.
39
- Available options:
40
- - `password` - Password inputs
41
- - `text` - Text inputs
42
- - `email` - Email inputs
43
- - `tel` - Telephone inputs
44
- - `number` - Number inputs
45
- - `search` - Search inputs
46
- - `url` - URL inputs
47
- - `date`, `datetime-local`, `month`, `week`, `time` - Date/time inputs
48
- - `color` - Color inputs
49
- - `range` - Range inputs
50
- - `textarea` - Textarea elements
51
- - `select` - Select dropdowns
52
- - **`maskTextSelector`**: Custom CSS selector to mask specific elements
53
- - **`blockSelector`**: CSS selector to completely block elements from recording
54
- - **`ignoreSelector`**: CSS selector to ignore specific elements
39
+ | Key | Type | Default | Description |
40
+ | ------------------ | ------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
41
+ | `maskAllInputs` | `boolean` | `false` | Mask all input content as `*` |
42
+ | `maskInputOptions` | `MaskInputOptions` | `{ password: true }` | Selectively mask specific input types (see below) |
43
+ | `maskInputFn` | `(value: string, element: HTMLElement) => string` | `undefined` | Customize mask input content recording logic |
44
+ | `maskTextSelector` | `string` | `undefined` | CSS selector for elements whose text content should be masked |
45
+ | `blockSelector` | `string` | `undefined` | CSS selector for elements that should be blocked from recording. Blocked elements are replaced with a placeholder of the same dimensions |
46
+ | `ignoreSelector` | `string` | `undefined` | CSS selector for elements whose input events should be ignored |
47
+
48
+ #### `maskInputOptions`
49
+
50
+ | Key | Type | Description |
51
+ | ---------------- | --------- | --------------------- |
52
+ | `password` | `boolean` | Password inputs |
53
+ | `text` | `boolean` | Text inputs |
54
+ | `email` | `boolean` | Email inputs |
55
+ | `tel` | `boolean` | Telephone inputs |
56
+ | `number` | `boolean` | Number inputs |
57
+ | `search` | `boolean` | Search inputs |
58
+ | `url` | `boolean` | URL inputs |
59
+ | `date` | `boolean` | Date inputs |
60
+ | `datetime-local` | `boolean` | Datetime-local inputs |
61
+ | `month` | `boolean` | Month inputs |
62
+ | `week` | `boolean` | Week inputs |
63
+ | `time` | `boolean` | Time inputs |
64
+ | `color` | `boolean` | Color inputs |
65
+ | `range` | `boolean` | Range inputs |
66
+ | `textarea` | `boolean` | Textarea elements |
67
+ | `select` | `boolean` | Select dropdowns |
55
68
 
56
69
  ### Recording Options
57
70
 
58
- - **`recordCrossOriginIframes`** (default: `false`): Whether to record cross-origin iframes
59
- - **`recordCanvas`** (default: `false`): Whether to record canvas elements
60
- - **`collectFonts`** (default: `false`): Whether to collect font files
61
- - **`inlineImages`** (default: `false`): Whether to inline images in the recording
62
- - **`inlineStylesheet`** (default: `false`): Whether to inline stylesheets
71
+ | Key | Type | Default | Description |
72
+ | -------------------------- | ------------------------------ | -------- | ---------------------------------------------------------------------------------------------------- |
73
+ | `recordAfter` | `'load' \| 'DOMContentLoaded'` | `'load'` | When to start recording if the document is not ready yet |
74
+ | `recordCrossOriginIframes` | `boolean` | `false` | Whether to record cross-origin iframes. rrweb must be injected in each child iframe for this to work |
75
+ | `recordCanvas` | `boolean` | `false` | Whether to record canvas element content |
76
+ | `collectFonts` | `boolean` | `false` | Whether to collect fonts used in the website |
77
+ | `inlineImages` | `boolean` | `false` | Whether to record image content |
78
+ | `inlineStylesheet` | `boolean` | `false` | Whether to inline stylesheets in the recording events |
63
79
 
64
80
  ### Hooks
65
81
 
66
- - **`beforeSend`**: Custom function to transform or filter events before they are sent.
67
- Return the modified event or `null`/`undefined` to skip sending
82
+ | Key | Type | Default | Description |
83
+ | ------------ | -------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------- |
84
+ | `beforeSend` | `(event: eventWithTime) => eventWithTime \| null \| undefined` | `undefined` | Transform or filter events before they are sent. Return `null` or `undefined` to skip sending |
68
85
 
69
86
  ## Privacy and Security
70
87