Loader script not reliably setting beforeNavigate context name

[JamiesonRoberts]

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 Loader

SDK Version

7.73.0

Framework Version

Browser Javascrpt

Link to Sentry event

No response

SDK Setup

This is in a Shopify setup, we are setting the context name server side as part of the HTML response in Liquid.

{% assign pathname = '/products/:productID' %}

Sentry.onLoad(function() {
    Sentry.init({
        integrations: [new Sentry.BrowserTracing({
            tracingOrigins: ['{{ shop.url }}'],
            beforeNavigate: context => {
                return {
                    ...context,
                    name: '{{ pathName }}',
                };
            },
        })],
        environment: '{{ region }}',

        // We recommend adjusting this value in production, or using tracesSampler
        // for finer control
        tracesSampleRate: {{ traceSampleRate }},
        {% capture snippet_content %}{% render 'global.sentry-release' %}{% endcapture %}
        {% unless snippet_content contains "Liquid error" %}{{ snippet_content }}{% endunless %}
        ignoreErrors: [
            // Random plugins/extensions
            'top.GLOBALS',
            // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
            'originalCreateNotification',
            'canvas.contentDocument',
            'MyApp_RemoveAllHighlights',
            'http://tt.epicplay.com',
            'Can\'t find variable: ZiteReader',
            'jigsaw is not defined',
            'ComboSearch is not defined',
            'http://loading.retry.widdit.com/',
            'atomicFindClose',
            // Facebook borked
            'fb_xd_fragment',
            // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to reduce this. (thanks @acdha)
            // See http://stackoverflow.com/questions/4113268/how-to-stop-javascript-injection-from-vodafone-proxy
            'bmi_SafeAddOnload',
            'EBCallBackMessageReceived',
            // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
            'conduitPage',
            // Avast extension error
            '_avast_submit',
            // Instagram error that Meta isn't fixing but is not impacting users
            // See https://developers.facebook.com/community/threads/320013549791141/
            '_AutofillCallbackHandler',
            // Supressing nothing errors from Safari:
            // https://stackoverflow.com/questions/55738408/javascript-typeerror-cancelled-error-when-calling-fetch-on-ios
            'TypeError: Failed to fetch',
            'TypeError: NetworkError when attempting to fetch resource.',
            'TypeError: cancelled',
            'TypeError: Load failed',
            // Suppressing Listrak Internal Error
            'QuotaExceededError',
            // Suppressing Nosto Error
            'Non-Error promise rejection captured'
        ],
          denyUrls: [
            // Google Adsense
            /pagead\/js/i,
            // Facebook flakiness
            /graph\.facebook\.com/i,
            // Facebook blocked
            /connect\.facebook\.net\/en_US\/all\.js/i,
            // Woopra flakiness
            /eatdifferent\.com\.woopra-ns\.com/i,
            /static\.woopra\.com\/js\/woopra\.js/i,
            // Automizely errors
            /sdks\.automizely-analytics\.com/i,
            // Chrome extensions
            /extensions\//i,
            /^chrome:\/\//i,
            // Other plugins
            /127\.0\.0\.1:4001\/isrunning/i,  // Cacaoweb
            /webappstoolbarba\.texthelp\.com\//i,
            /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
            // Shopify Script Errors for Shopify assets we cant control or interact with (IE not APIs)
            /cdn\.shopify\.com\/shopifycloud\/shopify/i,
            /cdn\.shopify\.com\/shopifycloud\/boomerang/i,
            /cdn\.shopify\.com\/shopifycloud\/payment-sheet/i,
            /cdn\.shopify\.com\/shopifycloud\/web-pixels-manager/i,
            /cdn\.shopify\.com\/shopifycloud\/shop-js/i,
            /cdn\.shopify\.com\/shopifycloud\/media-analytics/i,
            // Suppressing Yotpo errors tha appear to be nothing, but are not being resolved by their team
            /staticw2\.yotpo\.com/i
        ],
    });
});

Steps to Reproduce

1. Previously we were using the Bundle integration, which didn't leverage the onLoad call.
2. We switched to using the Loader to optimize page speed a bit
3. Since switching to using the loader method which uses the onLoad call instead of the direct init call, route grouping is no longer working solidly and stably

Expected Result

Route grouping context names should work reliably whether using the onLoad invocation or the init invocation.

Actual Result

Before using the loader method

After using the loader method

[mydea]

Hey,

Is the page publicly accessible? If so, could you share a link so we can look into it?
Else, could you maybe share the generated JS as an example? And also share which settings you selected for the loader script in the sentry UI?

[JamiesonRoberts]

Hey!

All of the page url's referenced there are publicly accessible on either https://www.saxxunderwear.ca or https://www.saxxunderwear.com - here is an example one https://www.saxxunderwear.ca/products/sxlp741_mnb

