`completed` event is not caught on Android on release builds

xseignard commented 2 weeks ago

What area is the issue related to?

Checkout Sheet Kit

What platform does the issue affect?

Android

What version of `@shopify/checkout-sheet-kit` are you using?

3.0.1 and 3.0.3

Do you have reproducible example code?

No response

Steps to Reproduce

Implement @shopify/checkout-sheet-kit

export const SomeComponent = () => {
const shopifyCheckout = useShopifyCheckoutSheet();
useEffect(() => {
const completed = shopifyCheckout.addEventListener(
  'completed',
  (event: CheckoutCompletedEvent) => {
    console.log("I'm here");
  },
);
return () => {
  completed?.remove();
};
}, [shopifyCheckout]);

return <SomeStuff />
};

Perform a purchase on a store on Android
The completed event is caught on dev builds, not caught on release build

Expected Behavior

The completed event is caught on release build

Actual Behavior

The completed event is not caught on release build

Storefront domain

redacted

Screenshots/Videos/Log output

No response

xseignard commented 1 week ago

Hello, any update?

markmur commented 2 days ago

Hey @xseignard, this issue has been triaged and will be picked up by the team soon.

markmur commented 2 days ago

@xseignard can you confirm which version of react-native you're using? You're using an expo app, correct?

markmur commented 2 days ago

I cannot reproduce this on @shopify/checkout-sheet-kit@3.0.4 and react-native@0.74.1

Here are the logs from a release build of the sample app:

https://github.com/Shopify/checkout-sheet-kit-react-native/blob/46595e76182e84896028a48083e98f59998fd0e5/sample/src/App.tsx#L130-L136

Production logs

