Replays are blank in Shopify embedded app

[Kobby-Bawuah]

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.113.0

Framework Version

sentry.javascript.react

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

A user is reporting that all of their replays are blank and claims its a follow up of this issue(https://github.com/getsentry/sentry-javascript/issues/7279):

• Embed the web app in an iframe on a Shopify store.
• Enable Sentry session replays in the app.
• Interact with the app to generate user session data.
• Check the replay recordings in the Sentry dashboard.

See the attached Jira issue for a link to the sample reply the user provided as evidence.

Expected Result

Replays should show the recorded user interactions within the iframe embedded app.

Actual Result

Replays are completely blank, showing no recorded interactions.

┆Issue is synchronized with this Jira Improvement by Unito

[billyvg]

Is there a public URL to where Replay is installed so that we can debug it further?

[alex-trackipal]

Is there a public URL to where Replay is installed so that we can debug it further?

Its a Shopify App: https://apps.shopify.com/trackipal (we do get "replays" recorded correctly using another tool: hotjar).

Our init code:

export const initSentry = () => {
  Sentry.init({
    dsn: ',
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration(),
      // Sentry.httpClientIntegration(),
      Sentry.extraErrorDataIntegration(),
    ],
    environment: process.env.NODE_ENV,
    // Performance Monitoring
    tracesSampleRate: 1.0, //  Capture 100% of the transactions
    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
    // Session Replay
    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
    sendDefaultPii: true,
    normalizeDepth: 6, // stringify deeper objects
  });
};

[jiajunmao]

I have experienced same problem in a RN Expo app. The Sentry init configuration is

Sentry.init({
  dsn: 'https://<dsn>@<self-hosted-instance>/3',
  attachScreenshot: true,
  attachViewHierarchy: true,
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV,
  debug: false,
  _experiments: {
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
  },
  integrations: [
    new Sentry.ReactNativeTracing({
      // Pass instrumentation to be used as `routingInstrumentation`
      routingInstrumentation,
      enableNativeFramesTracking: !isRunningInExpoGo(),
      // ...
    }),
    Sentry.mobileReplayIntegration({
      maskAllText: false,
      maskAllImages: false,
    }),
  ],
});

Since it's self hosted I cannot share the issue url, but here is a screenshot. The entire replay is blank just like in this screenshot, but all the breadcrumbs and network activities are captured correctly

[andreiborza]

@jiajunmao could you set debug: true in your Sentry init and paste some logs please?

cc @billyvg

[billyvg]

@jiajunmao Can you please create a new issue in sentry-react-native repo

[vctormb]

I have a website which embeds an iframe and I'd like to record the iframe content. I'm having a similar problem where the Replay records the main page but when opening the iframe I cannot see its content. Is there a way to enable it?

[mydea]

Replay as of now only works on same-origin iframes. I believe we cannot record iframe content from other origins - cc @billyvg correct me if I remember this incorrectly.

We should probably reflect this in the docs, this is not really documented as far as I can tell?

[billyvg]

I think rrweb v2 has support for it but we don't expose the option to enable it. Another discussion about enabling it

[michellewzhang]

@billyvg do we plan to further act on this issue?

[billyvg]

Closing this issue due to lack of a repro -- if you're having issues with cross origin iframes, please post in https://github.com/getsentry/sentry-javascript/discussions/11858#discussioncomment-10942101.