hotjar / hotjar-js Goto Github PK

Hi folks.
I've been facing an issue with hotjar last couple of days.

I contacted the support team (btw always answering me properly, thanks for that) but until now, my problem wasn't solved.

Well, seems that when my clients run my application with "Block third-party" on their browsers, and for that reason some of your bundled scripts are not load properly.

(this is my localhost environment, but also happen in production)

For fix that, I've added some conditions to your static file to prevent this issue to be fired by the browser and also not showing in the console as a error. To my fix run properly I copied this script to my assets.

Take a look in this conditions:

The hj.event.signal('varsLoaded') is not fired if this method is unavailable.

I also will reply to support with this solution and I am looking forward to hear from you.
If you need more tests or evidences, I'm here.

Is it possible to remove the identity from a user when they sign out? I identify people when they login using Hotjar.identify(userId), but ideally I can unidentify them when they logout. For example, the mixpanel js sdk let's you call mixpanel.reset() on user sign-out.

I'm sure I could do Hotjar.identify(null, {}); but I imagine this might just remove the attributes from already recorded events. 🤔

We are keeping getting the below undefined errors

"@hotjar/browser": "^1.0.9",

import Hotjar from '@hotjar/browser';


....

Hotjar.init(xxxx(hotjarId), 6);

TypeError Cannot read properties of undefined (reading 'cookie') 
    https://script.hotjar.com/modules.7532ebbcfaf7feae351e.js:1:7384 u.clear
    https://script.hotjar.com/modules.7532ebbcfaf7feae351e.js:1:10288 
    node_modules/.pnpm/[email protected]/node_modules/zone.js/fesm2015/zone.js:2355:40 Y.<computed>
    node_modules/.pnpm/[email protected]/node_modules/zone.js/fesm2015/zone.js:402:30 m.invokeTask
    node_modules/.pnpm/[email protected]/node_modules/zone.js/fesm2015/zone.js:171:46 a0.runTask
    node_modules/.pnpm/[email protected]/node_modules/zone.js/fesm2015/zone.js:483:33 invokeTask
    node_modules/.pnpm/[email protected]/node_modules/zone.js/fesm2015/zone.js:472:47 invoke
    node_modules/.pnpm/[email protected]/node_modules/zone.js/fesm2015/zone.js:2335:31 h.args.<computed>

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

Don't panic, this is a test!

We've gotten a significant number of automated error reports from the HJ script loaded through https://static.hotjar.com/c/hotjar-${hotjarId}.js?sv=${window._hjSettings.hjsv}:

This appears to be caused by the SDK attempting to access localStorage when unavailable, such as when in a private/incognito session. The stack trace shows that there is a canUseLocalStorage() check nearby, but it either isn't being called correctly or doesn't handle this edge case.

I couldn't find good place to report this issue to a HJ developer - feel free to point me in the right direction if this is not the place.

Hi, your source map point to the non existent src folder, can you bundle the next version fixing that?!

Hi, How can I detect if user is blocking hotjar requests? Probably I can get that info from Hotjar's dashboard but I need to detect on my application with your sdk. Thanks in advance!

Running with the nonce option and appropriate CSP headers set, I am still seeing some blocking happening because the nonce is not used for every <script> and <style> created by Hotjar.

Here is the offending Hotjar code I'm seeing where a script element is created and appended without setting the nonce value:

(function r(e, t = !1) {
  const o = "6.0";
  let i = {};
  function s(e) {
    if (!e.__vdevtools__injected)
      try {
        e.__vdevtools__injected = !0;
        const t = () => {
          try {
            e.contentWindow.__VUE_DEVTOOLS_IFRAME__ = e;
            const t = e.contentDocument.createElement("script");
            (t.textContent = ";(" + r.toString() + ")(window, true)"),
              e.contentDocument.documentElement.appendChild(t),
              t.parentNode.removeChild(t);
          } catch (t) {}
        };
        t(), e.addEventListener("load", () => t());
      } catch (t) {}
  }
  let a = 0;
  // ...
})(window);

