Shopify
`completed` event is not caught on Android on release builds
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
completedevent 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
Hey @xseignard, this issue has been triaged and will be picked up by the team soon.
@xseignard can you confirm which version of react-native you're using? You're using an expo app, correct?
I cannot reproduce this on @shopify/[email protected] and [email protected]
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
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: '<redacted>' },
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: '<redacted>',
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: '<redacted>',
10-16 13:25:08.708 17780 17874 I ReactNativeJS: hostname: '<redacted>',
10-16 13:25:08.708 17780 17874 I ReactNativeJS: href: '<redacted>/thank-you',
10-16 13:25:08.708 17780 17874 I ReactNativeJS: origin: '<redacted>',
10-16 13:25:08.708 17780 17874 I ReactNativeJS: pathname: '<redacted>/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: '<redacted>',
10-16 13:25:08.708 17780 17874 I ReactNativeJS: hostname: '<redacted>',
10-16 13:25:08.708 17780 17874 I ReactNativeJS: href: '<redacted>/thank-you',
10-16 13:25:08.708 17780 17874 I ReactNativeJS: origin: '<redacted>',
10-16 13:25:08.708 17780 17874 I ReactNativeJS: pathname: '<redacted>/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: '<redacted>',
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: '<redacted>',
10-16 13:25:08.712 17780 17874 I ReactNativeJS: hostname: '<redacted>',
10-16 13:25:08.712 17780 17874 I ReactNativeJS: href: '<redacted>/thank-you',
10-16 13:25:08.712 17780 17874 I ReactNativeJS: origin: '<redacted>',
10-16 13:25:08.712 17780 17874 I ReactNativeJS: pathname: '<redacted>/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: '<redacted>',
10-16 13:25:08.712 17780 17874 I ReactNativeJS: hostname: '<redacted>',
10-16 13:25:08.712 17780 17874 I ReactNativeJS: href: '<redacted>/thank-you',
10-16 13:25:08.712 17780 17874 I ReactNativeJS: origin: '<redacted>',
10-16 13:25:08.712 17780 17874 I ReactNativeJS: pathname: '<redacted>/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: '<redacted>',
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: '<redacted>',
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 is there anything notable in your logs? Are you also subscribing to pixel events? can you see those fire?
Hello @markmur We don't subscribe to pixel events. We just upgraded to expo@51/[email protected]. I'll bump this lib to the latest and cross🤞 the issue disappear. I'll let you know
Hello @markmur We still face the issue with the following combination:
- expo@51
- [email protected]
- @shopify/[email protected]
The completed event is not fired on Android
Thanks for checking. Can you share any logs around the time that the order completed?
Since the completed event ain't fired, the checkout sheet ain't closed and we cannot trigger navigation updates, letting the user having to close the checkout sheet, leading to trigger the close event.
We see the following funnel (in our analytics):
Checkout button is clicked > Triggers the Shopify checkout sheet > User proceed the payment > Payment is done and we see the order in Shopify > No completed event > The user have to manually close the Shopify checkout sheet > Triggers the close event
I'll try to reproduce locally, because as stated on the issue title, it only happens on release builds
🤷
Hello again, here's the error logs in logcat:
2024-10-31 16:25:46.801 23810-23885 XXX XXX I Shopify checkout: completed event
2024-10-31 16:25:46.804 23810-23885 XXX XXX E Failed to parse event data: Invalid JSON
2024-10-31 16:25:46.804 23810-23885 XXX XXX E LifecycleEventParseError: Failed to parse event data: Invalid JSON
at anonymous (address at index.android.bundle:1:11405239)
at apply (native)
at emit (address at index.android.bundle:1:413336)
at apply (native)
at anonymous (address at index.android.bundle:1:411720)
at emit (address at index.android.bundle:1:412014)
at apply (native)
at __callFunction (address at index.android.bundle:1:407640)
at anonymous (address at index.android.bundle:1:406055)
at __guard (address at index.android.bundle:1:407000)
at callFunctionReturnFlushedQueue (address at index.android.bundle:1:406013)
2024-10-31 16:25:46.804 23810-23884 ReactNativeJS XXX E { [LifecycleEventParseError: Failed to parse event data: Invalid JSON] name: 'LifecycleEventParseError' }
2024-10-31 16:25:46.807 23810-23885 unknown:ReactNative XXX E LifecycleEventParseError: Failed to parse event data: Invalid JSON, js engine: hermes, stack:
anonymous@1:11405239
emit@1:413336
anonymous@1:411720
emit@1:412014
__callFunction@1:407640
anonymous@1:406055
__guard@1:407000
callFunctionReturnFlushedQueue@1:406013
The issue only happens on release builds 🤔
So the issue is coming from here https://github.com/Shopify/checkout-sheet-kit-react-native/blob/3.0.4/modules/%40shopify/checkout-sheet-kit/src/index.ts#L175
I don't know why it only happens on release builds though 🤔
Thanks @xseignard. That's super helpful. Do you have a checkout URL you can share where it happened?
Are you using custom pixels at all?
cc @kiftio
Are you using custom pixels at all?
No custom pixels
Do you have a checkout URL you can share where it happened?
Coming back to you
Here it is @markmur https://alanmembershop.myshopify.com/cart/c/Z2NwLWV1cm9wZS13ZXN0NDowMUo5VkRUNUFHUTVXOEZCQkhNQ0gzSkFYVg?key=1fa2be1d74081dbc83919a3ddb4e677b
Looking at the code, it doesn't look like failing to parse a different event (e.g. a custom pixel event) would affect the completed event.
It only happening on release builds is also strange. I can't think of anything that changes for release builds that'd affect this.
I'm wondering if we can log the invalid JSON as it sounds reproducible? Maybe by adding in some logging and linking to a local/non-npm version of the library. Would that be feasible?
Yes as stated in the title the issue is about the completed event.
Regarding release build, well I can't tell 🤷 Something about proguard I guess? See https://stackoverflow.com/questions/50256959/release-build-issues-in-converting-json-to-list
@kiftio sure, I'll patch the lib to log the JSON and let you know
Hey @xseignard, I've added logging in 3.1.1 of the kit.
I've also found the receipt from the Checkout URL you shared and injected it into our sample app to simulate the error, but the completed event fired as expected in release mode on a Pixel 5 device.
Can you update the kit on your side to 3.1.1, test again and share the logs?
Something about proguard I guess? See https://stackoverflow.com/questions/50256959/release-build-issues-in-converting-json-to-list
Are you using any specific proguard configuration in your app?
Here's the error with 3.1.1
2024-11-02 00:06:40.252 7707-7800 xxx xxx E Failed to parse "completed" event data: Invalid JSON {}
2024-11-02 00:06:40.252 7707-7800 xxx xxx E LifecycleEventParseError: Failed to parse "completed" event data: Invalid JSON
at anonymous (address at index.android.bundle:1:11414733)
at apply (native)
at emit (address at index.android.bundle:1:413964)
at apply (native)
at anonymous (address at index.android.bundle:1:412348)
at emit (address at index.android.bundle:1:412642)
at apply (native)
at __callFunction (address at index.android.bundle:1:408268)
at anonymous (address at index.android.bundle:1:406683)
at __guard (address at index.android.bundle:1:407628)
at callFunctionReturnFlushedQueue (address at index.android.bundle:1:406641)
2024-11-02 00:06:40.253 7707-7799 ReactNativeJS xxx E { [LifecycleEventParseError: Failed to parse "completed" event data: Invalid JSON] name: 'LifecycleEventParseError' }, '{}'
2024-11-02 00:06:40.258 7707-7800 unknown:ReactNative xxx E LifecycleEventParseError: Failed to parse "completed" event data: Invalid JSON, js engine: hermes, stack:
anonymous@1:11414733
emit@1:413964
anonymous@1:412348
emit@1:412642
__callFunction@1:408268
anonymous@1:406683
__guard@1:407628
callFunctionReturnFlushedQueue@1:406641
Ok I was able to fix the issue by adding the following proguard rules:
# shopify checkout sheet
-keeppackagenames
-keep class com.shopify.reactnative.checkoutsheetkit.** { *; }
-keep class com.shopify.checkoutsheetkit.** { *; }
This is for sure too large as rules, but at least it works
The conclusion of this issue is that proguard modifies the code of some important class and then it messes with JSON parsing.
I won't dig more, but at least I've have a solution 😌
Great to hear that this worked for you @xseignard. Thanks for debugging it with us.
I'll update the kit to include some appropriate rules in the modules' proguard config to avoid you having to do this on your side.
For future 👀 on this issue:
If you're still having issues with proguard minification, try explicitly keeping the sheet kit classes by adding the following to the proguard-rules.pro file for your app.
# Keep Checkout Sheet Kit classes
-keep class com.shopify.checkoutsheetkit.** { *; }
If this does not solve for you, please open a new issue.