JSON Parse error: Unable to parse JSON string - Issue while pushing event data

[ygag-anase]

Sometimes I'm facing trouble while pushing data to the CleverTap. Because of this reason only my 95 percentage of my events are getting tracked.
I'm using clevertap-web-sdk version 1.9.0.

This is how I pushing data to CT:

// #.dummy payload

const payload = {"Platform":"MWEB","Brand":"Birthday Card","Brand ID":"YUBCQAJJ07","Category Name":"Birthday","Purchase Type":"send-as-gift","Redemption Type":"online_store","Quantity":1,"Amount":200,"Currency":"QAR","Occasion":"BIR"}

function pushEvent(eventName: string, payload: {}) { try { typeof window !== 'undefined' && window?.clevertap?.event?.push(eventName, payload); } catch(err) { console.log("error in CT pushEvent",err); Sentry.captureMessage(error in CT pushEvent - mWeb, ${JSON.stringify(err)}); } }

Usually I get following errors in my sentry logs in production:

{ message: JSON Parse error: Unable to parse JSON string, name: SyntaxError, stack: parse@[native code] it@https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js:1:21249 processEvent@https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js:1:98250 Fe@https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js:1:14530 push@https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js:1:13410 }

and

{ message: JSON Parse error: Unexpected identifier "c69678a5dc90478fbb4517d1f62c0015", name: SyntaxError, stack: parse@[native code] it@https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js:1:21249 processEvent@https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js:1:98250 Fe@https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js:1:14530 push@https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js:1:13410 }

[KambleSonam]

Hey @ygag-anase I tried doing clevertap.event.push, but didn't encounter any error. Can you please provide more details in what scenario this error is faced ?

clevertap.event.push('test-05', {"Platform":"MWEB","Brand":"Birthday Card","Brand ID":"YUBCQAJJ07","Category Name":"Birthday","Purchase Type":"send-as-gift","Redemption Type":"online_store","Quantity":1,"Amount":200,"Currency":"QAR","Occasion":"BIR"})

[ygag-anase]

Hi @KambleSonam, Thank you for the response. I don't think this issue is caused by the payload. I believe something going wrong inside the package after we are pushing the data. Also this issue rarely happens like 5%. I think inside of the package there is a scenario that is parsing the whole data which got from the user and it is getting failed there. Some times it throw error like Unable to parse JSON string or Unexpected identifier "c69678a5dc90478fbb4517d1f62c0015" .

[KambleSonam]

Hey @ygag-anase . Thank You for the response.
I don't see such an error being logged from the Web SDK. Can you help with all the operations you are doing via SDK? Because I have been testing the SDK for a long time and have never faced this.

[ygag-anase]

Hi @KambleSonam, Sure.
I'll explain how we are handling our CT

// # Clevertap component

`import { useEffect, useState } from "react";
import clevertap from "clevertap-web-sdk";

function Clevertap({ clevertapAccountId }: { clevertapAccountId: string }) {
const [clevertapModule, setClevertapModule] = useState<
typeof clevertap | null

(null);

useEffect(() => {
const clevertapInit = async () => {
if (!clevertapModule) {
console.log("clevertapModule is yet to be ready");
const initializedModule = await initializeClevertap();
setClevertapModule(initializedModule);
}
};

setTimeout(() => {
  clevertapInit();
}, 600);

}, [clevertapModule]);

const initializeClevertap = async () => {
const clevertapModule = await import("clevertap-web-sdk");
clevertapModule.default.init(clevertapAccountId);
console.log("clevertapModule is loaded");
clevertapModule.default.privacy.push({ optOut: false });
clevertapModule.default.privacy.push({ useIP: true });
clevertapModule.default.setLogLevel(0);
return clevertapModule.default;
};

return null;
}

export default Clevertap;
`

And we are calling the component inside _app.tsx and initialising the clevertap. (We are using nextjs 12 and 13 and both application has this issue)

// #. Push event function

function pushEvent(eventName: string, payload: {}) { try { typeof window !== "undefined" && window?.clevertap?.event?.push(eventName, payload); } catch (err) { console.log("error in CT pushEvent", err); Sentry.captureMessage(error in CT pushEvent, ${JSON.stringify(err)}); } }

function pushTappedOnProduct(data?: { productName: string | undefined; productId: string | undefined; category: string | undefined; store: string; redemptionType: string | undefined; }) { const eventData = { [clevertapEventsProperties.PLATFORM]: "WEB", [clevertapEventsProperties.PRODUCT_NAME]: data?.productName, [clevertapEventsProperties.PRODUCT_ID]: data?.productId, [clevertapEventsProperties.REDEMPTION_TYPE]: data?.redemptionType, [clevertapEventsProperties.CATEGORY_NAME]: data?.category, [clevertapEventsProperties.STORE]: data?.store?.toString().toUpperCase(), }; pushEvent(clevertapEvents.PRODUCT_VIEWED, eventData); }

this is how we are managing our CleverTap cycle. Whe will be calling pushTappedOnProduct function when user click on the product.

If you need any other information I'll be happy to provide, Thanks.

[KambleSonam]

Hey @ygag-anase Thank You for the response.
can you set the LogLevel to 3 clevertap.setLogLevel(3) as it will give all the logs coming from SDK.
And share the console logs if any error received there. ?

[ygag-anase]

I could not find any errors there