@grafana/faro-instrumentation-replay 2.2.4 → 2.4.0
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 +34 -14
- package/dist/bundle/faro-instrumentation-replay.iife.js +1 -1
- package/dist/bundle/types/instrumentation.d.ts +3 -1
- package/dist/bundle/types/types.d.ts +24 -3
- package/dist/cjs/const.js +3 -2
- package/dist/cjs/const.js.map +1 -1
- package/dist/cjs/instrumentation.js +92 -79
- package/dist/cjs/instrumentation.js.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/const.js +3 -2
- package/dist/esm/const.js.map +1 -1
- package/dist/esm/instrumentation.js +53 -8
- package/dist/esm/instrumentation.js.map +1 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/types/instrumentation.d.ts +3 -1
- package/dist/types/types.d.ts +24 -3
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -23,7 +23,6 @@ initializeFaro({
|
|
|
23
23
|
password: true,
|
|
24
24
|
email: true,
|
|
25
25
|
},
|
|
26
|
-
maskInputFn: (value) => '*'.repeat(value.length),
|
|
27
26
|
maskAllInputs: false,
|
|
28
27
|
recordAfter: 'load',
|
|
29
28
|
recordCrossOriginIframes: false,
|
|
@@ -38,10 +37,10 @@ initializeFaro({
|
|
|
38
37
|
|
|
39
38
|
| Key | Type | Default | Description |
|
|
40
39
|
| ------------------ | ------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
41
|
-
| `maskAllInputs` | `boolean` | `
|
|
42
|
-
| `maskInputOptions` | `MaskInputOptions` | `{ password: true }` | Selectively mask specific input types (
|
|
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`) |
|
|
43
42
|
| `maskInputFn` | `(value: string, element: HTMLElement) => string` | `undefined` | Customize mask input content recording logic |
|
|
44
|
-
| `maskTextSelector` | `string` | `
|
|
43
|
+
| `maskTextSelector` | `string` | `'*'` | CSS selector for elements whose text content should be masked |
|
|
45
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 |
|
|
46
45
|
| `ignoreSelector` | `string` | `undefined` | CSS selector for elements whose input events should be ignored |
|
|
47
46
|
|
|
@@ -68,14 +67,33 @@ initializeFaro({
|
|
|
68
67
|
|
|
69
68
|
### Recording Options
|
|
70
69
|
|
|
71
|
-
| Key | Type | Default | Description
|
|
72
|
-
| -------------------------- | ------------------------------ | -------- |
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
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
|
+
```
|
|
79
97
|
|
|
80
98
|
### Hooks
|
|
81
99
|
|
|
@@ -87,8 +105,8 @@ initializeFaro({
|
|
|
87
105
|
|
|
88
106
|
This instrumentation records user interactions on your website. Make sure to:
|
|
89
107
|
|
|
90
|
-
1. **
|
|
91
|
-
|
|
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`
|
|
92
110
|
2. **Use CSS selectors** - Use `maskTextSelector` to mask sensitive content, `blockSelector` to completely exclude elements
|
|
93
111
|
3. **Implement filtering** - Use the `beforeSend` hook to filter or transform events before sending
|
|
94
112
|
4. **Review your privacy policy** - Ensure you have proper user consent for session recording
|
|
@@ -98,6 +116,8 @@ This instrumentation records user interactions on your website. Make sure to:
|
|
|
98
116
|
|
|
99
117
|
```typescript
|
|
100
118
|
new ReplayInstrumentation({
|
|
119
|
+
// Disable global input masking and use selective masking rules instead
|
|
120
|
+
maskAllInputs: false,
|
|
101
121
|
// Mask all text and email inputs, but allow number inputs
|
|
102
122
|
maskInputOptions: {
|
|
103
123
|
password: true,
|