```logs 10-16 13:25:08.704 17780 17874 I ReactNativeJS: '[CheckoutCompletedEvent]', 'gid://shopify/OrderIdentity/11204857298966' 10-16 13:25:08.705 17780 17874 I ReactNativeJS: '[CheckoutCompletedEvent]', { orderDetails: 10-16 13:25:08.705 17780 17874 I ReactNativeJS: { billingAddress: 10-16 13:25:08.705 17780 17874 I ReactNativeJS: { address1: '1215 Street', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: address2: null, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: city: 'San Francisco', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: countryCode: 'US', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: firstName: 'Mark', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: lastName: 'Murray', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: name: 'Mark', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: phone: null, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: postalCode: '94105', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: referenceId: null, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: zoneCode: 'CA' }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: cart: 10-16 13:25:08.705 17780 17874 I ReactNativeJS: { lines: 10-16 13:25:08.705 17780 17874 I ReactNativeJS: [ { discounts: [], 10-16 13:25:08.705 17780 17874 I ReactNativeJS: image: 10-16 13:25:08.705 17780 17874 I ReactNativeJS: { altText: null, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: lg: 'https://cdn.shopify.com/s/files/1/0692/3996/3670/files/jenny_shopify_product_photography_image_of_a_Bird_of_Paradise_3c71a314-9b31-4735-a074-08c4392320a4_2_256x256.png?v=1724793637', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: md: 'https://cdn.shopify.com/s/files/1/0692/3996/3670/files/jenny_shopify_product_photography_image_of_a_Bird_of_Paradise_3c71a314-9b31-4735-a074-08c4392320a4_2_128x128.png?v=1724793637', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: sm: 'https://cdn.shopify.com/s/files/1/0692/3996/3670/files/jenny_shopify_product_photography_image_of_a_Bird_of_Paradise_3c71a314-9b31-4735-a074-08c4392320a4_2_64x64.png?v=1724793637' }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: merchandiseId: 'gid://shopify/ProductVariant/50682740506646', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: price: { amount: 0, currencyCode: 'USD' }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: productId: 'gid://shopify/Product/10461333422102', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: quantity: 1, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: title: 'Bird of Paradise' } ], 10-16 13:25:08.705 17780 17874 I ReactNativeJS: price: 10-16 13:25:08.705 17780 17874 I ReactNativeJS: { discounts: [], 10-16 13:25:08.705 17780 17874 I ReactNativeJS: shipping: { amount: 0, currencyCode: 'USD' }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: subtotal: { amount: 0, currencyCode: 'USD' }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: taxes: { amount: 0, currencyCode: 'USD' }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: total: { amount: 0, currencyCode: 'USD' } }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: token: '' }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: deliveries: 10-16 13:25:08.705 17780 17874 I ReactNativeJS: [ { details: 10-16 13:25:08.705 17780 17874 I ReactNativeJS: { additionalInfo: null, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: location: 10-16 13:25:08.705 17780 17874 I ReactNativeJS: { address1: '1215 Street', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: address2: null, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: city: 'San Francisco', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: countryCode: 'US', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: firstName: 'Mark', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: lastName: 'Murray', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: name: 'Mark', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: phone: null, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: postalCode: '94105', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: referenceId: null, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: zoneCode: 'CA' }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: name: null }, 10-16 13:25:08.705 17780 17874 I ReactNativeJS: method: 'SHIPPING' } ], 10-16 13:25:08.705 17780 17874 I ReactNativeJS: email: '', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: id: 'gid://shopify/OrderIdentity/11204857298966', 10-16 13:25:08.705 17780 17874 I ReactNativeJS: paymentMethods: [], 10-16 13:25:08.705 17780 17874 I ReactNativeJS: phone: null } } 10-16 13:25:08.708 17780 17874 I ReactNativeJS: '[CheckoutPixelEvent]', 'page_viewed', { context: 10-16 13:25:08.708 17780 17874 I ReactNativeJS: { document: 10-16 13:25:08.708 17780 17874 I ReactNativeJS: { characterSet: 'UTF-8', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: location: 10-16 13:25:08.708 17780 17874 I ReactNativeJS: { hash: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: host: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: hostname: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: href: '/thank-you', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: origin: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: pathname: '/thank-you', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: port: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: protocol: 'https:', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: search: '' }, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: referrer: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: title: 'Checkout - Plant' }, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: navigator: 10-16 13:25:08.708 17780 17874 I ReactNativeJS: { cookieEnabled: true, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: language: 'en-US', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: languages: [ 'en-US' ], 10-16 13:25:08.708 17780 17874 I ReactNativeJS: userAgent: 'Mozilla/5.0 (Linux; Android 14; Build/AP31.240322.020; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/124.0.6355.0 Mobile Safari/537.36 ShopifyCheckoutSDK/3.0.4 (8.1;web_default;standard) ReactNative' }, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: window: 10-16 13:25:08.708 17780 17874 I ReactNativeJS: { innerHeight: 767, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: innerWidth: 412, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: location: 10-16 13:25:08.708 17780 17874 I ReactNativeJS: { hash: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: host: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: hostname: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: href: '/thank-you', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: origin: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: pathname: '/thank-you', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: port: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: protocol: 'https:', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: search: '' }, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: origin: '', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: outerHeight: 767, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: outerWidth: 412, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: pageXOffset: 0, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: pageYOffset: 0, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: screen: { height: 892, width: 412 }, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: screenX: 0, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: screenY: 0, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: scrollX: 0, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: scrollY: 0 } }, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: data: { checkout: null }, 10-16 13:25:08.708 17780 17874 I ReactNativeJS: id: 'sh-965db779-1582-4AC3-F162-C65F948E0CB7', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: name: 'page_viewed', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: timestamp: '2024-10-16T17:25:08.610Z', 10-16 13:25:08.708 17780 17874 I ReactNativeJS: type: 'STANDARD' } 10-16 13:25:08.712 17780 17874 I ReactNativeJS: '[CheckoutPixelEvent]', 'checkout_completed', { context: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { document: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { characterSet: 'UTF-8', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: location: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { hash: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: host: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: hostname: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: href: '/thank-you', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: origin: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: pathname: '/thank-you', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: port: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: protocol: 'https:', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: search: '' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: referrer: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: title: 'Checkout - Plant' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: navigator: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { cookieEnabled: true, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: language: 'en-US', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: languages: [ 'en-US' ], 10-16 13:25:08.712 17780 17874 I ReactNativeJS: userAgent: 'Mozilla/5.0 (Linux; Android 14; Build/AP31.240322.020; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/124.0.6355.0 Mobile Safari/537.36 ShopifyCheckoutSDK/3.0.4 (8.1;web_default;standard) ReactNative' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: window: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { innerHeight: 767, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: innerWidth: 412, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: location: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { hash: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: host: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: hostname: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: href: '/thank-you', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: origin: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: pathname: '/thank-you', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: port: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: protocol: 'https:', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: search: '' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: origin: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: outerHeight: 767, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: outerWidth: 412, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: pageXOffset: 0, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: pageYOffset: 0, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: screen: { height: 892, width: 412 }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: screenX: 0, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: screenY: 0, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: scrollX: 0, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: scrollY: 0 } }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: data: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { checkout: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { attributes: [], 10-16 13:25:08.712 17780 17874 I ReactNativeJS: billingAddress: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { address1: '1215 Street', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: address2: null, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: city: 'San Francisco', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: country: 'US', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: countryCode: 'US', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: firstName: 'Mark', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: lastName: 'Murray', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: phone: null, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: province: 'CA', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: provinceCode: 'CA', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: zip: '94105' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: buyerAcceptsEmailMarketing: false, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: buyerAcceptsSmsMarketing: false, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: currencyCode: 'USD', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: delivery: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { selectedDeliveryOptions: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: [ { cost: { amount: 0, currencyCode: 'USD' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: costAfterDiscounts: { amount: 0, currencyCode: 'USD' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: description: null, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: handle: 'be46e4900a605f5d0c4de34380804f0b-0caaf40106c905ee9e6bc5f1ec8cac6f', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: title: 'Free Shipping', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: type: 'shipping' } ] }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: discountApplications: [], 10-16 13:25:08.712 17780 17874 I ReactNativeJS: discountsAmount: { amount: 0, currencyCode: 'USD' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: email: '', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: lineItems: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: [ { discountAllocations: [], 10-16 13:25:08.712 17780 17874 I ReactNativeJS: finalLinePrice: { amount: 0, currencyCode: 'USD' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: id: '50682740506646', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: properties: [], 10-16 13:25:08.712 17780 17874 I ReactNativeJS: quantity: 1, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: sellingPlanAllocation: null, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: title: 'Bird of Paradise', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: variant: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { id: '50682740506646', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: image: { src: 'https://cdn.shopify.com/s/files/1/0692/3996/3670/files/jenny_shopify_product_photography_image_of_a_Bird_of_Paradise_3c71a314-9b31-4735-a074-08c4392320a4_2_64x64.png?v=1724793637' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: price: { amount: 0, currencyCode: 'USD' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: product: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { id: '10461333422102', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: title: 'Bird of Paradise', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: type: 'Live plant', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: untranslatedTitle: 'Bird of Paradise', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: url: '/products/bird-of-paradise', 10-16 13:25:08.712 17780 17874 I ReactNativeJS: vendor: 'Plant' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: sku: null, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: title: null, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: untranslatedTitle: '' } } ], 10-16 13:25:08.712 17780 17874 I ReactNativeJS: localization: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { country: { isoCode: 'US' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: language: { isoCode: 'en-US' }, 10-16 13:25:08.712 17780 17874 I ReactNativeJS: market: 10-16 13:25:08.712 17780 17874 I ReactNativeJS: { 10-16 13:25:08.734 17780 17801 D EGL_emulation: app_time_stats: avg=2648.40ms min=5.95ms max=13176.28ms count=5 10-16 13:25:09.262 17780 17801 D EGL_emulation: app_time_stats: avg=25.52ms min=10.47ms max=484.60ms count=53 10-16 13:25:09.465 831 831 D ShadeCarrierGroup: ignoring old pipeline callback because new mobile icon is enabled 10-16 13:25:09.465 831 831 D ShadeCarrierGroup: ignoring old pipeline callback because new mobile icon is enabled 10-16 13:25:09.465 831 831 D ShadeCarrierGroup: ignoring old pipeline callback because new mobile icon is enabled ```

xseignard commented 2 days ago

We use expo50/react-native0.73/checkout-sheet-kit3.0.3

markmur commented 17 hours ago

@xseignard is there anything notable in your logs? Are you also subscribing to pixel events? can you see those fire?

xseignard commented 16 hours ago

Hello @markmur We don't subscribe to pixel events. We just upgraded to expo@51/react-native@0.74. I'll bump this lib to the latest and cross🤞 the issue disappear. I'll let you know

Shopify / checkout-sheet-kit-react-native