Facebook Meta Pixel - Fetch failed loading

[joepagan]

• [x] I am interested in helping provide a fix!

Describe the bug

Where LogXMLHttpRequests checkbox is enabled in chrome dev tools Facebook/Meta Pixel returns Fetch failed loading results in console for URLs like:

https://www.facebook.com/tr/?id=123&ev=PageView&dl=https%3A%2F%2Fpartytown-example-facebook2.joepagan.repl.co%2F&rl=&if=false&ts=123&sw=1728&sh=1117&v=2.9.97&r=stable&ec=0&o=30&fbp=fb.123.321&it=123&coo=false&rqm=GET

As mentioned below, If I add a breakpoint in the partytown script and hit play, the error doesn't occur.

This looks like a really basic setup and I'm not doing anything special it seems, so maybe I'm just being a fool here?

Let me know if you need more information

To Reproduce

Steps to reproduce the FAILED behavior:

1. Go to demo / replit app
2. look in the JS console
3. See a failed resource loading in all it's glory partytown-ww-sw.js?v=0.7.5:744 Fetch failed loading: GET {PH3}.

partytown-ww-sw.js?v=0.7.5:1741 Fetch finished loading: GET {PH3}.
(anonymous) @ partytown-ww-sw.js?v=0.7.5:1741
receiveMessageFromSandboxToWorker @ partytown-ww-sw.js?v=0.7.5:1768
partytown-ww-sw.js?v=0.7.5:744 Fetch failed loading: GET {PH3}.
set src @ partytown-ww-sw.js?v=0.7.5:744
c @ fbevents.js:26
y @ fbevents.js:26
ta @ fbevents.js:29
pa @ fbevents.js:29
oa @ fbevents.js:29
Y @ fbevents.js:29
ua @ fbevents.js:29
eval @ fbevents.js:29
eval @ fbevents.js:26
v @ fbevents.js:26
each @ fbevents.js:26
value @ fbevents.js:26
value @ fbevents.js:26
value @ fbevents.js:26
plugin @ 1255132741754006?v=2.9.97&r=stable:43
value @ fbevents.js:26
a.registerPlugin @ fbevents.js:29
eval @ 1255132741754006?v=2.9.97&r=stable:29
run @ partytown-ww-sw.js?v=0.7.5:702
(anonymous) @ partytown-ww-sw.js?v=0.7.5:1751
await in (anonymous) (async)
receiveMessageFromSandboxToWorker @ partytown-ww-sw.js?v=0.7.5:1768
partytown-ww-sw.js?v=0.7.5:744 Fetch failed loading: GET {PH3}.

Steps to reproduce a successful load

1. Go to same demo replit app
2. Add a breakpoint in dev tools to [/~partytown/debug/partytown-ww-sw.js?v=0.7.5] line 749 (It has to be in the then of the fetch(resolveUrl(env, src, "image"), {
3. refresh the demo, play through the breakpoints
4. look in the JS console
5. See a success resource response: partytown-ww-sw.js?v=0.7.5:744 Fetch finished loading: GET {PH3}.

Reproduction link

1. Go to demo / replit app

Expected behavior

resource loading

Partytown version

0.7.5

Screenshots

provided

Additional context

I am using the cloudfront reverse proxy distribution solution.

I found with this meta/facebook pixel specifically, it appears to require a preflight OPTIONS request method, I have set some more lenient cloudfront settings rather than just GET and HEAD requests as shown in the example guide from Andrew at nystudio107 to account for this like so: