fix: bandwidth issues for 404 resources #6302

packages/qwik-city/middleware/azure-swa/index.ts

@@ -8,6 +8,7 @@ import type {
 import { getNotFound } from '@qwik-city-not-found-paths';
 import { _deserializeData, _serializeData, _verifySerializable } from '@builder.io/qwik';
 import { parseString } from 'set-cookie-parser';
+import { isStaticPath } from '@qwik-city-static-paths';
 
 // @builder.io/qwik-city/middleware/azure-swa
 
@@ -123,7 +124,13 @@ export function createQwikCity(opts: QwikCityAzureOptions): AzureFunction {
 
       // qwik city did not have a route for this request
       // response with 404 for this pathname
-      const notFoundHtml = getNotFound(url.pathname);
+
+      // In the development server, we replace the getNotFound function
+      // For static paths, we assign a static "Not Found" message.
+      // This ensures consistency between development and production environments for specific URLs.
+      const notFoundHtml = isStaticPath(req.method || 'GET', url)
+        ? 'Not Found'
+        : getNotFound(url.pathname);
       return {
         status: 404,
         headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Not-Found': url.pathname },

packages/qwik-city/middleware/bun/index.ts

@@ -101,7 +101,13 @@ export function createQwikCity(opts: QwikCityBunOptions) {
   const notFound = async (request: Request) => {
     try {
       const url = new URL(request.url);
-      const notFoundHtml = getNotFound(url.pathname);
+
+      // In the development server, we replace the getNotFound function
+      // For static paths, we assign a static "Not Found" message.
+      // This ensures consistency between development and production environments for specific URLs.
+      const notFoundHtml = isStaticPath(request.method || 'GET', url)
+        ? 'Not Found'
+        : getNotFound(url.pathname);
       return new Response(notFoundHtml, {
         status: 404,
         headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Not-Found': url.pathname },

packages/qwik-city/middleware/cloudflare-pages/index.ts

@@ -114,7 +114,13 @@ export function createQwikCity(opts: QwikCityCloudflarePagesOptions) {
 
       // qwik city did not have a route for this request
       // response with 404 for this pathname
-      const notFoundHtml = getNotFound(url.pathname);
+
+      // In the development server, we replace the getNotFound function
+      // For static paths, we assign a static "Not Found" message.
+      // This ensures consistency between development and production environments for specific URLs.
+      const notFoundHtml = isStaticPath(request.method || 'GET', url)
+        ? 'Not Found'
+        : getNotFound(url.pathname);
       return new Response(notFoundHtml, {
         status: 404,
         headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Not-Found': url.pathname },

packages/qwik-city/middleware/deno/index.ts

@@ -102,7 +102,13 @@ export function createQwikCity(opts: QwikCityDenoOptions) {
   const notFound = async (request: Request) => {
     try {
       const url = new URL(request.url);
-      const notFoundHtml = getNotFound(url.pathname);
+
+      // In the development server, we replace the getNotFound function
+      // For static paths, we assign a static "Not Found" message.
+      // This ensures consistency between development and production environments for specific URLs.
+      const notFoundHtml = isStaticPath(request.method || 'GET', url)
+        ? 'Not Found'
+        : getNotFound(url.pathname);
       return new Response(notFoundHtml, {
         status: 404,
         headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Not-Found': url.pathname },

packages/qwik-city/middleware/netlify-edge/index.ts

@@ -75,7 +75,13 @@ export function createQwikCity(opts: QwikCityNetlifyOptions) {
 
       // qwik city did not have a route for this request
       // response with 404 for this pathname
-      const notFoundHtml = getNotFound(url.pathname);
+
+      // In the development server, we replace the getNotFound function
+      // For static paths, we assign a static "Not Found" message.
+      // This ensures consistency between development and production environments for specific URLs.
+      const notFoundHtml = isStaticPath(request.method || 'GET', url)
+        ? 'Not Found'
+        : getNotFound(url.pathname);
       return new Response(notFoundHtml, {
         status: 404,
         headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Not-Found': url.pathname },

packages/qwik-city/middleware/node/index.ts

@@ -74,7 +74,13 @@ export function createQwikCity(opts: QwikCityNodeRequestOptions) {
       if (!res.headersSent) {
         const origin = computeOrigin(req, opts);
         const url = getUrl(req, origin);
-        const notFoundHtml = getNotFound(url.pathname);
+
+        // In the development server, we replace the getNotFound function
+        // For static paths, we assign a static "Not Found" message.
+        // This ensures consistency between development and production environments for specific URLs.
+        const notFoundHtml = isStaticPath(req.method || 'GET', url)
+          ? 'Not Found'
+          : getNotFound(url.pathname);
         res.writeHead(404, {
           'Content-Type': 'text/html; charset=utf-8',
           'X-Not-Found': url.pathname,
@@ -105,8 +111,9 @@ export function createQwikCity(opts: QwikCityNodeRequestOptions) {
         } else {
           filePath = join(staticFolder, pathname, 'index.html');
         }
-        const stream = createReadStream(filePath);
         const ext = extname(filePath).replace(/^\./, '');
+        const stream = createReadStream(filePath);
+        stream.on('error', next);
 
         const contentType = MIME_TYPES[ext];
 
@@ -118,7 +125,6 @@ export function createQwikCity(opts: QwikCityNodeRequestOptions) {
           res.setHeader('Cache-Control', opts.static.cacheControl);
         }
 
-        stream.on('error', next);
         stream.pipe(res);
 
         return;

packages/qwik-city/middleware/request-handler/generated/not-found-paths.ts

@@ -1,3 +1,7 @@
+/**
+ * DO NOT CHANGE THE EXACT VALUE OF `Resource Not Found`, THIS WILL BE REPLACED IN THE CODE LATER,
+ * DEPENDING ON RUNTIME (e.g. DEV or PRODUCTION)
+ */
 export function getNotFound(_pathname: string) {
   return 'Resource Not Found';
 }

packages/qwik-city/middleware/vercel-edge/index.ts

@@ -102,7 +102,13 @@ export function createQwikCity(opts: QwikCityVercelEdgeOptions) {
 
       // qwik city did not have a route for this request
       // response with 404 for this pathname
-      const notFoundHtml = getNotFound(url.pathname);
+
+      // In the development server, we replace the getNotFound function
+      // For static paths, we assign a static "Not Found" message.
+      // This ensures consistency between development and production environments for specific URLs.
+      const notFoundHtml = isStaticPath(request.method || 'GET', url)
+        ? 'Not Found'
+        : getNotFound(url.pathname);
       return new Response(notFoundHtml, {
         status: 404,
         headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Not-Found': url.pathname },

starters/e2e/qwikcity/adapter.spec.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Qwik City Adapter", () => {
+  test("Qwik City Adapter", async ({ page: api }) => {
+    const rsp = (await api.goto("/qwikcity-test/build/a-random-file-after-that.js"))!;
+    expect(rsp.status()).toBe(200);
+    expect(rsp.headers()["content-type"]).toBe(
+      "text/html; charset=utf-8",
+    );
+
+    const data = await rsp.text();
+    expect(data).toBe("Not Found");
+  });
+});