Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[馃悶] Loading the HubSpot scriptloader is busted if the portal uses the conversations / chat widget features #526

Open
ntbrown opened this issue Jan 2, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@ntbrown
Copy link

ntbrown commented Jan 2, 2024

Describe the bug

TL:DR; -- Throws on hubspot.require and attempting to define newrelic.

Per title when a HubSpot portal uses the chat widget provided the script loader will includes scripts of the form:


// Script that errors per hs-scriptloader sequence....

! function(t, e, r) {
    if (!document.getElementById(t)) {
        var n = document.createElement("script");
        for (var a in n.src = "https://js.usemessages.com/conversations-embed.js", n.type = "text/javascript", n.id = t, r) r.hasOwnProperty(a) && n.setAttribute(a, r[a]);
        var i = document.getElementsByTagName("script")[0];
        i.parentNode.insertBefore(n, i)
    }
}("hubspot-messages-loader", 0, {
    "data-loader": "hs-scriptloader",
    "data-hsjs-portal": PORTALID,
    "data-hsjs-env": "prod",
    "data-hsjs-hublet": "na1"
});

Upon attempting to load and process said scripts you will get a few errors centered around the bundle.production.js file the chat widget scripts attempt to load.

Specifically:

Worker (3) 馃帀 Execute script src: https://static.hsappstatic.net/head-dlb/static-1.368/bundle.production.js
partytown-ww-sw.js?v=0.8.1:1 SyntaxError: Invalid left-hand side in assignment (at bundle.production.js:178:105)
    at new Function (<anonymous>)

Which references this line

