partytown
partytown copied to clipboard
BuilderIO
404 error for the resource "/~partytown/debug/partytown-sandbox-sw.html?1665944529123" when integrating with Nextjs
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 →</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 →</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 →</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 →</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.
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.
@baharmf93 Check out this reply https://github.com/BuilderIO/partytown/issues/107#issuecomment-1412861607, maybe you will find it helpful.
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.
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?
