Session Replay recordings are not visible in Sentry's web interface

sourabh-sharma-liqid commented 1 year ago

Is there an existing issue for this?

[X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[X] I have reviewed the documentation https://docs.sentry.io/
[X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

7.58.1

Framework Version

No response

Link to Sentry event

https://liqid-1.sentry.io/share/issue/b80da1e1de6440eab3a4ce00d29532d7/

SDK Setup


Sentry.init({
        dsn: 'https://cbb8ad73f758468ea47ff4fa93df3cf0@oXXXXX.ingest.sentry.io/XXXXXXXXXX',
        release: 'lwc',
        environment: this.environment,
        initialScope: {
          user: { id: USER_ID },
        },
        sampleRate: 1,

        replaysSessionSampleRate: 1.0,

        // If the entire session is not sampled, use the below sample rate to sample
        // sessions when an error occurs.
        replaysOnErrorSampleRate: 1.0,

        integrations: [
          Sentry.Replay({
            // Additional SDK configuration goes in here, for example:
            maskAllText: true,
            blockAllMedia: true,
          }),
        ],
      });

Steps to Reproduce

Implement the following configuration for Sentry using https://browser.sentry-cdn.com/7.58.1/replay.min.js

The session replay feature in Sentry is not working as expected, and no replay ID is being generated. We are using Sentry version 7.58.1 in our application. Despite proper configuration and integration of the @sentry/replay module, we are unable to initiate session replays and also no replay appear on Sentry Dashboard while error get reported in issues tab there.

Sentry.init({
        dsn: 'https://cbb8ad73f758468ea47ff4fa93df3cf0@oXXXXX.ingest.sentry.io/XXXXXXXXXX',
        release: 'lwc',
        environment: this.environment,
        initialScope: {
          user: { id: USER_ID },
        },
        sampleRate: 1,

        replaysSessionSampleRate: 1.0,

        // If the entire session is not sampled, use the below sample rate to sample
        // sessions when an error occurs.
        replaysOnErrorSampleRate: 1.0,

        integrations: [
          Sentry.Replay({
            // Additional SDK configuration goes in here, for example:
            maskAllText: true,
            blockAllMedia: true,
          }),
        ],
      });

Expected Result

The session replay recording should be visible in the Sentry dashboard.

Actual Result

-The Sentry dashboard does not show any session replay recording. -No replay ID is generated for the sessions.

AbhiPrasad commented 1 year ago

Hey @sourabh-sharma-liqid! Do you see http outgoing requests being made to Sentry?

If you're using the CDN bundles, we recommend you use the loader: https://docs.sentry.io/platforms/javascript/install/loader/

Could you try using the loader and seeing if there is still a problem? Thanks!

sourabh-sharma-liqid commented 1 year ago

Hey @AbhiPrasad Yeah, with CDN bundle, one http outgoing request being sent to Sentry, which reports the issue to sentry. However, the session replay that we expect does not appear for that issue on Sentry Dashboard.

With loader, it throws the following error on initialization, so no http requests are sent to Sentry if any error occurs.

AbhiPrasad commented 1 year ago

@sourabh-sharma-liqid I tried to use the loader script, but couldn't reproduce the problem you were encountering.

Could you check to make sure that your loader script settings are configured this way?

You can find that at https://liqid-1.sentry.io/settings/projects/ENTER_PROJECT_NAME_HERE/loader-script/

Without a reproduction, it's hard to understand what is going wrong here. Could you provide one?

sourabh-sharma-liqid commented 1 year ago

@AbhiPrasad I have configured similar setting that you shared.

To Reproduce:

Load the script

Sentry.onLoad(function () {
    Sentry.init({
          release: 'lwc',
          environment: this.environment,
          initialScope: {
            user: { id: USER_ID },
          },

          replaysSessionSampleRate: 1.0,

          replaysOnErrorSampleRate: 1.0,

          integrations: [],
        });
 });

I would like to highlight that upon loading the script, in Sentry only below function are accessible, we can’t see integration method in below screen grab[using loader]:

AbhiPrasad commented 1 year ago

@sourabh-sharma-liqid could you try removing integrations: [] and seeing what happens then?

sourabh-sharma-liqid commented 1 year ago

@AbhiPrasad Still same error.

AbhiPrasad commented 1 year ago

Here's an example of using the loader on codesandbox. https://codesandbox.io/s/replay-loader-example-nmd4g5

This sends replays/transactions/errors, and you can view the console to see debug errors.

AbhiPrasad commented 1 year ago

@sourabh-sharma-liqid what is lightningSentry.js? Shouldn't the Sentry.init be coming from the loader script?

sourabh-sharma-liqid commented 1 year ago

lightningSentry.js is the main file which contains that code. Basically we use LWC(Salesforce). So, we load the sentry loader script and then do Sentry.init in that file.

AbhiPrasad commented 1 year ago

If you click into view key details

you can enable the debug bundle.

Could you share some of the debug logs from the console? Perhaps that will help us figure out what is going on.

sourabh-sharma-liqid commented 1 year ago

Hey @AbhiPrasad I have already enabled the debug bundle, but unfortunately, no logs are appearing in the console except one shared before.

To debug this issue, I decided to use the unminified loader script. Upon investigation, it appears that the SDK is not able to access BrowserTracing, and there are no visible integrations in the SDK. Consequently, the code is breaking at this point.

Please refer to the screen grab below for more clarity:

Note: In the Codesandbox, the code was functioning correctly with loader, and the Sentry replay was working as expected https://codesandbox.io/s/replay-loader-example-nmd4g5

AbhiPrasad commented 1 year ago

Can you check if https://browser.sentry-cdn.com/7.60.1/bundle.tracing.replay.debug.min.js is being loaded on the page? That is the CDN bundle with both BrowserTracing and Replay.

There might be an ordering issue here. Are you sure that the loader script is loaded above the Sentry.onload functionality?

Are you loading multiple Sentry scripts on the page? That's the only way I can see the SDK object not having properties.

sourabh-sharma-liqid commented 1 year ago

@AbhiPrasad It seems that the loader script file is loaded, but the LWC is facing issue in accessing the context of Sentry with loader script. This is likely due to the different approach Salesforce requires for handling third-party libraries.

To work with it, we have to consider using the Sentry CDN bundle, so we can ensure file loads properly for integration with Sentry in the LWC component.

AbhiPrasad commented 1 year ago

@sourabh-sharma-liqid is there a way you can use the NPM package? That would be the best solution here.

Otherwise to use the CDN, add the following script: https://docs.sentry.io/platforms/javascript/install/loader/#performance--replay-bundle

And set up the SDK like so: https://docs.sentry.io/platforms/javascript/install/loader/#usage--configuration

sourabh-sharma-liqid commented 1 year ago

Hey @AbhiPrasad , yes, Using CDN bundle, successfully integrated the Session Replay. However, I have to add Replay Integration manually, because passing the integration configuration in init method did not work for me.

To Reproduce

`

const { getCurrentHub, Replay } = Sentry;
  const client = getCurrentHub().getClient();
  const options = client.getOptions();
  options.replaysSessionSampleRate = 1.0;
  options.replaysOnErrorSampleRate = 1.0;

  client.addIntegration(
    new Replay({
      // Additional SDK configuration goes in here, for example:
      maskAllText: false,
      blockAllMedia: false,
      maskAllInputs: false,
    }),
  );

`

Below issue are occurring now:

Session replay recording starts on initialisation and send recording repeatedly within a specific time, sometime total recording duration is more than 15mins until the browser tab does not close. Also replay was not attached to any issue in Sentry Dashboard.
But I need to capture the session only if an error occurs, and it should also be attached to the issue.
ReplaysSessionSampleRate 0.1 sent no session replay to Sentry in any event, so I have to make it 1

Could you please suggest why it behaving like this.

Recording are not clear, they are just showing a white page, as per following screengrab:

AbhiPrasad commented 1 year ago

ReplaysSessionSampleRate 0.1 sent no session replay to Sentry in any event, so I have to make it 1

This is a 10% chance, so you might have to try 10+ times before one is being sent. To capture only on error, you can set replaysSessionSampleRate to 0 and replaysOnErrorSampleRate to 1.

Session replay recording starts on initialisation and send recording repeatedly within a specific time, sometime total recording duration is more than 15mins until the browser tab does not close. Also replay was not attached to any issue.

This is because you set replaysSessionSampleRate to 1.0. Please read through the docs to understand sessions and sampling here for some more context: https://docs.sentry.io/platforms/javascript/session-replay/understanding-sessions/

Recording are not clear, they are just showing a white page, as per following screengrab:

There might be issues with the replay recording and LWC that are causing this issue because of the LWC runtime. @billyvg any idea what could be happening?

sourabh-sharma-liqid commented 1 year ago

@AbhiPrasad The only way I am able to make sure sent sessions replay in case of an error event only is to use the replay .startBuffering() and replay?.flush() methods. It's working fine now.

And any idea about how we can make sure that web pages are visible clearly in Sentry session recording with LWC(Lightning web components)?

billyvg commented 1 year ago

@sourabh-sharma-liqid We should have improved web component support soon when we upgrade to use rrweb 2.0. Please follow this thread for updates

sourabh-sharma-liqid commented 1 year ago

@billyvg Thanks for the update! Looking forward to the improved web component support with rrweb 2.0. Will keep an eye on this thread for further developments.

getsentry / sentry-javascript