404 error for the resource "/~partytown/debug/partytown-sandbox-sw.html?1665944529123" when integrating with Nextjs #283

hieunguyen1704 · 2022-10-16T18:34:39Z

Describe the bug
Hi team, this is a great library, but when I try to integrate Partytown to my nextjs Project, I've got some bugs on Chrome, Safari still works fine.

Specifically, on Chrome,

with the first load of the page, everything works fine
but when I reload the page 2nd I get a 404 not found error sending a request to get file partytown-sandbox-sw.html(http:// localhost:3000/_next/static/~partytown/debug/partytown-sandbox-sw.html?1665944529123). In Partytown's documentation it mentioned that if this request fails, then the service worker is not installed correctly:

To Reproduce
Steps to reproduce the behavior:

Clone the project: https://github.com/hieunguyen1704/partytown-test-nextjs.git
Run npm install && npm run dev
Open incognito: first load work
Reload the page. See error

Reproduction link
My codesandbox here but it has cross-origin frame issue

Expected behavior
it should not error everytime I reload the page

Partytown version
What version of Partytown you are using, e.g. 0.7.1

Screenshots

Error:

Additional context

Here is my code, I'm using Partytown with Google tag manager:

components/HeadLayout.js:

import Head from "next/head";

import { Partytown } from "@builder.io/partytown/react";

const HeadLayout = () => {
  return (
    <Head>
      <title>Create Next App</title>
      <meta name="description" content="Generated by create next app" />
      <link rel="icon" href="/favicon.ico" />
      <Partytown debug={true} forward={["dataLayer.push"]} />
      {/* <!-- Google Tag Manager --> */}
      <script
        type="text/partytown"
        dangerouslySetInnerHTML={{
          __html: `!function(){function t(){var t,e,n,a;t=window,e=document,n="script",t[a="dataLayer"]=t[a]||[],t[a].push({"gtm.start":(new Date).getTime(),event:"gtm.js"}),a=e.getElementsByTagName(n)[0],(n=e.createElement(n)).async=!0,n.src="https://www.googletagmanager.com/gtm.js?id=GTM-5D3JJZT",a.parentNode.insertBefore(n,a)}function e(){setTimeout(t,0)}window.addEventListener?window.addEventListener("load",e,!1):window.attachEvent&&window.attachEvent("onload",e)}();`,
        }}
      />
      {/* <!-- End Google Tag Manager --> */}
    </Head>
  );
};

export default HeadLayout;

pages/index.js:

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { Partytown } from "@builder.io/partytown/react";
import HeadLayout from "../components/HeadLayout";

export default function Home() {
  return (
    <div className={styles.container}>
      <HeadLayout />

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{" "}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

Next version: 11.1.4
I've read two issues 404 error for the resource "/partytown/partytown-sandbox-sw.html?1646853715625" #107 and [bug] get 404 not found ~partytown/debug/partytown-sandbox-sw.html with simple angular bundle html file and express server #193 but they don't help me now.

The text was updated successfully, but these errors were encountered:

SardarDelha · 2023-01-30T18:58:44Z

Almost all developers have this problem and there is no solution for it apparently.
I hope the developers of this good library will pay attention to this.

simkuns · 2023-02-01T23:15:09Z

@baharmf93 Check out this reply #107 (comment), maybe you will find it helpful.

Livog · 2023-04-21T09:33:27Z

I came across the same 404 error for the resource "/~partytown/debug/partytown-sandbox-sw.html." In my case, this issue was not related to any specific integration type, such as Next.js, but seemed to be caused by a setting in the browser's developer tools.

Here's what worked for me to resolve this issue:

Navigate to the Inspector.

Open the "Application" tab.
Locate the "Service Workers" section.
Uncheck the "Bypass for network" option.

By unchecking "Bypass for network," I allowed the service worker to handle the self.fetch request for the HTML file. This made sense in my situation, as the file is not meant to exist outside of the service worker. When the service worker called "/~partytown/debug/partytown-sandbox-sw.html," it provided a response. I observed this behavior in the partytown-sw.js file.

Additionally, I noticed comments mentioning incorrect service worker registration. Ensuring that the service worker is registered correctly is essential for proper functionality. Double-check your registration process to avoid potential issues.

This solution may not work for everyone, but it did work for me so I wanted to share it. Maybe even this explanation could be added to the documentation to help others facing similar issues.

suhaylmv · 2024-01-08T07:44:17Z

I have a similar issue. Nothing is logged to the console, but the google crawlers get the 404 error several times, every time my website is crawled, which I can see from my google search console.

Has anyone found a fix?

f33w · 2024-04-16T08:29:35Z

Getting the same issue with 404 in GSC.
Has anyone found a fix? @suhaylmv

suhaylmv · 2024-04-17T18:06:28Z

nope

kabus202 · 2024-09-03T19:31:04Z

any workarounds?

lilnasy mentioned this issue Jan 4, 2024

Partytown + VT website giving 404 errors to the google search engine withastro/astro#9607

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

404 error for the resource "/~partytown/debug/partytown-sandbox-sw.html?1665944529123" when integrating with Nextjs #283

404 error for the resource "/~partytown/debug/partytown-sandbox-sw.html?1665944529123" when integrating with Nextjs #283

hieunguyen1704 commented Oct 16, 2022

SardarDelha commented Jan 30, 2023

simkuns commented Feb 1, 2023

Livog commented Apr 21, 2023

suhaylmv commented Jan 8, 2024

f33w commented Apr 16, 2024

suhaylmv commented Apr 17, 2024

kabus202 commented Sep 3, 2024

404 error for the resource "/~partytown/debug/partytown-sandbox-sw.html?1665944529123" when integrating with Nextjs #283

404 error for the resource "/~partytown/debug/partytown-sandbox-sw.html?1665944529123" when integrating with Nextjs #283

Comments

hieunguyen1704 commented Oct 16, 2022

SardarDelha commented Jan 30, 2023

simkuns commented Feb 1, 2023

Livog commented Apr 21, 2023

suhaylmv commented Jan 8, 2024

f33w commented Apr 16, 2024

suhaylmv commented Apr 17, 2024

kabus202 commented Sep 3, 2024