function I(e,t){return f(t)?function(r){return t(r,e)}:t}function N(){(thi$(this)?window:this)._hasJSON=!("object"!=typeof JSON||!JSON.stringify)

and


VM18:124 Failed to setup New relic JS! TypeError: hubspot.require is not a function
    at Proxy.eval (eval at Re (partytown-ww-sw.js?v=0.8.1:1:12806), <anonymous>:4:17)

which errors on:

hubspot.require(['enviro', 'PortalIdParser']

and

hns('hubspot.bender', {
         staticDomain: '//static.hsappstatic.net' || window.location.host,
         staticDomainPrefix: '//static.hsappstatic.net' || ('//' + window.location.host),

         currentProject: 'conversations-visitor-ui',
         currentProjectVersion: 'static-1.17482',

         depVersions: {
 "conversations-visitor-ui": "static-1.17482",
 "ably": "static-1.18",
 "ably-hubspot-js": "static-1.435",
 "atom": "static-1.748",
 "autolinker": "static-3.11",
 "browserslist-config-hubspot": "static-1.81",
 "conversations-async-data": "static-2.2812",
 "conversations-error-reporting": "static-1.4118",
 "conversations-http": "static-1.373",
 "conversations-infrastructure": "static-1.4179",
 "conversations-internal-pub-sub": "static-1.10184",
 "conversations-internal-schema": "static-1.8233",
 "conversations-message-history": "static-1.5904",
 "conversations-prop-types": "static-1.2830",
 "conversations-skeleton-state": "static-1.2975",
 "conversations-test-sdk": "static-1.6080",
 "conversations-visibility-tools": "static-1.1390",
 "conversations-visitor-experience-components": "static-1.10840",
 "conversations-visitor-message-history": "static-1.9573",
 "csstype": "static-1.8",
 "cssUtils": "static-1.278",
 "emoji-regex": "static-1.7",
 "flux-actions": "static-1.187",
 "hds-components": "static-1.511",
 "hds-tokens": "static-1.156",
 "head-dlb": "static-1.368",
 "HeadJS": "static-2.366",
 "help-widget-components": "static-1.6534",
 "history": "static-3.10",
 "hs-lodash": "static-4.9",
 "hs-promise-utils": "static-1.209",
 "hs-story-utils": "static-1.2012",
 "hs-test-utils": "static-1.1953",
 "hub-http-janus": "static-1.406",
 "hub-http-rxjs": "static-1.378",
 "hubspot-dlb": "static-1.504",
 "hubspotter-http": "static-1.397",
 "HubStyle": "static-2.5825",
 "HubStyleTokens": "static-2.5515",
 "I18n": "static-7.1025",
 "i18n-data": "static-1.143",
 "icons": "static-2.558",
 "jasmine": "static-4.90",
 "jasmine-immutable": "static-1.202",
 "jasmine-runner": "static-1.506",
 "moment-timezone": "static-5.17",
 "msw": "static-1.39",
 "PatternValidationJS": "static-1.393",
 "permission-components": "static-1.600",
 "quartz": "static-1.777",
 "react-aria": "static-1.6",
 "react-immutable-proptypes": "static-2.8",
 "react-input-autosize": "static-2.17",
 "react-rhumb": "static-1.9910",
 "react-router-redux": "static-2.11",
 "react-select-plus": "static-1.41",
 "react-transition-group": "static-2.8",
 "react-utils": "static-2.954",
 "react-virtualized": "static-2.26",
 "redux-mock-store": "static-1.8",
 "redux-thunk": "static-2.11",
 "reselect": "static-2.16",
 "rxjs": "static-5.10",
 "salesImages": "static-1.452",
 "sanitize": "static-1.6",
 "sanitize-text": "static-1.3479",
 "sassPrefix": "static-1.83",
 "signup-constants": "static-1.6541",
 "signup-ui-lego-core": "static-1.8557",
 "signup-ui-url-generator": "static-2.3176",
 "StyleGuideUI": "static-3.364",
 "testing-library": "static-1.76",
 "transmute": "static-2.29",
 "ui-addon-avatars": "static-2.4765",
 "ui-fonts": "static-1.312",
 "ui-images": "static-2.609",
 "UIComponents": "static-3.2466",
 "urlinator": "static-1.259",
 "usage-tracker": "static-1.1699",
 "usage-tracker-core": "static-1.1549",
 "usage-tracker-public": "static-1.1510",
 "viral-links-lib": "static-1.999",
 "visitor-ui-component-library": "static-1.1527",
 "visitor-ui-component-library-icons": "static-1.1336",
 "webpack-env": "static-1.4",
 "classnames": "static-2.10",
 "enviro": "static-4.127",
 "hub-http": "static-1.1109",
 "immutable": "static-2.19",
 "metrics-js": "static-1.3316",
 "PortalIdParser": "static-2.120",
 "raven": "static-3.26",
 "react": "static-7.96",
 "react-dom": "static-7.62",
 "react-redux": "static-7.16",
 "redux": "static-4.16",
 "styled-components": "static-2.27",
 "hs-promise-rejection-tracking": "static-1.142",
 "raven-hubspot": "static-1.240",
 "hoist-non-react-statics": "static-3.9",
 "hubspot-url-utils": "static-1.169",
 "moment": "static-3.11"
},
         depPathPrefixes: {
 "conversations-visitor-ui": "/conversations-visitor-ui/static-1.17482",
 "ably": "/ably/static-1.18",
 "ably-hubspot-js": "/ably-hubspot-js/static-1.435",
 "atom": "/atom/static-1.748",
 "autolinker": "/autolinker/static-3.11",
 "browserslist-config-hubspot": "/browserslist-config-hubspot/static-1.81",
 "conversations-async-data": "/conversations-async-data/static-2.2812",
 "conversations-error-reporting": "/conversations-error-reporting/static-1.4118",
 "conversations-http": "/conversations-http/static-1.373",
 "conversations-infrastructure": "/conversations-infrastructure/static-1.4179",
 "conversations-internal-pub-sub": "/conversations-internal-pub-sub/static-1.10184",
 "conversations-internal-schema": "/conversations-internal-schema/static-1.8233",
 "conversations-message-history": "/conversations-message-history/static-1.5904",
 "conversations-prop-types": "/conversations-prop-types/static-1.2830",
 "conversations-skeleton-state": "/conversations-skeleton-state/static-1.2975",
 "conversations-test-sdk": "/conversations-test-sdk/static-1.6080",
 "conversations-visibility-tools": "/conversations-visibility-tools/static-1.1390",
 "conversations-visitor-experience-components": "/conversations-visitor-experience-components/static-1.10840",
 "conversations-visitor-message-history": "/conversations-visitor-message-history/static-1.9573",
 "csstype": "/csstype/static-1.8",
 "cssUtils": "/cssUtils/static-1.278",
 "emoji-regex": "/emoji-regex/static-1.7",
 "flux-actions": "/flux-actions/static-1.187",
 "hds-components": "/hds-components/static-1.511",
 "hds-tokens": "/hds-tokens/static-1.156",
 "head-dlb": "/head-dlb/static-1.368",
 "HeadJS": "/HeadJS/static-2.366",
 "help-widget-components": "/help-widget-components/static-1.6534",
 "history": "/history/static-3.10",
 "hs-lodash": "/hs-lodash/static-4.9",
 "hs-promise-utils": "/hs-promise-utils/static-1.209",
 "hs-story-utils": "/hs-story-utils/static-1.2012",
 "hs-test-utils": "/hs-test-utils/static-1.1953",
 "hub-http-janus": "/hub-http-janus/static-1.406",
 "hub-http-rxjs": "/hub-http-rxjs/static-1.378",
 "hubspot-dlb": "/hubspot-dlb/static-1.504",
 "hubspotter-http": "/hubspotter-http/static-1.397",
 "HubStyle": "/HubStyle/static-2.5825",
 "HubStyleTokens": "/HubStyleTokens/static-2.5515",
 "I18n": "/I18n/static-7.1025",
 "i18n-data": "/i18n-data/static-1.143",
 "icons": "/icons/static-2.558",
 "jasmine": "/jasmine/static-4.90",
 "jasmine-immutable": "/jasmine-immutable/static-1.202",
 "jasmine-runner": "/jasmine-runner/static-1.506",
 "moment-timezone": "/moment-timezone/static-5.17",
 "msw": "/msw/static-1.39",
 "PatternValidationJS": "/PatternValidationJS/static-1.393",
 "permission-components": "/permission-components/static-1.600",
 "quartz": "/quartz/static-1.777",
 "react-aria": "/react-aria/static-1.6",
 "react-immutable-proptypes": "/react-immutable-proptypes/static-2.8",
 "react-input-autosize": "/react-input-autosize/static-2.17",
 "react-rhumb": "/react-rhumb/static-1.9910",
 "react-router-redux": "/react-router-redux/static-2.11",
 "react-select-plus": "/react-select-plus/static-1.41",
 "react-transition-group": "/react-transition-group/static-2.8",
 "react-utils": "/react-utils/static-2.954",
 "react-virtualized": "/react-virtualized/static-2.26",
 "redux-mock-store": "/redux-mock-store/static-1.8",
 "redux-thunk": "/redux-thunk/static-2.11",
 "reselect": "/reselect/static-2.16",
 "rxjs": "/rxjs/static-5.10",
 "salesImages": "/salesImages/static-1.452",
 "sanitize": "/sanitize/static-1.6",
 "sanitize-text": "/sanitize-text/static-1.3479",
 "sassPrefix": "/sassPrefix/static-1.83",
 "signup-constants": "/signup-constants/static-1.6541",
 "signup-ui-lego-core": "/signup-ui-lego-core/static-1.8557",
 "signup-ui-url-generator": "/signup-ui-url-generator/static-2.3176",
 "StyleGuideUI": "/StyleGuideUI/static-3.364",
 "testing-library": "/testing-library/static-1.76",
 "transmute": "/transmute/static-2.29",
 "ui-addon-avatars": "/ui-addon-avatars/static-2.4765",
 "ui-fonts": "/ui-fonts/static-1.312",
 "ui-images": "/ui-images/static-2.609",
 "UIComponents": "/UIComponents/static-3.2466",
 "urlinator": "/urlinator/static-1.259",
 "usage-tracker": "/usage-tracker/static-1.1699",
 "usage-tracker-core": "/usage-tracker-core/static-1.1549",
 "usage-tracker-public": "/usage-tracker-public/static-1.1510",
 "viral-links-lib": "/viral-links-lib/static-1.999",
 "visitor-ui-component-library": "/visitor-ui-component-library/static-1.1527",
 "visitor-ui-component-library-icons": "/visitor-ui-component-library-icons/static-1.1336",
 "webpack-env": "/webpack-env/static-1.4",
 "classnames": "/classnames/static-2.10",
 "enviro": "/enviro/static-4.127",
 "hub-http": "/hub-http/static-1.1109",
 "immutable": "/immutable/static-2.19",
 "metrics-js": "/metrics-js/static-1.3316",
 "PortalIdParser": "/PortalIdParser/static-2.120",
 "raven": "/raven/static-3.26",
 "react": "/react/static-7.96",
 "react-dom": "/react-dom/static-7.62",
 "react-redux": "/react-redux/static-7.16",
 "redux": "/redux/static-4.16",
 "styled-components": "/styled-components/static-2.27",
 "hs-promise-rejection-tracking": "/hs-promise-rejection-tracking/static-1.142",
 "raven-hubspot": "/raven-hubspot/static-1.240",
 "hoist-non-react-statics": "/hoist-non-react-statics/static-3.9",
 "hubspot-url-utils": "/hubspot-url-utils/static-1.169",
 "moment": "/moment/static-3.11"
}
       }); TypeError: hns is not a function
   at Proxy.eval (eval at Re (partytown-ww-sw.js?v=0.8.1:1:12806), <anonymous>:4:9)
   at Re (partytown-ww-sw.js?v=0.8.1:1:12822)
   at Ce (partytown-ww-sw.js?v=0.8.1:1:12258)
   at partytown-ww-sw.js?v=0.8.1:1:27697
   at ct (partytown-ww-sw.js?v=0.8.1:1:27763)
Ce @ partytown-ww-sw.js?v=0.8.1:1
partytown-ww-sw.js?v=0.8.1:1 Worker (3) 馃帀 Execute script: function getQueryParam(name) { var results = new RegExp('[\?...
partytown-ww-sw.js?v=0.8.1:1 function getQueryParam(name) {
         var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.search);
         return (results !== null) ? results[1] || 0 : false;}
         newrelic.setCustomAttribute('isEmbeddedInProduct', getQueryParam('inApp53')); TypeError: Cannot read properties of undefined (reading 'setCustomAttribute')
   at Proxy.eval (eval at Re (partytown-ww-sw.js?v=0.8.1:1:12806), <anonymous>:6:20)
   at Re (partytown-ww-sw.js?v=0.8.1:1:12822)
   at Ce (partytown-ww-sw.js?v=0.8.1:1:12258)
   at partytown-ww-sw.js?v=0.8.1:1:27697
   at ct (partytown-ww-sw.js?v=0.8.1:1:27763)
Ce @ partytown-ww-sw.js?v=0.8.1:1
partytown-ww-sw.js?v=0.8.1:1 Worker (3) 馃帀 Execute script: var ignoredErrors = [ /jquery/i, // Ignore usage logging err...
partytown-ww-sw.js?v=0.8.1:1 var ignoredErrors = [
             /jquery/i,
             // Ignore usage logging errors
             /usage-logging\/v1\/log\/hublytics-multi/i,
             // Ignore auth redirects
             /Aborting: redirection in progress/i,
             // Ignore Chrome extension errors https://github.com/getsentry/sentry/issues/9331
             /_avast_submit/i,
             // Ignore network unavailable messages
             /Network Unavailable/i,
             // Ignore error from HTMLDocument.document.createEvent invoked by Facebook web crawlers
             // See https://git.hubteam.com/HubSpot/conversations-team/issues/4140
             "Illegal invocation",
             // Ignore errors where user fails to download language files.
             // See https://git.hubteam.com/HubSpot/conversations-team/issues/4191
             /Loading chunk (i18n|moment|conversations-visitor-ui)-(data|static).*\s/i,
             // ingore errors that we are confident come from a bad chrome extension
             /ceCurrentVideo\.currentTime/,
             /originalPrompt/,
             /Async call failed twice\. Reason: PubSub channel attachment timeout/,
             /Failed to execute 'deleteRule' on 'CSSStyleSheet'/i,
             /Object Not Found Matching Id/i,
             /Script error/i,
             /Cannot declare a let variable twice/i,
             /window\.__withBuiltIn/i,
             /window\.__timeSinceLastTimeout/i,

             // Ignore Suspected Chrome Extention Errors
             new RegExp("iframe\[id='198230182308109283091823098102938908128390'\]"),

             // Ignore Chunk Errors
             /Loading chunk ([A-Z0-9a-z-~_]+) failed./i,

             // Known Issue in Firefox <= 50
             /missing = in const declaration/
           ];

           hubspot.require(['raven-hubspot/configure'], function (configureRaven) {
             if (typeof configureRaven === 'function') {
               configureRaven('https://7ab6425e7a7c4b01b71fdb51e76514bf@exceptions.hubspot.com/242261', {
                 ignoreErrors: ignoredErrors,
               });
             } else if (window.hubspot && typeof window.hubspot.newRelicErrorsToIgnore === 'function') {
               window.hubspot.newRelicErrorsToIgnore(ignoredErrors);
             }
           }); TypeError: hubspot.require is not a function
   at Proxy.eval (eval at Re (partytown-ww-sw.js?v=0.8.1:1:12806), <anonymous>:40:21)

@ntbrown ntbrown added the bug Something isn't working label Jan 2, 2024
@ntbrown ntbrown changed the title [馃悶] Loading the HubSpot scriptloader with PartyTown is busted if the portal use the conversations / chat widget [馃悶] Loading the HubSpot scriptloader is busted if the portal use the conversations / chat widget Jan 2, 2024
@ntbrown ntbrown changed the title [馃悶] Loading the HubSpot scriptloader is busted if the portal use the conversations / chat widget [馃悶] Loading the HubSpot scriptloader is busted if the portal uses the conversations / chat widget features Jan 2, 2024
@cathawk
Copy link

cathawk commented Mar 20, 2024

@ntbrown I am currently in the process of looking into errors on our website:

Failed to execute 'querySelectorAll' on 'Document': 'div:has(> iframe[id='198230182308109283091823098102938908128390'])' is not a valid selector

and have come across this. Can you let me know how you suspect those are coming from Chrome Extension errors? Any idea what the idea is referring to?

@ntbrown
Copy link
Author

ntbrown commented Mar 20, 2024

@ntbrown I am currently in the process of looking into errors on our website:

Failed to execute 'querySelectorAll' on 'Document': 'div:has(> iframe[id='198230182308109283091823098102938908128390'])' is not a valid selector

and have come across this. Can you let me know how you suspect those are coming from Chrome Extension errors? Any idea what the idea is referring to?

I don't see how this is related to the main issue.

How you suspect those are coming from chrome extension errors

I've made no indication of this in the original post. My original post is for loading the sequence of scripts via the HubSpot script loader failing on the conversations embed when attempting to load things through the partytown library

If you are attempting to build some form of chrome extension related to the conversations embed that is beyond the scope of this issue

Any idea what the idea is referring to

This is a better fit for stack overflow

@nativeB
Copy link

nativeB commented Apr 16, 2024

@ntbrown facing this exact issue now, any lead on what's going on here? hope you can point me in the right direction

@ntbrown
Copy link
Author

ntbrown commented Apr 17, 2024

@ntbrown facing this exact issue now, any lead on what's going on here? hope you can point me in the right direction

@nativeB

Sorry I don't.

This issue was opened to log the issue. That's it. I haven't looked at this even once since.

It's on partytown to provide broader support or HubSpot in my eyes w/ respect to resolution whether it be they need to fix their scripts for support and / or provide guidance on integration if configuration suffices

I would point out that partytown is still in beta and it is not meant to be a seamless integration for every random thing. Hence issues.

Although I would point out that the entire intent of the package is aimed exactly at the problems platforms like HubSpot /marketing in general cause which is a bit ironic in hindsight

Regardless:

For the latter.... Lol.... Don't hold your breath. Plenty of devs are still waiting on HubSpot to fix 5+ year old issues amongst other things.

And, I personally, have no interest in fiddling with it for a company I have no respect for given the egregiously poor impact on accessibility and the Internet as a whole they've contributed to - not to mentioned what I consider to be egregiously unethical marketing to small businesses leaving them holding the bag with malformed technical assets due to issues much like this one - in my humble opinion.

FYI for anyone reading this in the future. Partytown is the last of your problems.

Their auto-injected analytics (GA, ...) also need patching for logging back/forward cache distinctions, more appropriate loading - which partytown can address if you do some questionable templating hacks, amongst other things,

Frankly, I think products like this are doomed to fail from the outset so I don't think this is really worth visiting. No matter how much you tidy things up marketing will just bungle it again.

And, even if you did, I would very much like to point out this is just perceived performance which I think a lot of us have forgotten is not the same as real performance (ie - not loading X megabytes of JS crap in the first place)

Just because you are shifting debt doesn't mean that it does not exist.

Solutions like Zaraz etc are the way forward imo but aren't exactly what one considers seamless and getting compliance for them / abidance is not exactly what I would call painless.

So you really have to question what the utility in going to this much effort to make lighthouse look prettier really is

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants