"Failed to load script" error (gtag & hotjar)

yoji-kojio commented 1 month ago

📚 What are you trying to do?

I'm using nuxt-scripts to setup Google Analytics and Hotjar. Apparently everything is working as expected, and I can't reproduce any errors. Both on localhost and in production, when I access my application, the script loads and trigger events correctly in different browsers. However, in production, Sentry is notifying me about this error, that is happening frequently (both gtag and hotjar). When I access the same page that triggered the error, nothing wrong happens (and nothing is logged in sentry). Which makes me think it might be a specific error in a particular browser.

🔍 What have you tried?

This is an example of how I setup hotjar, creating a composable that exports a method to identify user. This method identifyHotjarUser() is called in a onMounted() hook on my home page. Gtag setup is following almost the same structure.

export const useHotjar = () => {
  function identifyHotjarUser () {
    const runtimeConfig = useRuntimeConfig()
    const { hotjar } = runtimeConfig.public.scripts

    const { hj, $script } = useScriptHotjar({
      id: Number(hotjar.id),
      sv: hotjar.sv
    })

    $script.then(() => {
      hj('identify', 'user-id', {
        name: 'user name',
        website: 'http://user-website.com',
      })
    })
  }

  return {
    identifyHotjarUser,
  };
}

ℹ️ Additional context

This is the frequency of errors in each browser and OS:

Examples of user agents from Chrome Mobile:

Mozilla/5.0 (Linux; Android 7.0; SM-G930V Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.125 Mobile Safari/537.36 (compatible; Google-Read-Aloud; +https://support.google.com/webmasters/answer/1061943)

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Mobile Safari/537.36

harlan-zw commented 1 month ago

The issue is most likely related to the end user having a browser extension that is blocking these tracking scripts, although it is strange that it's occurring on mobile at such a high frequency 🤔

For some context, the first is a bot called "Google Read Aloud" which makes sense if it's blocking these.

Does Sentry give you any details on the script request? That would be failing and have the actual error

yoji-kojio commented 1 month ago

Sentry doesn't give me any details about the script request and the error. I can't even tell if it's affecting the end user in any way because I'm unable to reproduce the error. I don't know what else I can try to reach a conclusion :disappointed:

I’m going to setup gtag and hotjar using useScript instead of useScriptGoogleAnalytics and useScriptHotjar, just to ensure there's nothing wrong with the registry scripts.`

yoji-kojio commented 1 month ago

Out of a total of 24,000 visits to my site, I have about 1,500 occurrences of the error, which came from approximately 500 different users. This reinforces my belief that it’s a user-specific browser error, which may be blocking these tracking scripts.

For now, I’ll assume that’s the case and close the issue. If I have any updates on the error, I’ll come back here.

Thanks for the help!

nuxt / scripts