Receiving many "Crashed in non-app: [native code] in reportError" errors in Shopify Checkout Extensions

[edhgoose]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/react

SDK Version

9.19.0

Framework Version

React 18.3.1

Link to Sentry event

N/A

Reproduction Example/SDK Setup

Sentry.init({
        dsn: "https://[email protected]",
        defaultIntegrations: false,
        release: APP_VERSION,
        environment: "production",
        attachStacktrace: true,
        initialScope: {
            tags: {
                extension,
                shop,
            },
        },
        // Allow us to capture IP address so we can reference them in internal logging
        sendDefaultPii: true,
    });

The code we've got deployed is this application: https://github.com/mention-me/ShopifyAppV2

And we've deployed it as a Shopify Checkout Extension: https://shopify.dev/docs/api/checkout-ui-extensions

Steps to Reproduce

We're really struggling to reproduce it. I know it's happening thousands of times a day. It doesn't appear to be having a major impact on our end users.

It's easy for us to cause an error which does get tracked successfully but doesn't cause this error. We're unable to see what is causing this specific problem.

Some things we know which might be useful:

• Shopify extensions run in a sort of sandbox - so we don't have access to things like the navigator object in the browser.
• The reportError function is available from the sandbox.
• It doesn't appear to occur with every error, e.g. it's quite easy for the app to be configured such that error responses are thrown, but they don't trigger this specific reportError bug.
• I don't know if it's a Sentry problem or a Shopify issue, so I've raised a question in their community forums too: https://community.shopify.dev/t/sentry-receives-many-errors-about-crashes-in-non-app-reporterror/17274

Expected Result

Either:

• No errors reported for code that is irrelevant to us.
• More context on what the errors are
• A fix for the errors.

I'm not sure what's best!

Actual Result

This reportError issue appears in our logs a lot:

Here's an example log, with some client and IP details blurred out:

[andreiborza]

Hi @edhgoose, thanks for filing this. Could you please link an example event, you can remove the screenshots then. Also, consider filtering these errors out if you are sure they don't actually impact your users and are just noise for you.

[edhgoose]

Hi @andreiborza we're self hosting so I can't link to a specific event.

Is there anything I can offer you from the self hosted that would help?

[andreiborza]

Ah, understood. Nothing needed then. Did you consider filtering the errors out if they don't impact your users?

[edhgoose]

Absolutely - my only worry is I don't know for absolutely sure whether they don't. Our experience is like an advert, in the sense that if it wasn't there people wouldn't necessarily know anything was broken.

So I'm a touch worried it could be affecting end users and I'm not sure how to investigate. I was hoping to raise this to see if we could figure that out somehow.

[edhgoose]

From a brief conversation with Shopify (who don't think it's on their side), I'm wondering if the problem lies in the fact this is executed inside a WebWorker?

[andreiborza]

Right, understandably. I'll spend some time trying to reproduce this, but it might be difficult/not going anywhere. Thanks for the extra context.

[Lms24]

Hey @edhgoose apologies for the late reply from our end! I think the problem here really is that we can't reproduce this (and as far as I understand, you can't either).

I still struggle to fully understand your setup and the Shopify Extension.

• Can you confirm that your app is running within a web worker?
• Are you intializing Sentry within this worker?
• What does your build setup look like? Are you using @sentry/react and you bundle it within your application code? Or do you somehow host a Sentry bundle on a CDN/specifically include Sentry SDK code via a <script> tag?
• Can you provide the JSON of the captured event? You can either post it here if you're comfortable or mai it to lukas dot stracke at sentry.io (whatever you prefer)

The only that strikes me as familiar is that the error message is Script Error.. Such errors usually occur when a 3rd party javascript script is loaded in your webpage that is erroneous and can't be evaluated. See here for more details. This could very well be a browser extension that injects a script for example.

The interesting part is that our SDK actually attempts to filter this error out (because it's useless most of the time). This also leads me to believe that this reported error is probably not indicating an actual problem with your app. The interesting part is figuring out why this event makes it to Sentry in the first place.

Again, apologies for following up just now! If this is no longer relevant for you, this issue will auto close in a couple of weeks.

[edhgoose]

Hi @Lms24 I tried to email you the JSON a few days ago but it has bounced.

Could you confirm the right email is above? Happy to try again!

[Lms24]

sorry about that, I misstyped 😬. Corrected the address above

[edhgoose]

No stress @Lms24 - I've sent over a few examples.

Regarding your questions:

I still struggle to fully understand your setup and the Shopify Extension.

You and me both! Unfortunately, because we're dependent on Shopify (we write to their framework, and then they do something it's a little tricky to know exactly!). But I'll try my best!

Can you confirm that your app is running within a web worker?

