Failed to initialize Hotjar tracking script

[youssefBarnoukh]

I'm using Hotjar with react 18 basic use as follow:

  useEffect(() => {
    Hotjar.init(config.HOT_JAR_SITE_ID, config.HOT_JAR_VERSION, {
      debug: process.env.NODE_ENV === 'development', // TODO to remove after debugging in dev
      nonce: 'rAnDoM',
    });
  }, []);

when I run my project locally, no error is shown but once deployed, I get the following error

Error: Error: Failed to initialize Hotjar tracking script.
    at o (main.cb918bb2.js:1:4088671)
    at Object.init (main.cb918bb2.js:1:4088761)
    at main.cb918bb2.js:1:4302761
    at as (main.cb918bb2.js:1:3859514)
    at yd (main.cb918bb2.js:1:3879741)
    at main.cb918bb2.js:1:3876331
    at E (main.cb918bb2.js:1:3958327)
    at MessagePort.x (main.cb918bb2.js:1:3958861)

We are using Ngnix with a Content-Security-Policy in header that includes hotjar domain but still it didn't work

add_header Content-Security-Policy "default-src 'none'; connect-src https://insights.hotjar.com 'self' ...

Any help will be much appreciate it Regards

[airtonjal]

I'm having the same issue here. @youssefBarnoukh have you been able to fix it?

[filarrro]

I think it may be connected to your Content-Security-Policy definition, don't you see any other error before that one you've listed "Error: Failed to initialize Hotjar trackng script." ?

In case it's CSP there should be (at least in chrome dev tools) something like:

"Refused to execute inline script because it violates the following Content Security Policy directive: [...]

If it's CSP problem and you have full control of it's definition you can use nonce attribute as in the docs - https://github.com/hotjar/hotjar-js?tab=readme-ov-file#csp - I'm not sure if it's working as there's a hanging PR related to that topic -> https://github.com/hotjar/hotjar-js/pull/27

I haven't got full control over CSP in my project and there was a problem with executing dynamically created inline script added to HTML when Hotjar.init(siteId, version); was called as my CSP was defined like this script-src 'self' https://static.hotjar.com ...- so instead of calling Hotjar.init(siteId, hotjarVersion); I just extracted the code, created a function (code below) and called it, so inline script creation is skipped.

export default function ({ id, sv, debug = false, nonce = null }) {
  (function (h, o, t, j, a, r) {
    h.hj =
      h.hj ||
      function () {
        (h.hj.q = h.hj.q || []).push(arguments);
      };
    h._hjSettings = { hjid: id, hjsv: sv, hjDebug: debug };
    h._scriptPath = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
    if (!document.querySelector('script[src*="' + h._scriptPath + '"]')) {
      a = o.getElementsByTagName('head')[0];
      r = o.createElement('script');
      if (nonce) r.setAttribute('nonce', nonce);
      r.async = 1;
      r.src = h._scriptPath;
      a.appendChild(r);
    }
  })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
}