hotjar / hotjar-js Goto Github PK
View Code? Open in Web Editor NEWBring Hotjar directly to your application
Home Page: https://hotjar.github.io/hotjar-js/
License: MIT License
Bring Hotjar directly to your application
Home Page: https://hotjar.github.io/hotjar-js/
License: MIT License
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.
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?
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! 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 ;)
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. ๐ค
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!
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
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.
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>
Don't panic, this is a test!
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.
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.