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

hieunguyen1704 commented 2 years ago

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 #107 and #193 but they don't help me now.

SardarDelha commented 1 year ago

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 commented 1 year ago

@baharmf93 Check out this reply https://github.com/BuilderIO/partytown/issues/107#issuecomment-1412861607, maybe you will find it helpful.

Livog commented 1 year ago

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 commented 10 months ago

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 commented 6 months ago

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

suhaylmv commented 6 months ago

nope

kabus202 commented 2 months ago

any workarounds?

BuilderIO / partytown

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