Also, it's worth noting that in the back end there seems to be a somewhat noticeable correlation between Safari and the grouping not working. But it's not exclusive to Safari, there are definitely other browsers in the mix. I can also grab some span data from the backend of sentry, but not sure what you need for me to link to it though!

For the loader script I selected

• SDK Latest
• Enable Performance Monitoring

Here is an example JS sentry unload call that is fully generated

Sentry.onLoad(function() {
                    Sentry.init({
                        integrations: [new Sentry.BrowserTracing({
                            beforeNavigate: context => {
                                return {
                                    ...context,
                                    name: '/products/:productID',
                                };
                            },
                        })],
                        environment: 'ca',

                        // We recommend adjusting this value in production, or using tracesSampler
                        // for finer control
                        tracesSampleRate: 0.4,
                        
                        release: "master@c417ecdd0aacad19fdf0c43a70a9b384f5d122f0",
                        ignoreErrors: [
                            // Random plugins/extensions
                            'top.GLOBALS',
                            // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
                            'originalCreateNotification',
                            'canvas.contentDocument',
                            'MyApp_RemoveAllHighlights',
                            'http://tt.epicplay.com',
                            'Can\'t find variable: ZiteReader',
                            'jigsaw is not defined',
                            'ComboSearch is not defined',
                            'http://loading.retry.widdit.com/',
                            'atomicFindClose',
                            // Facebook borked
                            'fb_xd_fragment',
                            // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to reduce this. (thanks @acdha)
                            // See http://stackoverflow.com/questions/4113268/how-to-stop-javascript-injection-from-vodafone-proxy
                            'bmi_SafeAddOnload',
                            'EBCallBackMessageReceived',
                            // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
                            'conduitPage',
                            // Avast extension error
                            '_avast_submit',
                            // Instagram error that Meta isn't fixing but is not impacting users
                            // See https://developers.facebook.com/community/threads/320013549791141/
                            '_AutofillCallbackHandler',
                            // Supressing nothing errors from Safari:
                            // https://stackoverflow.com/questions/55738408/javascript-typeerror-cancelled-error-when-calling-fetch-on-ios
                            'TypeError: Failed to fetch',
                            'TypeError: NetworkError when attempting to fetch resource.',
                            'TypeError: cancelled',
                            'TypeError: Load failed',
                            // Suppressing Listrak Internal Error
                            'QuotaExceededError',
                            // Suppressing Nosto Error
                            'Non-Error promise rejection captured'
                        ],
                        denyUrls: [
                            // Google Adsense
                            /pagead\/js/i,
                            // Facebook flakiness
                            /graph\.facebook\.com/i,
                            // Facebook blocked
                            /connect\.facebook\.net\/en_US\/all\.js/i,
                            // Woopra flakiness
                            /eatdifferent\.com\.woopra-ns\.com/i,
                            /static\.woopra\.com\/js\/woopra\.js/i,
                            // Automizely errors
                            /sdks\.automizely-analytics\.com/i,
                            // Chrome extensions
                            /extensions\//i,
                            /^chrome:\/\//i,
                            // Other plugins
                            /127\.0\.0\.1:4001\/isrunning/i,  // Cacaoweb
                            /webappstoolbarba\.texthelp\.com\//i,
                            /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
                            // Shopify Script Errors for Shopify assets we cant control or interact with (IE not APIs)
                            /cdn\.shopify\.com\/shopifycloud\/shopify/i,
                            /cdn\.shopify\.com\/shopifycloud\/boomerang/i,
                            /cdn\.shopify\.com\/shopifycloud\/payment-sheet/i,
                            /cdn\.shopify\.com\/shopifycloud\/web-pixels-manager/i,
                            /cdn\.shopify\.com\/shopifycloud\/shop-js/i,
                            /cdn\.shopify\.com\/shopifycloud\/media-analytics/i,
                            // Suppressing Yotpo errors tha appear to be nothing, but are not being resolved by their team
                            /staticw2\.yotpo\.com/i
                        ],
                    });
                });

[mydea]

OK, so I was able to reproduce this in Safari sometimes, and it seems the problem is that the custom config is not (always?) correctly applied for the loader for this transaction 🤔 I can see in the sent envelope in Safari that also the sample_rate is 1 (not 0.4) which leads me to believe that the custom config is not in there at all, for whatever reason...

If I run Sentry.getCurrentHub().getClient().getOptions() I can see the correct options though, so it doesn't appear as if it generally is not applying this, but only sometimes...

Could you try enabling debug for the loader? Maybe the debug logs show what is going on (you can enable/disable this in the UI) in Safari.

[JamiesonRoberts]

@mydea I've switched on the debugging toggle for the loader!