partytown: 404 error for the resource "/partytown/partytown-sandbox-sw.html?1646853715625"

I recently tried integrating Partytown for my website Mustakbil.com but encountered this error https://github.com/BuilderIO/partytown/issues/38#issuecomment-1060066828

Which thankfully, has been fixed in the latest version of Partytown (v 0.4.5), but now I am receiving 404 error for the resource “/partytown/partytown-sandbox-sw.html?1646853715625”

Below are the steps I followed to add partytown to my website:

I copied contents of @builder.io\partytown\lib\partytown.js and added it to the script tag in my index.html file.

  <script>
    !function (t, e, n, i, r, o, a, d, s, c, p, l) { function u() { l || (l = 1, "/" == (a = (o.lib || "/~partytown/") + (o.debug ? "debug/" : ""))[0] && (s = e.querySelectorAll('script[type="text/partytown"]'), i != t ? i.dispatchEvent(new CustomEvent("pt1", { detail: t })) : (d = setTimeout(w, 1e4), e.addEventListener("pt0", f), r ? h(1) : n.serviceWorker ? n.serviceWorker.register(a + (o.swPath || "partytown-sw.js"), { scope: a }).then((function (t) { t.active ? h() : t.installing && t.installing.addEventListener("statechange", (function (t) { "activated" == t.target.state && h() })) }), console.error) : w()))) } function h(t) { c = e.createElement(t ? "script" : "iframe"), t || (c.setAttribute("style", "display:block;width:0;height:0;border:0;visibility:hidden"), c.setAttribute("aria-hidden", !0)), c.src = a + "partytown-" + (t ? "atomics.js?v=0.4.5" : "sandbox-sw.html?" + Date.now()), e.body.appendChild(c) } function w(t, n) { for (f(), t = 0; t < s.length; t++)(n = e.createElement("script")).innerHTML = s[t].innerHTML, e.head.appendChild(n); c && c.parentNode.removeChild(c) } function f() { clearTimeout(d) } o = t.partytown || {}, i == t && (o.forward || []).map((function (e) { p = t, e.split(".").map((function (e, n, i) { p = p[i[n]] = n + 1 < i.length ? "push" == i[n + 1] ? [] : p[i[n]] || {} : function () { (t._ptf = t._ptf || []).push(i, arguments) } })) })), "complete" == e.readyState ? u() : (t.addEventListener("DOMContentLoaded", u), t.addEventListener("load", u)) }(window, document, navigator, top, window.crossOriginIsolated);
  </script>

Added below config just above the Partytown script:

  <script>
    window.partytown = {
      forward: ["dataLayer.push", "fbq"],
      lib: "/partytown/",
      resolveUrl: function (url) {
        if (url.hostname === 'www.google-analytics.com') {
          var proxyUrl = new URL('https://myproxyurl.com/');
          proxyUrl.searchParams.append('url', url.href);
          return proxyUrl;
        }
        return url;
      }

    };
  </script>

Below is my Google Tag Manager code:

