fix: fixes an issue where the static pages could not be retrieved from the blob store (#79)

* fix: fixes an issue where the static pages could not be retrieved from the blob store

* chore: update

* chore: update

* chore: update

Author: lukasholzer

.github/workflows/run-tests.yml

@@ -7,7 +7,7 @@ jobs:
   e2e:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: 'Install Node'
         uses: actions/setup-node@v3
         with:

playwright.config.ts

@@ -21,6 +21,10 @@ export default defineConfig({
     baseURL: process.env.URL,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    extraHTTPHeaders: {
+      /* Add debug logging for netlify cache headers */
+      'x-nf-debug-logging': '1',
+    },
   },
   timeout: 10 * 60 * 1000,
   /* Configure projects for major browsers */

src/run/handlers/cache.cts

@@ -152,8 +152,9 @@ module.exports = class NetlifyCacheHandler implements CacheHandler {
       console.warn(`Failed to update tag manifest for ${tag}`, error)
     }
 
-    purgeCache({ tags: [tag] }).catch(() => {
-      // noop
+    purgeCache({ tags: [tag] }).catch((error) => {
+      // TODO: add reporting here
+      console.error(`[NetlifyCacheHandler]: Purging the cache for tag ${tag} failed`, error)
     })
   }
 

src/run/handlers/next.cts

@@ -1,5 +1,6 @@
 import { join, relative } from 'path'
 import fs from 'fs/promises'
+import { getDeployStore } from '@netlify/blobs'
 
 import type { getRequestHandlers } from 'next/dist/server/lib/start-server.js'
 
@@ -9,7 +10,7 @@ import { patchFs } from 'fs-monkey'
 type FS = typeof import('fs')
 
 export async function getMockedRequestHandlers(...args: Parameters<typeof getRequestHandlers>) {
-  const { blobStore } = await import('./cache.cjs')
+  const store = getDeployStore()
   const ofs = { ...fs }
 
   async function readFileFallbackBlobStore(...args: Parameters<FS['promises']['readFile']>) {
@@ -22,7 +23,7 @@ export async function getMockedRequestHandlers(...args: Parameters<typeof getReq
       // only try to get .html files from the blob store
       if (typeof path === 'string' && path.endsWith('.html')) {
         const blobKey = relative(join(process.cwd(), '.next'), path)
-        const file = await blobStore.get(blobKey)
+        const file = await store.get(blobKey)
         if (file !== null) {
           return file
         }

tests/e2e/page-router.test.ts

@@ -12,30 +12,51 @@ test.describe('page-router', () => {
     await ctx?.cleanup?.(!!testInfo.errors.length)
   })
 
-  // NOT working yet as blob storage upload ins not working with the CLI
+  // The cache purge does not work :(
   test.skip('Static revalidate works correctly', async ({ page }) => {
-    const response1 = await page.goto(new URL('static/revalidate', ctx.url).href)
+    const response1 = await page.goto(new URL('static/revalidate-manual', ctx.url).href)
     const headers1 = response1?.headers() || {}
     expect(response1?.status()).toBe(200)
     expect(headers1['x-nextjs-cache']).toBe('HIT')
-    expect(headers1['netlify-cdn-cache-control']).toBe('s-maxage=3, stale-while-revalidate')
 
+    const date1 = await page.textContent('[data-testid="date-now"]')
     const h1 = await page.textContent('h1')
     expect(h1).toBe('Show #71')
 
-    const date1 = await page.textContent('[data-testid="date-now"]')
-
-    // wait to have a stale page
-    page.waitForTimeout(3_000)
-
-    const response2 = await page.goto(new URL('static/revalidate', ctx.url).href)
-    const headers2 = response1?.headers() || {}
+    const response2 = await page.goto(new URL('static/revalidate-manual', ctx.url).href)
+    const headers2 = response2?.headers() || {}
     expect(response2?.status()).toBe(200)
-    expect(response1?.status()).toBe(200)
-    expect(headers2['x-nextjs-cache']).toBe('MISS')
+    expect(headers2['x-nextjs-cache']).toBe('HIT')
 
+    // the page is cached
     const date2 = await page.textContent('[data-testid="date-now"]')
+    expect(date2).toBe(date1)
+
+    const revalidate = await page.goto(new URL('/api/revalidate', ctx.url).href)
+    expect(revalidate?.status()).toBe(200)
+
+    // wait a bit until the page got regenerated
+    await page.waitForTimeout(100)
+
+    // now after the revalidation it should have a different date
+    const response3 = await page.goto(new URL('static/revalidate-manual', ctx.url).href)
+    const headers3 = response3?.headers() || {}
+    expect(response3?.status()).toBe(200)
+    expect(headers3['x-nextjs-cache']).toBe('HIT')
+
+    // the page has now an updated date
+    const date3 = await page.textContent('[data-testid="date-now"]')
+    expect(date3).not.toBe(date2)
+  })
+
+  // Only works locally with the patched CLI that have blob support enable once this is released
+  test.skip('requesting a non existing page route that needs to be fetched from the blob store like 404.html', async ({
+    page,
+  }) => {
+    const response = await page.goto(new URL('non-exisitng', ctx.url).href)
+    const headers = response?.headers() || {}
+    expect(response?.status()).toBe(404)
 
-    expect(date1).not.toBe(date2)
+    expect(await page.textContent('h1')).toBe('404')
   })
 })

tests/utils/create-e2e-fixture.ts

@@ -27,6 +27,7 @@ export const createE2EFixture = async (fixture: string) => {
   let logs: string
   const _cleanup = (failure: boolean = false) => {
     if (failure) {
+      console.log('\n\n\n🪵  Deploy Logs:')
       console.log(logs)
     }
     // on failures we don't delete the deploy