CODEWITHSUNDEEP
javascriptreactjsfacebooknext.jssentry
Nicu Timofte
Nicu Timofte

Reputation: 152

JSON Parse error: Unrecognized token '!' - error caught by Sentry

The error in the title is caught by Sentry (an error tracking tool). Below is a screenshot from Sentry - showing the stack trace.

sentry screenshot

Note: the script /en_US/iab.autofill.payment.js where handleMessage is located is loaded from Facebook (link here), and I couldn't find this script in the javascript bundle, nor anything related to it. I assume it's loaded by a 3rd party script - I'm using Google Tag Manager (which is also loading Facebook Pixel), Segment (loading Hotjar and Mixpanel), and Snapchat. The error started to appear without any changes in these scripts or the services that they're sending data to.

Note 2: It seems that the error is triggered quite often, about 10-15% of the time. I tried to reproduce it but given that it's a handled error, it doesn't show in the dev console.

Any direction on where to look would be much appreciated.

Upvotes: 11

Views: 1271

Answers (3)

Nicu Timofte
Nicu Timofte

Reputation: 152

Apparently, the issue went away after a couple of weeks without changing anything on my side.

Upvotes: 0

路小仁
路小仁

Reputation: 17

i have meet that too, its because the one script facebook inject in. will postMessage(Object), but the another script will listen the message and try to JSON.parse an object ,so it will came out a error. u can use 'vconsole' lib, and add a window.addEventListener('message',(e)=>{console.log(e.data)}) and u can see that

Upvotes: 0

Zoran Antolovic
Zoran Antolovic

Reputation: 61

I'm seeing this a lot, and it seems to be coming 100% from users using Facebook browser on iOS (I guess this is the browser you see when you're using the Facebook app).

I tried to debug this with a snippet:

<script>
    window.addEventListener('message', function (e) {
        console.log(e);
        JSON.parse(e.data);
        console.log('foo');
    }, false);
</script>

This is from the library you linked. Assuming that e.data is JSON string (not e.g. an object?), without any safeguard seems to be breaking things.

The second console.log doesn't fire, so I think this is causing some unexpected behaviours in my case (buttons not reacting to clicks with js listeners etc)

I don't know if there is a workaround or a way to protect from this in Facebook embedded browser (I guess it's loaded there)

Looking forward to hear more info

Upvotes: 6

Related Questions