<script type="text/partytown">
    (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', 'GTM-NJFTK74');
  </script>

Tag Manager code adds:

Google Ads Conversion Tracking
Google Analytics: GA4 Configuration
Conversion Linker
Google Analytics: Universal Analytics
Facebook Pixel as Custom HTML

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 22 (2 by maintainers)

Most upvoted comments

I’m experiencing same issue,

it seems sandbox-sw.html is required when window.crossOriginIsolated = false, which instead of using Atomics fallbacks to use service-worker.

sandbox-sw.html doesn’t seem to be find in partytown repo although is referred in the snippet.ts file.

hope you find something 😸

garciadiazjaime on Mar 12, 2022

Same. Hard reload gets a 404, soft refresh works fine.

craigrileyuk on Dec 31, 2023

Note: when { debug: false } CMD+Shift+R on Firefox 109 MacOS causes same 404 error, but normal refresh loads service worker correctly.

simkuns on Feb 1, 2023

Thanks @adamdbradley

I am now receiving below error:

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at VM5477 partytown-sandbox-sw.html:2:5448
    at Array.map (<anonymous>)
    at D (VM5477 partytown-sandbox-sw.html:2:5398)
    at VM5477 partytown-sandbox-sw.html:2:6842
    at Worker.J.onmessage (VM5477 partytown-sandbox-sw.html:2:25834)

Below is my code:

  <script type="text/javascript">
    //partytown config
    window.partytown = {
      forward: ["dataLayer.push", "fbq"],
      lib: "/partytown/",
      resolveUrl: function (url) {
        if (url.hostname === 'www.google-analytics.com') {
          var proxyUrl = new URL('https://myproxyurl/');
          proxyUrl.searchParams.append('url', url.href);
          return proxyUrl;
        }
        return url;
      }

    };

    //inline partytown script
/* Partytown 0.4.5 - MIT builder.io */
!function(t,e,n,i,r,o,a,d,s,c,p,l){function u(){l||(l=1,"/"==(a=(o.lib||"/~partytown/")+(o.debug?"debug/":""))[0]&&(s=e.querySelectorAll('script[type="text/partytown"]'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(d=setTimeout(w,1e4),e.addEventListener("pt0",f),r?h(1):n.serviceWorker?n.serviceWorker.register(a+(o.swPath||"partytown-sw.js"),{scope:a}).then((function(t){t.active?h():t.installing&&t.installing.addEventListener("statechange",(function(t){"activated"==t.target.state&&h()}))}),console.error):w())))}function h(t){c=e.createElement(t?"script":"iframe"),t||(c.setAttribute("style","display:block;width:0;height:0;border:0;visibility:hidden"),c.setAttribute("aria-hidden",!0)),c.src=a+"partytown-"+(t?"atomics.js?v=0.4.5":"sandbox-sw.html?"+Date.now()),e.body.appendChild(c)}function w(t,n){for(f(),t=0;t<s.length;t++)(n=e.createElement("script")).innerHTML=s[t].innerHTML,e.head.appendChild(n);c&&c.parentNode.removeChild(c)}function f(){clearTimeout(d)}o=t.partytown||{},i==t&&(o.forward||[]).map((function(e){p=t,e.split(".").map((function(e,n,i){p=p[i[n]]=n+1<i.length?"push"==i[n+1]?[]:p[i[n]]||{}:function(){(t._ptf=t._ptf||[]).push(i,arguments)}}))})),"complete"==e.readyState?u():(t.addEventListener("DOMContentLoaded",u),t.addEventListener("load",u))}(window,document,navigator,top,window.crossOriginIsolated);
  </script>

  <script type="text/partytown" src="https://www.googletagmanager.com/gtm.js?id=GTM-NJFTK74"></script>
  <script type="text/partytown">
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'gtm.start':
        new Date().getTime(), event: 'gtm.js'
    });
  </script>

Can you please guide if I am still missing something?

naveedahmed1 on Mar 24, 2022

I have 404 error for the resource "/partytown/partytown-sandbox-sw.html" error too, @naveedahmed1 how do you solve this problem? I really cannot understand that html file not exist but still request to server. 😢

I was following HTML integration tutorial, however, I was getting the same error. After visiting https://partytown.builder.io/tests/benchmarks/ I was able to copy the .html file (https://partytown.builder.io/~partytown/debug/partytown-sandbox-sw.html?1675291925139=) from there and paste it into /~partytown/debug/ folder and partytown started working with { debug: true }.

partytown-sandbox-sw.html:

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="./partytown-sandbox-sw.js?v=0.7.5-dev1674668837610"></script></head></html>

simkuns on Feb 1, 2023

Side note: enabling Atomics breaks stripe payment, which seems to require ‘Cross-Origin-Embedder-Policy’, ‘unsafe-none’

dezman on Nov 3, 2022

@hiepxanh sure, I’d love to 😃

For now I just followed the HTML guide under Integrations section (https://partytown.builder.io/html) but I have yet to make it work 😄

naveedahmed1 on Mar 12, 2022

If you are receiving a 404 for that file then it means the service worker is not correctly intercepting the requests. Also, make sure all of the files are copied to your directory, not just partytown.js: https://partytown.builder.io/copy-library-files

adamdbradley on Mar 11, 2022