After refreshing the page or opening new content types, maskAllText, maskAllInputs, and blockAllMedia are changed to true.

[milos-ws]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• 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

latest

Framework Version

No response

Link to Sentry event

No response

SDK Setup

      if (!sessionStorage.getItem('sentryReplaySession')) {
        // Use the once method to ensure this runs only once
        $(context).find('body').once('onceSentry').each(function () {
          Sentry.onLoad(function () {
            Sentry.init({
              replaysSessionSampleRate: 1,
              environment: 'local',
              dsn: 'https://test.com',
              integrations: [
                new Sentry.Replay({
                  maskAllText: false,
                  maskAllInputs: false,
                  blockAllMedia: false,
                }),
              ],
            });
            Sentry.setUser({
              email: 'test@example.com',
            });
          });
        });
      }

Steps to Reproduce

When I load a certain page for the first time, the session starts, and the recording replay begins. All text is unmasked, inputs work fine. However, if I go to another page, all text is masked. If I check

const replay = Sentry.getClient().getIntegrationById("Replay");

everything is set to true.

Also, if I go back to the same page, the text is still masked, and the settings are set to true.

NOTE: I must use if (!sessionStorage.getItem('sentryReplaySession')) because if not, when I go to another page, the script starts again, and I get the error 'Multiple Replay session is not allowed.'

Expected Result

I expect that, because I set 'maskAllText' to false when the session and replay start, it will remain false until the session ends.

Actual Result

The settings change to true upon page refresh or when navigating to another page.

maskAllText: true,
maskAllInputs: true,
blockAllMedia: true,

[mydea]

Hey,

so the problem here is that you are not calling Sentry.init() for the consecutive pages - however, the settings for replay etc. are not persisted via session storage, so it falls back to the default settings afterwards.

You need to always call Sentry.init(), not just for the first page load - replay should take care of continuing the session if one was started before, automatically.

I don't fully understand why init would be called twice when moving to another page (I guess that has to do with some framework or something like this). But IMHO that is the root problem you have to solve there - Sentry.init() should be called exactly once per served HTML page, every time this page is served - otherwise, you'll not have consistent configuration!

What framework or library do you use to serve/build this, if I may ask? I'm sure there has to be a way to ensure some code is only injected once into the page, and handles moving pages properly!

[milos-ws]

Hi @mydea, thank you for the answer.

I'm using Drupal, and I want to achieve this using JavaScript, so I have attached this library:
//js.sentry-cdn.com/5eb15e21ac9ccab856993756274f22e7.min.js:

As I understand, you told me that I need to call Sentry.init() on every page refresh. Okay, but what about these settings?

maskAllText: false,
maskAllInputs: false,
blockAllMedia: false,

How can I change these back to false again? If I try, for example:

new Sentry.Replay({
      maskAllText: false,
      maskAllInputs: false,
      blockAllMedia: false,
}),

I get the error: Uncaught Error: Multiple Sentry Session Replay instances are not supported.

For example, consider this code:

if (!sessionStorage.getItem('sentryExecuted')) {
        // Use the once method to ensure this runs only once
        $(context).find('body').once('onceSentry').each(function () {
          Sentry.onLoad(function () {
            Sentry.init({
              replaysSessionSampleRate: 1,
              environment: tsnSentrySettings.environment,
              dsn: 'https://test.com',
              integrations: [
                new Sentry.Replay({
                  maskAllText: false,
                  maskAllInputs: false,
                  blockAllMedia: false,
                }),
              ],
            });
            Sentry.setUser({
              email: test@example.com,
            });
          });
        });
        sessionStorage.setItem('sentryExecuted', 'true');
      } else {
        Sentry.init({
          integrations: [
            new Sentry.Replay({
              maskAllText: false,
              maskAllInputs: false,
              blockAllMedia: false,
            }),
          ],
        });
      }

[milos-ws]

Ok if I try something like this

$(context).find('body').once('onceSentry').each(function () {
          Sentry.onLoad(function () {
            Sentry.init({
              replaysSessionSampleRate: 1,
              environment: 'local',
              dsn: 'my-dsn-link'
              integrations: [
                new Sentry.Replay({
                  maskAllText: false,
                  maskAllInputs: false,
                  blockAllMedia: false,
                }),
              ],
            });
            Sentry.setUser({
              email: 'test@example.com',
            });
          });
        });

1. I open some page, replay starts, text is unmasked, everything works well and nice.
2. I refresh the same page, and everything works well.
3. I go to another page, and again, everything works well. The same session, the same replay, and the text is unmasked.
4. Then I go to some different page, and that's when I get the error Uncaught Error: Multiple Sentry Session Replay instances are not supported.
5. I check what I have here: const replay = Sentry.getClient().getIntegrationById("Replay"); and I see that all masks are set to true.
6. Replay is still recording, but the text is masked.
7. If I go back to the same pages that worked before, they still work now, and the text is unmasked, with all masks set to false.

It seems that I have problems on some specific pages... But why? I do not see anything different on those pages.

[mydea]

I think the relevant question/problem here is how/where you inject the Sentry.onLoad(...) code into your page. Ideally this is injected into the generated HTML pages, then it should only run a single time - that would be the way to go!