Hej, I'm Julia.

I recently had to debug an annoying error which was showing up in Sentry from my React app. The specific error I was seeing was

“SecurityError: Blocked a frame with origin “[WEBSITE]” from accessing a cross-origin frame. Protocols, domains, and ports must match.”

(where [WEBSITE] was the URL of my domain).

The strange thing was that there aren't any obvious iframes used in the React app, so it was a bit of an unexpected error to be getting. I was also fairly new to using Sentry, so the problem wasn't immediately clear to me at first glance.

Having now had the chance to explore its functions in more detail, I have to say that it's actually a really handy piece of software to use on front end apps, as it's able to provide a lot more colour around environments under which bugs seem to be happening, in this age of a million different browsers and a gazillion different devices from which to access them from.

Here's what I managed to garner from Sentry for this specific issue:

• 100% of the errors were coming from a Facebook browser, and specifically the iOS operating system (i.e. Apple mobile devices only).
• Whenever this error happened, I would always see mention of 2 other scripts loading in the browser: (i) Google Analytics (GA), (ii) heat mapping software (a well-known and popular one) used to monitor user behaviour on-site.
• Users seemed to be able to progress through the site, although I was not a 100% certain of this due to the difficulty in replicating the problem.

The easiest thing to test whether the problem was due to one or both of the above scripts, was just to take turns switching one or the other off for a set period of time (1 week seemed reasonable) and monitoring if the problem stopped. As switching off GA would've meant no metrics vs. just no heat maps, I decided to first start with disabling the heat mapping software.

Fast forward a week and I could say the test was pretty conclusive as there were no further instances of the error. The question now was whether there was some way to fix the issue.

Upon some back-and-forth conversations with the heat mapping software provider, it seemed like we were not the first who had encountered this problem with how Sentry was logging this behaviour...although we were only the second who had logged a bug about this. They were themselves still unsure as to where the fault lay (Facebook, Sentry, their software?) and so, couldn't say definitively what the solution was as it didn't seem like a particularly high priority ticket for them.

Ultimately then, I decided that the quickest and most logical fix for now was to exclude the heat mapping script from running in the event that the detected browser was Facebook (or Instagram). My reasoning behind this was:

• The React app flows in a linear way i.e. there wasn't a huge need to monitor what it was users seems to be gravitating towards to try to understand how much it deviated from the intended behaviour.
• As I couldn't say with 100% certainty that this error was not blocking users from progressing, it was safer to disable.
• It was an easy fix:

<script>
  function fromFacebookApp() {
    const ua = navigator.userAgent || navigator.vendor;
    return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1) || (ua.indexOf('Instagram') > -1);
  }
  if (fromFacebookApp()===false) {
    <!-- insert heat map script here -->
  }
</script>