Here is the offending Hotjar code I'm seeing where a style element is created without a nonce value. Follow along to see that Ar is passing the nonce to Ln, which is setting the attribute correctly, but the nonce is never passed to Ar when defining Hr.

        Ln = (function () {
          function e(e) {
            var t = this;
            (this._insertTag = function (e) {
              var n;
              (n =
                0 === t.tags.length
                  ? t.prepend
                    ? t.container.firstChild
                    : t.before
                  : t.tags[t.tags.length - 1].nextSibling),
                t.container.insertBefore(e, n),
                t.tags.push(e);
            }),
              (this.isSpeedy = void 0 === e.speedy || e.speedy),
              (this.tags = []),
              (this.ctr = 0),
              (this.nonce = e.nonce),
              (this.key = e.key),
              (this.container = e.container),
              (this.prepend = e.prepend),
              (this.before = null);
          }
          var t = e.prototype;
          return (
            (t.hydrate = function (e) {
              e.forEach(this._insertTag);
            }),
            (t.insert = function (e) {
              this.ctr % (this.isSpeedy ? 65e3 : 1) == 0 &&
                this._insertTag(
                  (function (e) {
                    var t = document.createElement("style");
                    return (
                      t.setAttribute("data-emotion", e.key),
                      void 0 !== e.nonce && t.setAttribute("nonce", e.nonce),
                      t.appendChild(document.createTextNode("")),
                      t.setAttribute("data-s", ""),
                      t
                    );
                  })(this),
                );
              var t = this.tags[this.tags.length - 1];
              if (this.isSpeedy) {
                var n = (function (e) {
                  if (e.sheet) return e.sheet;
                  for (var t = 0; t < document.styleSheets.length; t++)
                    if (document.styleSheets[t].ownerNode === e)
                      return document.styleSheets[t];
                })(t);
                try {
                  n.insertRule(e, n.cssRules.length);
                } catch (e) {}
              } else t.appendChild(document.createTextNode(e));
              this.ctr++;
            }),
            (t.flush = function () {
              this.tags.forEach(function (e) {
                return e.parentNode && e.parentNode.removeChild(e);
              }),
                (this.tags = []),
                (this.ctr = 0);
            }),
            e
          );
        })(),
// ...
        Ar = function (e) {
// ...
          var h = {
            key: t,
            sheet: new Ln({
              key: t,
              container: r,
              nonce: e.nonce,
              speedy: e.speedy,
              prepend: e.prepend,
            }),
            nonce: e.nonce,
            inserted: a,
            registered: {},
            insert: o,
          };
          return h.sheet.hydrate(s), h;
        }
// ...
      var Hr = P(
        "undefined" != typeof HTMLElement
          ? Ar({
              key: "css",
            })
          : null,
      );

Hi Folks,

Not sure if here is the correct place for this.

I've been trying to implement partytown to load the hotjar script inside a worker thread instead of on the main thread but I couldn't make it work. The installation verification on Hotjar says that everything is correctly but I can't see any metric being logged.

Is it possible to make it work Hotjar with Partytown?

Here are the configs that I tried without success:

partytown = {
                lib: "/_next/static/~partytown/",
                forward: ['hj', 'hjBootstrap', 'hjLazyModules', 'hjSiteSettings', '_hjSettings'],
                resolveUrl: function (url) {
                  if (url.hostname === 'vars.hotjar.com') {
                    return new URL('my-reverse-proxy' + url.pathname + url.search);
                  }
                  return url;
                },
};

partytown = {
                lib: "/_next/static/~partytown/",
                forward: ['hj'],
                resolveUrl: function (url) {
                  if (url.hostname === 'vars.hotjar.com') {
                    return new URL('my-reverse-proxy' + url.pathname + url.search);
                  }
                  return url;
                },
};

Thanks in advance!

Hi! I was wondering if there is a possibility to apply attribute script.integrity in https://github.com/hotjar/hotjar-js/blob/main/src/utils.ts#L38

Link to OWASP https://cheatsheetseries.owasp.org/cheatsheets/Third_Party_Javascript_Management_Cheat_Sheet.html#subresource-integrity

Any feedback will be valuable for me ;)

We would prefer to use this package instead of the generated script tag via the site. Unfortunately, there is no formal support for adding events in this package that matches the Events API doc on the hotjar site.

Workaround is to import executeHotjarCommand from utils (awkward) and override the provided type to use the 'event' command (also awkward).

Are there any plans to improve support in this SDK? It would be a much nicer experience in web apps than the current auto-generated old-school script tag...

Thanks!

When we try to call initialize using Hotjar.init(projectId, version) this library will create an inline script, which will trigger strict content security policies.

In order to avoid that, init should receive a third parameter to attach a nonce to the generated script.

Would you accept a PR with this feature?

I just used Hotjar for the first time. I loved its perspective and reports.

But the next day I had to remove it from my site because of only this particular issue.

Problem

When the user navigates back or forward, the website stops remembering the previous page state & scroll state. This becomes a very bad browsing experience. Especially while browsing products on e-commerce going back & forth.

Note: I noticed this, particularly on the Mobile version.