@grafana/faro-instrumentation-replay 2.2.3 → 2.3.1
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 +64 -27
- package/dist/bundle/faro-instrumentation-replay.iife.js +1 -1
- package/dist/bundle/types/index.d.ts +1 -1
- package/dist/bundle/types/instrumentation.d.ts +5 -1
- package/dist/bundle/types/types.d.ts +38 -4
- package/dist/cjs/const.js +5 -2
- package/dist/cjs/const.js.map +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/instrumentation.js +75 -9
- package/dist/cjs/instrumentation.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/const.js +5 -2
- package/dist/esm/const.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/instrumentation.js +75 -10
- package/dist/esm/instrumentation.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/instrumentation.d.ts +5 -1
- package/dist/types/types.d.ts +38 -4
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -24,6 +24,7 @@ initializeFaro({
|
|
|
24
24
|
email: true,
|
|
25
25
|
},
|
|
26
26
|
maskAllInputs: false,
|
|
27
|
+
recordAfter: 'load',
|
|
27
28
|
recordCrossOriginIframes: false,
|
|
28
29
|
}),
|
|
29
30
|
],
|
|
@@ -34,44 +35,78 @@ initializeFaro({
|
|
|
34
35
|
|
|
35
36
|
### Privacy & Masking Options
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
38
|
+
| Key | Type | Default | Description |
|
|
39
|
+
| ------------------ | ------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
40
|
+
| `maskAllInputs` | `boolean` | `true` | Mask all input content as `*` |
|
|
41
|
+
| `maskInputOptions` | `MaskInputOptions` | `{ password: true }` | Selectively mask specific input types (used only when `maskAllInputs` is `false`) |
|
|
42
|
+
| `maskInputFn` | `(value: string, element: HTMLElement) => string` | `undefined` | Customize mask input content recording logic |
|
|
43
|
+
| `maskTextSelector` | `string` | `'*'` | CSS selector for elements whose text content should be masked |
|
|
44
|
+
| `blockSelector` | `string` | `undefined` | CSS selector for elements that should be blocked from recording. Blocked elements are replaced with a placeholder of the same dimensions |
|
|
45
|
+
| `ignoreSelector` | `string` | `undefined` | CSS selector for elements whose input events should be ignored |
|
|
46
|
+
|
|
47
|
+
#### `maskInputOptions`
|
|
48
|
+
|
|
49
|
+
| Key | Type | Description |
|
|
50
|
+
| ---------------- | --------- | --------------------- |
|
|
51
|
+
| `password` | `boolean` | Password inputs |
|
|
52
|
+
| `text` | `boolean` | Text inputs |
|
|
53
|
+
| `email` | `boolean` | Email inputs |
|
|
54
|
+
| `tel` | `boolean` | Telephone inputs |
|
|
55
|
+
| `number` | `boolean` | Number inputs |
|
|
56
|
+
| `search` | `boolean` | Search inputs |
|
|
57
|
+
| `url` | `boolean` | URL inputs |
|
|
58
|
+
| `date` | `boolean` | Date inputs |
|
|
59
|
+
| `datetime-local` | `boolean` | Datetime-local inputs |
|
|
60
|
+
| `month` | `boolean` | Month inputs |
|
|
61
|
+
| `week` | `boolean` | Week inputs |
|
|
62
|
+
| `time` | `boolean` | Time inputs |
|
|
63
|
+
| `color` | `boolean` | Color inputs |
|
|
64
|
+
| `range` | `boolean` | Range inputs |
|
|
65
|
+
| `textarea` | `boolean` | Textarea elements |
|
|
66
|
+
| `select` | `boolean` | Select dropdowns |
|
|
55
67
|
|
|
56
68
|
### Recording Options
|
|
57
69
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
70
|
+
| Key | Type | Default | Description |
|
|
71
|
+
| -------------------------- | ------------------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
72
|
+
| `samplingRate` | `number` | `1` | Fraction of globally-sampled sessions that will be recorded. Applied on top of `sessionTracking.samplingRate`. Out-of-range values are clamped. |
|
|
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 |
|
|
79
|
+
|
|
80
|
+
#### Sub-sampling example
|
|
81
|
+
|
|
82
|
+
```typescript
|
|
83
|
+
initializeFaro({
|
|
84
|
+
url: 'https://your-faro-endpoint.com',
|
|
85
|
+
sessionTracking: {
|
|
86
|
+
samplingRate: 1.0, // collect telemetry (logs, errors, web-vitals) for all sessions
|
|
87
|
+
},
|
|
88
|
+
instrumentations: [
|
|
89
|
+
...getWebInstrumentations(),
|
|
90
|
+
new ReplayInstrumentation({
|
|
91
|
+
samplingRate: 0.1, // record replay for only 10% of sessions
|
|
92
|
+
}),
|
|
93
|
+
],
|
|
94
|
+
});
|
|
95
|
+
// Effective replay coverage: 1.0 × 0.1 = 10% of globally-sampled sessions
|
|
96
|
+
```
|
|
63
97
|
|
|
64
98
|
### Hooks
|
|
65
99
|
|
|
66
|
-
|
|
67
|
-
|
|
100
|
+
| Key | Type | Default | Description |
|
|
101
|
+
| ------------ | -------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------- |
|
|
102
|
+
| `beforeSend` | `(event: eventWithTime) => eventWithTime \| null \| undefined` | `undefined` | Transform or filter events before they are sent. Return `null` or `undefined` to skip sending |
|
|
68
103
|
|
|
69
104
|
## Privacy and Security
|
|
70
105
|
|
|
71
106
|
This instrumentation records user interactions on your website. Make sure to:
|
|
72
107
|
|
|
73
|
-
1. **
|
|
74
|
-
|
|
108
|
+
1. **Review masking options for your use case** - By default, all input values and text content are masked.
|
|
109
|
+
If needed, you can make masking more selective with `maskAllInputs`, `maskInputOptions`, and `maskTextSelector`
|
|
75
110
|
2. **Use CSS selectors** - Use `maskTextSelector` to mask sensitive content, `blockSelector` to completely exclude elements
|
|
76
111
|
3. **Implement filtering** - Use the `beforeSend` hook to filter or transform events before sending
|
|
77
112
|
4. **Review your privacy policy** - Ensure you have proper user consent for session recording
|
|
@@ -81,6 +116,8 @@ This instrumentation records user interactions on your website. Make sure to:
|
|
|
81
116
|
|
|
82
117
|
```typescript
|
|
83
118
|
new ReplayInstrumentation({
|
|
119
|
+
// Disable global input masking and use selective masking rules instead
|
|
120
|
+
maskAllInputs: false,
|
|
84
121
|
// Mask all text and email inputs, but allow number inputs
|
|
85
122
|
maskInputOptions: {
|
|
86
123
|
password: true,
|