Access to History broken with Shopify App Bridge

[quard8]

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/react

SDK Version

7.65.0

Framework Version

React 18.2.0

Link to Sentry event

https://storista.sentry.io/issues/4413486884/

SDK Setup

Sentry.init({
        dsn: _DSN_,
        debug: false,
        tracesSampleRate: 1.0,
        integrations: [
            new Sentry.Integrations.Breadcrumbs({
            }),
            new Sentry.BrowserTracing({
            }),
        ],
        autoSessionTracking: false,
    });

Steps to Reproduce

Shopify introduced new version of App Bridge which now loaded as bundled JS script from their CDN instead of npm package.

After updating to CDN version, I found that my app not working in Safari for Mac. I found only trace to window.history object and I believe both Sentry and Shopify wraps history object and they not compatible together.

Only message I see in console is

Unhandled Promise Rejection: TypeError: Attempted to assign to readonly property.

with link to tslib.

Right now I disabled access to history with options like this and everything is working.

Sentry.init({
        dsn: _DSN_,
        debug: false,
        tracesSampleRate: 1.0,
        integrations: [
            new Sentry.Integrations.Breadcrumbs({
                history: false,
            }),
            new Sentry.BrowserTracing({
                startTransactionOnLocationChange: false,
            }),
        ],
        autoSessionTracking: false,
    });

I also found that Amplitude JS has the same console message, but app is still working. I added link to the issue in "Link to Sentry event" field just in case.

I'm not sure how I can provide steps to reproduce, because it needs to create Shopify partner account. I can assist to test/debug or create sample app and give access to developer from Sentry.

Expected Result

History tracking is working

Actual Result

Getting console message Unhandled Promise Rejection: TypeError: Attempted to assign to readonly property. and app crashes (not working at all)

[AbhiPrasad]

Hey @quard8 thanks for writing in! Have you reached out to shopify support about this?

If you can provide a sample app that has this issue it would be a great step for us to debug further and take a look!

Here you can see where we are patching the history object:

sentry-javascript/packages/utils/src/instrument.ts

Lines 398 to 399 in 5fdaaa7

	fill(WINDOW.history, 'pushState', historyReplacementFunction);
	fill(WINDOW.history, 'replaceState', historyReplacementFunction);

[getsantry]

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 🥀