partytown icon indicating copy to clipboard operation
partytown copied to clipboard

global function defined in one partytown script is not accessible to other partytown scripts

Open MananTank opened this issue 2 years ago • 14 comments

Please check this sandbox : https://vpxcwd.csb.app/ ( https://codesandbox.io/s/partytown-global-functions-vpxcwd )

sandbox uses latest Partytown version 0.5.0

In this sandbox, there are two scripts foo.js and bar.js both are partytown scripts and so both runs in same worker thread.

foo.js defines a function foo.
bar.js tries to use function foo

Expectation: bar.js should be able to use function foo

Problem: bar.js is not able to use function foo and throws error

image

MananTank avatar Mar 16 '22 06:03 MananTank

There currently is a config called globalFn and it's documented only in the types for now: https://github.com/BuilderIO/partytown/blob/072ac28bc17aedb6b97d01ee2c99013daa1064e7/src/lib/types.ts#L390-L398

Still trying to think of the best way to tackle this problem without having to add another config, which would rarely be obvious.

adamdbradley avatar Mar 16 '22 09:03 adamdbradley

Thanks @adamdbradley for quick reply.

I tried to use the globalFns to fix this error, but it doesn't seem to work.

https://c1btft.csb.app/ https://codesandbox.io/s/partytown-global-functions-fix-c1btft?file=/index.html:301-321

Am I using it wrong?

partytown = {
    globalFns: ["foo"] 
}

image

MananTank avatar Mar 16 '22 12:03 MananTank

Hey @MananTank Did you find a solution to this issue?

tolgacesur avatar Mar 22 '22 11:03 tolgacesur

Hi @tolgacesur Nope, still stuck here. globalFns not working for me.

@adamdbradley Can you please provide an update here?

I'm looking into a different strategy that supports global objects and functions defined in other partytown scripts and even in main thread. I've been working on a little library that works similar to partytown, and I was able to make globals work there. It's pretty hacky at the moment, I'll clear up the code a bit and then Adam can check it out - may be partytown could implement something like that.

MananTank avatar Mar 23 '22 04:03 MananTank

Any update? No rush, just curious if this is being worked through or if its a backburner sort of issue. As much as we'd love to move forward with partytown we cannot until this gets patched up.

dbashford avatar Mar 31 '22 18:03 dbashford

We're having the same issue as in #106 with Bing The 3rd party script loaded from https://bat.bing.com/bat.js is causing the error: Uncaught TypeError: UET is not a constructor.

If I add globalFns to the config with the string UET then it seems to break PartyTown entirely.

    forward: [
      'UET',
      'UET_init',
      'UET_push',
      'uetq.push',
      'uetq',
    ],
    globalFns: [
      'UET',
    ],

garethweaver avatar Apr 21 '22 11:04 garethweaver

Errors that mention UET are caused by Bing. A new feature has been added to load certain scripts on the main thread using:

    loadScriptsOnMainThread: [
      'https://bat.bing.com/bat.js',
    ],

Update: resolved in #200 Docs here: https://github.com/BuilderIO/partytown/commit/aefb88b6646a9725bb9da7a778aedd4364b9da59

garethweaver avatar Jul 23 '22 13:07 garethweaver

@garethweaver Thanks for the update!

Just to let you know that the original issue I mentioned in this issue is fixable, I actually created my own library (Proxytown) that works similar to Partytown where I fixed this issue.

In that library one script running in worker can access other script's globally defined variables or even main thread's global variables without having any kind of configuration.

Here it is : https://github.com/MananTank/proxytown

I created this library 3 months ago and completely forgot to post it here 😅, I thought I would post it here once it's fully tested - But I never got the time to do that.

Anyway,

Here is an example sandbox using this library: https://7ebxo6.csb.app/ ( https://codesandbox.io/s/7ebxo6?file=/index.html )

@adamdbradley May be you can check out this library (proxytown) and see if this is something you guys can implement in partytown

There are some bugs when Symbols are used as keys. But for the most part, Everything seems to work with that architecture. Library is also pretty lean and I did not have to mock any WEB/DOM APIs.

Hopefully, I will get some free time in future to properly test this library and release beta version.

MananTank avatar Jul 23 '22 14:07 MananTank

@garethweaver Can you share you partytown config please? I've tried both globalFns and loadScriptsOnMainThread but it didn't help me. Is loadScriptsOnMainThread accepting regEXP or wildcards?

my config

partytown = {
    loadScriptsOnMainThread: ['http://bat.bing.com/bat.js'], // have tried https and url with proxy as well
    resolveUrl: function (url, location, type) {

        if (type === 'script' || type === 'iframe') {

            const proxyUrl = new URL('https://cdn.builder.codes/api/v1/js-proxy');
            proxyUrl.searchParams.append('url', url.href);
            proxyUrl.searchParams.append('apiKey', '00000000000secretkey0000000000');
            return proxyUrl;

        }
        return url;

    }
};

DzmVasileusky avatar Sep 22 '22 14:09 DzmVasileusky

@DzmVasileusky did you end up finding a resolution? I am in the same position, the configuration is having no effect.

ashleyjlive avatar Jan 04 '23 05:01 ashleyjlive

@ashleyjlive no, I have decided to not use partytown until it will be more stable and more actively supported. We have dozens of 3rd party scripts and one after another is spawning errors.

btw I have this unreviewed PR https://github.com/BuilderIO/partytown/pull/292 to workaround regexp usage in loadScriptsOnMainThread

DzmVasileusky avatar Jan 04 '23 08:01 DzmVasileusky

I have managed to use bing with Partytown! (didn't check the events yet, but I don't have errors) You need to:

  1. add to partytown config: globalFns: ['UET']
  2. add partytown script tag with: window.navigator.plugins = window.navigator.plugins || [];

This is the config (with partytown 0.8.1)

  <script>
    partytown = {
      globalFns: ['UET'],
      resolveUrl: function (url) {
        const proxyMap = {
          'bat.bing.com': 'your-proxy-domain.com'
        };
        url.hostname = proxyMap[url.hostname] || url.hostname;
        return url;
      }
    };
  </script>
  <script src="/~partytown/debug/partytown.js"></script>
  <script type="text/partytown">
    window.navigator.plugins = window.navigator.plugins || [];
  </script>
  <script type="text/partytown">(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"123456"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");</script><noscript><img src="//bat.bing.com/action/0?ti=123456&Ver=2" height="0" width="0" style="display:none; visibility: hidden;" /></noscript>

nitsan avatar Nov 01 '23 11:11 nitsan

@nitsan Did you find a solution for sending the bing event?

tcetin avatar Jan 15 '24 11:01 tcetin

Did not work for me.

fmoessle avatar Feb 25 '24 10:02 fmoessle