I think so - Shopify provide a sort of sandbox for our code to run. You can try it out by visiting https://mention-me-checkout-extensibility.myshopify.com/, use the password "mention-me" and then put something in your cart. When you get to the Checkout screen, you should see a "Been referred by a friend?" link under the discount code box.

That is loaded via our Shopify App.

It loads a couple of scripts - e.g. here's the one for this specific blob of code:

https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/ui_extension/handle/checkout-journey/version/mention-me-148/2d675569-4975-4198-9178-7db148d5e621/4fa3cb4808ae933bd7fd7f0b25cb2725.js

You'll see the Sentry code in there.

I found various references to worker and sandbox tracing back through here - although I'm struggling to find them again now!

Are you intializing Sentry within this worker?

I guess so - we're not in controller of the worker, but we initialise Sentry inside our App (which is a react app). You can see our init logic here:

https://github.com/mention-me/ShopifyAppV2/blob/main/extensions/checkout-ui/src/Extension.tsx

which in turn loads Checkout, which inits sentry here:

https://github.com/mention-me/ShopifyAppV2/blob/main/extensions/checkout-ui/src/Checkout.tsx#L25

and that's done here:

https://github.com/mention-me/ShopifyAppV2/blob/main/shared/sentry.ts

What does your build setup look like? Are you using @sentry/react and you bundle it within your application code? Or do you somehow host a Sentry bundle on a CDN/specifically include Sentry SDK code via a

Good question - we're not in control of it. But I can tell you what I think is happening:

• We write a react app with certain hooks
• Which then goes through an esbuild process to create a bundle
• Shopify then uploads this somewhere - I guess into some sort of web serving system (maybe just an S3 bucket based on the URL "https://extensions.shopifycdn.com/partners-extensions-scripts-bucket/").
• Which then Shopify loads inside the worker

So, yes, we're including it in the app here: https://github.com/mention-me/ShopifyAppV2/blob/main/package.json#L18. We don't load it via a CDN.

Hope that helps - really appreciate your help digging into this.

[Lms24]

Thanks for getting back to me and also thanks for sending me the JSON payloads via email. I reviewed both and I think I know what's going on:

All JSON events contain this core error:

"exception": {
    "values": [
      {
        "type": "Error",
        "value": "Script error.",
        "stacktrace": {
          "frames": [
            {
              "function": "forEach",
              "filename": "[native code]",
              "abs_path": "[native code]",
              "in_app": true,
              "data": { "client_in_app": true }
            },
            // ...
          ]
        },
        "mechanism": { "type": "generic", "handled": true } 
      }
    ]
  },

As we already established, the Script error. messages usually come from 3rd party JS which fails to be evaluated. Also, in some cases when requests from within such bundles get blocked e.g. because of CORS or ad blockers. So I don't think these errors are concerning. In fact, in a minimal default SDK setup, these wouldn't even make it to Sentry because we filter them out by default. I furthermore don't think that this error comes from the SDK itself because since you're getting errors and events reported, its bundle seems to be loaded correctly.

That being said, given this weird sandbox setup from Shopify, I can't 100% rule out that the sandbox abstracts errors away so that actual errors somehow bubble up as Script error. but given the specific error message I'd err towards no. You can at least partially verify this by throwing a test error (e.g. on button click or whatever works for you) and checking if that error makes it to Sentry with the correct (or more sprcific) error message.

In your Sentry setup, you set defaultIntegrations: false which prevents the eventFiltersIntagration which takes care of filtering out noisy, low prio errors by default from being added to the SDK setup. (Admittedly, I missed this in the initial config in the issue description, sorry about that)

So I'd suggest moving forward with re-adding eventFiltersIntegration. If the app really runs in a worker btw, I think it's correct to disable default integrations to avoid incompatibilities with window not being available.

   Sentry.init({
        defaultIntegrations: false,
        integrations: [
           Sentry.eventFiltersIntegration(), // applies default filters for known useless errors
           Sentry.dedupeIntegration(), // this avoids sending the same error twice, just in case
        ]
    });

Let me know if this works for you!

[edhgoose]

Ah! That's it!

So, Shopify's default documentation says we should put defaultIntegrations: false,, and says:

We recommend disabling the default integrations to be sure it will run within a Web Worker. You'll need to add event listeners manually.

I've applied your changes, and now the errors have disappeared. We do see a lot of other errors (e.g. oddities in Shopify's API or when we release a bad change), but they're the ones we'd expect and we get the right error messages, so I think you're right that errors are bubbling up correctly.

Thank you so much @Lms24, your support has been excellent. I really appreciate all your help. I've raised the issue with the Shopify Community here: https://community.shopify.dev/t/changes-requested-to-the-sentry-documentation/21080. They're not often wonderful at responding, but hopefully between this post and that we've documented enough to help others.

Thanks again @Lms24.

[Lms24]

Thanks for letting us know! I'll close this issue then for now. Please let me know if this needs to be reopened. Thanks!