Documentation Grafana Cloud Monitor applications Frontend Observability Session replay Troubleshoot

Troubleshoot

This page covers common Session Replay issues and how to fix them.

My Session Replay appears corrupted

Applications built with React, or with a framework that uses React under the hood such as Next.js, can initialize Faro more than once as components render. This can corrupt recordings.

To prevent this, initialize Faro only once by using the provider pattern.

1. Create a provider that initializes Faro a single time:

   tsx Copy

   // provider.tsx
   'use client';
   
   import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
   import { ReplayInstrumentation } from '@grafana/faro-instrumentation-replay';
   import { useEffect, useRef } from 'react';
   
   function FaroProvider({ children }: { children: React.ReactNode }) {
     const initializeOnce = useRef(false);
   
     useEffect(() => {
       if (!process.env.NEXT_PUBLIC_FARO_COLLECTOR_URL || initializeOnce.current) {
         return;
       }
   
       initializeOnce.current = true;
   
       initializeFaro({
         url: process.env.NEXT_PUBLIC_FARO_COLLECTOR_URL,
         app: {
           name: 'my-app',
           version: '1.0.0',
         },
         instrumentations: [...getWebInstrumentations(), new ReplayInstrumentation()],
       });
     }, []);
   
     return <>{children}</>;
   }
   
   export default FaroProvider;

2. Load the provider dynamically so that it only runs in the browser:

   tsx Copy

   // providerDynamic.tsx
   import dynamic from 'next/dynamic';
   import { Fragment } from 'react';
   
   const initFaroProvider = () => {
     if (!process.env.NEXT_PUBLIC_FARO_COLLECTOR_URL) {
       return Fragment;
     }
   
     return dynamic(() => import('./provider'));
   };
   
   const DynamicFaroProvider = initFaroProvider();
   export default DynamicFaroProvider;

3. Wrap your application with the provider:

   tsx Copy

   // app-providers.tsx
   import DynamicFaroProvider from './providerDynamic';
   
   export default function AppProviders({ children }: { children: React.ReactNode }) {
     return <DynamicFaroProvider>{children}</DynamicFaroProvider>;
   }

If recordings still don’t load correctly, verify that Session Replay is instrumented and sending data:

1. Check that Session Replay is instrumented:
   1. Load a page that should be instrumented with Session Replay.
   2. In the browser console, run window.faro.instrumentations.instrumentations.map(i => i.name) and confirm @grafana/faro-instrumentation-replay is in the returned list.
2. Check that Session Replay is sending events to the collector:
   1. Inspect the network requests to the collector and confirm the payload contains Session Replay events.

My recording hasn’t appeared yet

After a session is recorded, it can take up to five minutes for the recording to appear on the Sessions page in Frontend Observability. For an ongoing session, new portions of the recording also appear in intervals of up to five minutes. You can’t watch a live session in real time.

My session recording is missing user information

To associate user information with a recorded session, set the user metadata through the Faro Web SDK. Refer to how to use the user meta.

I need to prevent personally identifiable information (PII) from being recorded

Session Replay masks all input values and text content by default, client-side, before any data leaves the browser. To customize what’s masked, blocked, or ignored, configure the privacy and masking options. Refer to Data masking and Data privacy in Session Replay for details.