[🐞] resolveUrl function in partytown config does not work

tyler-johnson-mm commented 8 months ago

Describe the bug

I am setting up Partytown to handle multiple 3rd party scripts, however to start with, I am only testing it with Google Tag Manager. In order to bypass any CORS issues, I am using a reverse proxy in Cloudflare using a web worker. I am trying to use the resolveUrl function in the Partytown configuration according to the documentation, however the resolveUrl function does not seem to run. Nothing indicates that it does run and nothing in the network tab in dev tools shows a would-be resolved url.

Steps I have take so far:

I have confirmed that Partytown does work for scripts in the HTML using a simple test script (see below)
I have confirmed that the reverse proxy is working by typing the would-be resolved url in Chrome and in Postman
I have attempted to put logs inside of the resolveUrl function to see if it is being called (but nothing happened)

Here is the configuration I am using (actual domain replaced with 'example')

partytown = {
      resolveUrl: function(url, location, type) {
          if (type === 'script') {
              let proxyUrl = new URL("https://example.com/proxy")
              proxyUrl.searchParams.append('url', url.href)
              return proxyUrl;
          }
          return url;
      },
      debug: 'true',
      lib: "/js/~partytown",
      forward: [
          'dataLayer.push' // Google Tag Manager
      ],
  }

Here is the Google Tag Manager Script (actual id replaced with 'G-ID')

<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>

Here is the test script used to make sure Partytown is running

<script type="text/partytown">
    for (let i = 0; i < 10000; i++) {
        console.log('Testing')
    }
</script>

Reproduction

Working locally

Steps to reproduce

Create a website
Add Google Tag Manager Script
Add Partytown
View website

Browser Info

Chrome Version 121.0.6167.139, Safari Version 15.6.1 (17613.3.9.1.16)

Additional Information

Project uses Laravel 10 with Laravel Mix.

j0Shi82 commented 8 months ago

I'm using resolveUrl in many projects and it seems to work fine. See: https://www.partydawn.top/?sgtm&pt

It uses the following settings code:

const params = new URLSearchParams(location.search);
const pt = params.has("pt");
const xhrfetch = params.has("xhrfetch");
const xhrallow = params.has("xhrallow");
partytown = {
    forward: pt ? ["dataLayer.push"] : [],
    allowXhrCredentials: xhrallow,
    debug: true,
    logCalls: true,
    logGetters: true,
    logSetters: true,
    logImageRequests: true,
    logScriptExecution: true,
    logSendBeaconRequests: true,
    logStackTraces: false,
};

if (xhrfetch) {
    partytown.resolveUrl = function (url, location, type) {
        if (type === "script" && url.host !== "proxy.partydawn.top") {
            const proxyUrl = new URL("https://proxy.partydawn.top/api/partytown/proxy");
            proxyUrl.searchParams.set("url", url.href);
            proxyUrl.searchParams.set("xhrfetch", true);
            return proxyUrl;
        }

        return url;
    };
} else {
    partytown.resolveUrl = function (url, location, type) {
        if (type === "script" && url.host !== "proxy.partydawn.top") {
            const proxyUrl = new URL("https://proxy.partydawn.top/api/partytown/proxy");
            proxyUrl.searchParams.set("url", url.href);
            return proxyUrl;
        }

        return url;
    };
}

totodot commented 5 months ago

Same here resolveUrl not fired i nextjs app

 <Partytown
    debug={true}
    resolveUrl={(url, location, type) => {
      console.log(url);
      return url;
    }}
    forward={['dataLayer.push']}
  />
  <script
    key="plugin-google-tagmanager"
    type="text/partytown"
    dangerouslySetInnerHTML={{
      __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','${GOOGLE_TAG_MANAGER}');`,
    }}
  />

Other props like logScriptExecution don't work too. So only debug and forward props works fine for Partytown component.

BuilderIO / partytown