Faro instrumentation for session replay with rrweb
npm install @grafana/faro-instrumentation-replayFaro instrumentation for session replay with rrweb.
``bash`
npm install @grafana/faro-instrumentation-replay
`typescript
import { ReplayInstrumentation } from '@grafana/faro-instrumentation-replay';
import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
initializeFaro({
url: 'https://your-faro-endpoint.com',
instrumentations: [
...getWebInstrumentations(),
new ReplayInstrumentation({
maskInputOptions: {
password: true,
email: true,
},
maskAllInputs: false,
recordCrossOriginIframes: false,
}),
],
});
`
- maskAllInputs (default: false): Whether to mask all input elementsmaskInputOptions
- (default: { password: true }): Fine-grained control over which input types to mask.password
Available options:
- - Password inputstext
- - Text inputsemail
- - Email inputstel
- - Telephone inputsnumber
- - Number inputssearch
- - Search inputsurl
- - URL inputsdate
- , datetime-local, month, week, time - Date/time inputscolor
- - Color inputsrange
- - Range inputstextarea
- - Textarea elementsselect
- - Select dropdownsmaskTextSelector
- : Custom CSS selector to mask specific elementsblockSelector
- : CSS selector to completely block elements from recordingignoreSelector
- : CSS selector to ignore specific elements
- recordCrossOriginIframes (default: false): Whether to record cross-origin iframesrecordCanvas
- (default: false): Whether to record canvas elementscollectFonts
- (default: false): Whether to collect font filesinlineImages
- (default: false): Whether to inline images in the recordinginlineStylesheet
- (default: false): Whether to inline stylesheets
- beforeSend: Custom function to transform or filter events before they are sent.
Return the modified event or null/undefined to skip sending
This instrumentation records user interactions on your website. Make sure to:
1. Enable appropriate masking options - By default, only password inputs are masked.
Configure maskInputOptions to mask additional sensitive fieldsmaskTextSelector
2. Use CSS selectors - Use to mask sensitive content, blockSelector to completely exclude elementsbeforeSend
3. Implement filtering - Use the hook to filter or transform events before sending
4. Review your privacy policy - Ensure you have proper user consent for session recording
5. Test your configuration - Verify no sensitive information is captured in recordings
`typescript``
new ReplayInstrumentation({
// Mask all text and email inputs, but allow number inputs
maskInputOptions: {
password: true,
text: true,
email: true,
tel: true,
textarea: true,
},
// Mask elements with specific CSS classes
maskTextSelector: '.sensitive-data, .pii',
// Block elements completely from recording
blockSelector: '.payment-form, .credit-card-info',
// Ignore certain elements (won't be recorded at all)
ignoreSelector: '.analytics-widget',
// Filter or transform events before sending
beforeSend: (event) => {
// Example: Skip events that might contain sensitive data
if (event.type === 3 && event.data?.source === 'CanvasMutation') {
return null; // Skip this event
}
return event; // Send the event as-is
},
});