BuilderIO / partytown

Relocate resource intensive third-party scripts off of the main thread and into a web worker. ๐ŸŽ‰
https://partytown.builder.io
MIT License
12.88k stars 427 forks source link

[๐Ÿž] Loading the HubSpot scriptloader is busted if the portal uses the conversations / chat widget features #526

Open ntbrown opened 6 months ago

ntbrown commented 6 months ago

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)
cathawk commented 4 months ago

@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 commented 4 months ago

@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 commented 3 months ago

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

ntbrown commented 3 months ago

@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