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?

• [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

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: '[email protected]',
            });
          });
        });
      }

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: [email protected],
            });
          });
        });
        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: '[email protected]',
            });
          });
        });

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!

[milos-ws]

@mydea

I attach it at the bottom of the HTML page, like this:

<script
  src="https://js.sentry-cdn.com/5eb15e21ac9ccab856993756274f22e7.min.js"
  crossorigin="anonymous"
></script>
<script src="js/my_sentry.js"></script>

[mydea]

Is your page by chance public - if so, could you send me a link to try it out? 🤔 Because if it is really just embedded into the HTML, it should not ever run twice on a single page, so something "fancy" is happening there under the hood probably 😬

[milos-ws]

@mydea

Unfortunately, the site is not live.

[milos-ws]

@mydea

I see now that on problematic pages, which do not work as expected, in the console log, I have two instances of this bundle.tracing. On pages that work well, there is only one instance.

[milos-ws]

It looks like I have resolved the issue (still testing, but for now, it works).

Instead of using the Loader script,

I am using the CDN bundle.

[mydea]

It looks like I have resolved the issue (still testing, but for now, it works).

Instead of using the Loader script,

I am using the CDN bundle.

Good to hear, though I suspect that this probably is only hiding the issue for you, it's probably still adding the CDN bundle twice to your page - which will not break anything, but be unnecessary bundle data being loaded. So I'd investigate why the <script> tag for this is being added twice for a single HTML page, which is the root cause you want to avoid!

[milos-ws]

It looks like I have resolved the issue (still testing, but for now, it works). Instead of using the Loader script, I am using the CDN bundle.

Good to hear, though I suspect that this probably is only hiding the issue for you, it's probably still adding the CDN bundle twice to your page - which will not break anything, but be unnecessary bundle data being loaded. So I'd investigate why the <script> tag for this is being added twice for a single HTML page, which is the root cause you want to avoid!

You're right. If you manage to find the cause of the problem, that would be very helpful.

If I look at the Loader script at

https://js.sentry-cdn.com/5eb15e21ac9ccab856993756274f22e7.min.js

I see that it is the one that actually adds the bundle, so the issue might be with it. For some reason, it adds the bundle twice in certain cases.

[Lms24]

@milos-ws it would be very helpful if you could provide us with a minimal reproduction example (e.g. stackblitz or GH repo). I don't remember ever seeing an issue about our loader script injecting the script tags twice so it's quite hard for us to replicate this behaviour.

[mydea]

To add on this, I think it's very unlikely that the loader script is doing this, I would guess that it is more likely that the loader script itself is being included multiple times into the page! We're happy to help investigating but as @Lms24 mentioned we'd need some kind of reproduction to be able to investigate this further.

[getsantry[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