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

Question

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

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.

Answer 1

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