feat: updated error page (#664)

SgtPooki · web-flow · commit b3de5a611ace · 2025-04-11T17:30:54.000-05:00
* test: ensure ipfs-gateway loads all car fixtures

* test: image loading smoke test

* test: dir redirect test

* test: add swResponses test fixture

* test: validate dir-index-html text and links

* tmp

* chore: add ipns-record fixture

* fix: all tests pass with updated vfetch

* chore: fix lint error

* chore: update verified-fetch to latest

* chore: update package-lock.json after reset
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,24 +51,24 @@
     "@helia/block-brokers": "^4.1.0",
     "@helia/delegated-routing-v1-http-api-client": "^4.2.2",
     "@helia/http": "^2.0.5",
-    "@helia/interface": "^5.0.0",
-    "@helia/routers": "^3.0.0",
-    "@helia/verified-fetch": "^2.6.4",
-    "@libp2p/crypto": "^5.0.15",
-    "@libp2p/dcutr": "^2.0.26",
-    "@libp2p/identify": "^3.0.26",
-    "@libp2p/keychain": "^5.1.4",
-    "@libp2p/logger": "^5.1.3",
-    "@libp2p/ping": "^2.0.26",
-    "@libp2p/websockets": "^9.2.7",
-    "@libp2p/webtransport": "^5.0.36",
+    "@helia/interface": "^5.2.1",
+    "@helia/routers": "^3.0.1",
+    "@helia/verified-fetch": "^2.6.5",
+    "@libp2p/crypto": "^5.1.0",
+    "@libp2p/dcutr": "^2.0.28",
+    "@libp2p/identify": "^3.0.28",
+    "@libp2p/keychain": "^5.2.0",
+    "@libp2p/logger": "^5.1.14",
+    "@libp2p/ping": "^2.0.28",
+    "@libp2p/websockets": "^9.2.9",
+    "@libp2p/webtransport": "^5.0.38",
     "@multiformats/dns": "^1.0.6",
     "@noble/hashes": "^1.5.0",
     "execa": "^9.5.2",
     "helia": "^5.3.0",
     "ipfs-css": "^1.4.0",
     "ipfsd-ctl": "^15.0.2",
-    "libp2p": "^2.8.1",
+    "libp2p": "^2.8.3",
     "multiformats": "^13.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
diff --git a/playwright.config.js b/playwright.config.js
@@ -85,7 +85,7 @@ export default defineConfig({
       // need to use built assets due to service worker loading issue.
       command: process.env.SHOULD_BUILD !== 'false' ? 'npm run build && npx http-server --silent -p 3000 dist' : 'npx http-server --silent -p 3000 dist',
       port: 3000,
-      timeout: 15 * 1000,
+      timeout: 60 * 1000,
       reuseExistingServer: !process.env.CI,
       stdout: process.env.CI ? undefined : 'pipe',
       stderr: process.env.CI ? undefined : 'pipe'
diff --git a/src/sw.ts b/src/sw.ts
@@ -538,6 +538,7 @@ async function fetchHandler ({ path, request, event }: FetchHandlerArg): Promise
       log.error('fetchHandler: response not ok: ', response)
       return await errorPageResponse(response)
     }
+    response.headers.set('ipfs-sw', 'true')
     return response
   } catch (err: unknown) {
     const errorMessages: string[] = []
@@ -585,6 +586,8 @@ async function errorPageResponse (fetchResponse: Response): Promise<Response> {
   }
   if (json == null) {
     json = { error: { message: `${fetchResponse.statusText}: ${responseBodyAsText}`, stack: null } }
+  } else if (json.error == null) {
+    json.error = { message: json.errors.map(e => `<li>${e.message}</li>`).join(''), stack: json.errors.map(e => `<li>${e.stack}</li>`).join('\n') }
   }
 
   const responseDetails = getResponseDetails(fetchResponse, responseBodyAsText)
@@ -656,6 +659,14 @@ function getResponseDetails (response: Response, responseBody: string): Response
     headers[key] = value
   })
 
+  if (response.headers.get('Content-Type')?.includes('application/json') === true) {
+    try {
+      responseBody = JSON.parse(responseBody)
+    } catch (e) {
+      log.error('error parsing json for error page response', e)
+    }
+  }
+
   return {
     responseBody,
     headers,
diff --git a/test-e2e/fixtures/capture-all-sw-responses.ts b/test-e2e/fixtures/capture-all-sw-responses.ts
@@ -0,0 +1,47 @@
+import type { Page, Response } from '@playwright/test'
+
+/**
+ * Yields all the responses from the service worker.
+ *
+ * You must abort the signal to stop the capture.
+ */
+export async function * captureAllSwResponses (page: Page, signal: AbortSignal): AsyncGenerator<Response> {
+  const responseQueue: Response[] = []
+  let resolveNext: ((value: Response) => void) | null = null
+
+  // Helper function to get the next response
+  const getNextResponse = async (): Promise<Response> => {
+    const response = responseQueue.shift()
+    if (response != null) {
+      return Promise.resolve(response)
+    }
+    return new Promise(resolve => {
+      resolveNext = resolve
+    })
+  }
+
+  // Set up the response listener
+  const onResponse = (response: Response): void => {
+    if (response.headers()['ipfs-sw'] !== 'true') {
+      return
+    }
+    if (resolveNext != null) {
+      resolveNext(response)
+      resolveNext = null
+    } else {
+      responseQueue.push(response)
+    }
+  }
+
+  page.on('response', onResponse)
+
+  try {
+    while (!signal.aborted) {
+      const response = await getNextResponse()
+      if (signal.aborted) break
+      yield response
+    }
+  } finally {
+    page.off('response', onResponse)
+  }
+}
diff --git a/test-e2e/fixtures/config-test-fixtures.ts b/test-e2e/fixtures/config-test-fixtures.ts
@@ -1,4 +1,5 @@
-import { test as base } from '@playwright/test'
+import { test as base, type Response } from '@playwright/test'
+import { captureAllSwResponses } from './capture-all-sw-responses.js'
 import { setConfig } from './set-sw-config.js'
 import { waitForServiceWorker } from './wait-for-service-worker.js'
 
@@ -15,9 +16,37 @@ const baseURLProtocol = async ({ baseURL }, use): Promise<void> => {
   await use(url.protocol)
 }
 
-export const test = base.extend<{ rootDomain: string, baseURL: string, protocol: string }>({
+/**
+ * A fixture that captures all the responses from the service worker.
+ */
+const swResponses = async ({ page }, use): Promise<void> => {
+  const capturedResponses: Response[] = []
+  const controller = new AbortController()
+  const signal = controller.signal;
+
+  // background capture
+  (async () => {
+    try {
+      for await (const response of captureAllSwResponses(page, signal)) {
+        capturedResponses.push(response)
+      }
+    } catch (err) {
+      // do not kill the test runner, just log the error
+      // eslint-disable-next-line no-console
+      console.error('Error in SW capture:', err)
+    }
+  })().catch(() => {})
+
+  await use(capturedResponses)
+
+  // stop the capture loop because the test is done
+  controller.abort()
+}
+
+export const test = base.extend<{ rootDomain: string, baseURL: string, protocol: string, swResponses: Response[] }>({
   rootDomain: [rootDomain, { scope: 'test' }],
   protocol: [baseURLProtocol, { scope: 'test' }],
+  swResponses,
   page: async ({ page }, use) => {
     if (isNoServiceWorkerProject(test)) {
       test.skip()
diff --git a/test-e2e/fixtures/data/bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi.car b/test-e2e/fixtures/data/bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi.car
diff --git a/test-e2e/fixtures/data/k51qzi5uqu5dk3v4rmjber23h16xnr23bsggmqqil9z2gduiis5se8dht36dam.ipns-record b/test-e2e/fixtures/data/k51qzi5uqu5dk3v4rmjber23h16xnr23bsggmqqil9z2gduiis5se8dht36dam.ipns-record
diff --git a/test-e2e/fixtures/navigate-and-get-last-response.ts b/test-e2e/fixtures/navigate-and-get-last-response.ts
@@ -0,0 +1,19 @@
+import { waitForServiceWorker } from './wait-for-service-worker.js'
+import type { Page, Response } from '@playwright/test'
+
+/**
+ * Navigates to a URL and returns the last response from the service worker.
+ */
+export async function navigateAndGetSwResponse (page: Page, { url, swScope }: { url: string, swScope: string }): Promise<Response> {
+  const swScopeUrl = new URL(swScope)
+  const lastSwResponsePromise = page.waitForResponse(response => {
+    // if firefox is being used, .fromServiceWorker() will return false, so we need to check something else instead
+    return response.url().includes(swScopeUrl.host) && response.headers()['ipfs-sw'] === 'true'
+  })
+
+  await page.goto(url)
+
+  await waitForServiceWorker(page, swScope)
+
+  return lastSwResponsePromise
+}
diff --git a/test-e2e/fixtures/wait-for-service-worker.ts b/test-e2e/fixtures/wait-for-service-worker.ts
@@ -1,11 +1,17 @@
 import type { Page } from '@playwright/test'
 
-export async function waitForServiceWorker (page: Page): Promise<void> {
-  await page.waitForFunction(async () => {
+export async function waitForServiceWorker (page: Page, scope?: string): Promise<void> {
+  await page.waitForFunction(async ({ scope }: { scope?: string }) => {
     const registration = await window.navigator.serviceWorker.getRegistration()
 
     if (registration?.active?.state === 'activated') {
-      return true
+      if (scope != null) {
+        // expectedScope is provided, so we need to check if the scope is as expected
+        return registration?.scope === scope
+      } else {
+        // no expectedScope, so we just need to check if the service worker is activated
+        return true
+      }
     }
-  })
+  }, { scope })
 }
diff --git a/test-e2e/smoke-test.test.ts b/test-e2e/smoke-test.test.ts
@@ -0,0 +1,72 @@
+// see https://github.com/ipfs/service-worker-gateway/issues/502
+import { testSubdomainRouting as test, expect } from './fixtures/config-test-fixtures.js'
+import { navigateAndGetSwResponse } from './fixtures/navigate-and-get-last-response'
+
+test.describe('smoke test', () => {
+  test('loads a dag-json jpeg', async ({ page, protocol }) => {
+    const response = await navigateAndGetSwResponse(page, {
+      url: `${protocol}//localhost:3334/ipfs/bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi`,
+      swScope: 'http://bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi.ipfs.localhost:3334'
+    })
+
+    expect(response?.status()).toBe(200)
+    expect(response?.headers()['content-type']).toBe('image/jpeg')
+  })
+
+  test('request to /ipfs/dir-cid redirects to /ipfs/dir-cid/', async ({ page, protocol, swResponses }) => {
+    await navigateAndGetSwResponse(page, {
+      url: `${protocol}//localhost:3334/ipfs/bafybeib3ffl2teiqdncv3mkz4r23b5ctrwkzrrhctdbne6iboayxuxk5ui/root2/root3/root4`,
+      swScope: 'http://bafybeib3ffl2teiqdncv3mkz4r23b5ctrwkzrrhctdbne6iboayxuxk5ui.ipfs.localhost:3334'
+    })
+    await page.waitForURL(`${protocol}//bafybeib3ffl2teiqdncv3mkz4r23b5ctrwkzrrhctdbne6iboayxuxk5ui.ipfs.localhost:3334/root2/root3/root4/`)
+    const response = swResponses[swResponses.length - 1]
+    expect(response?.status()).toBe(200)
+    expect(response?.headers()['content-type']).toBe('text/html; charset=utf-8')
+    expect(await response?.text()).toContain('hello')
+  })
+
+  /**
+   * TODO: address issues mentioned in https://github.com/ipfs/helia-verified-fetch/issues/208
+   */
+  test('request to /ipfs/dir-cid without index.html returns dir listing', async ({ page, protocol, swResponses }) => {
+    await navigateAndGetSwResponse(page, {
+      url: `${protocol}//localhost:3334/ipfs/bafybeib3ffl2teiqdncv3mkz4r23b5ctrwkzrrhctdbne6iboayxuxk5ui/root2/root3`,
+      swScope: 'http://bafybeib3ffl2teiqdncv3mkz4r23b5ctrwkzrrhctdbne6iboayxuxk5ui.ipfs.localhost:3334'
+    })
+    await page.waitForURL(`${protocol}//bafybeib3ffl2teiqdncv3mkz4r23b5ctrwkzrrhctdbne6iboayxuxk5ui.ipfs.localhost:3334/root2/root3/`)
+    const response = swResponses[swResponses.length - 1]
+    expect(response?.status()).toBe(200)
+    expect(response?.headers()['content-type']).toBe('text/html')
+    // there should be a dir listing that has the CID of the root3 node, and the name of the root4 node with a short name
+
+    const header = await page.waitForSelector('main header')
+    expect(await header?.innerText()).toContain('Index of root3')
+    const headerCid = await header.$('.ipfs-hash')
+    expect(await headerCid?.innerText()).toContain('bafybeiawdvhmjcz65x5egzx4iukxc72hg4woks6v6fvgyupiyt3oczk5ja')
+
+    // .grid.dir will have a list of rows (1 in this case) with links to the files in the directory. One link where the name is, and one link with a short hash (.ipfs-hash)
+    const gridDir = await page.waitForSelector('.grid.dir')
+    const rowCells = await gridDir?.$$('> div') // ideally we would have a better selector for each row, but there is currently no wrapping element for each row
+    expect(rowCells?.length).toBe(4)
+    const nameLink = await rowCells[1].$('a')
+    const shortHashLink = await rowCells[2].$('a')
+    expect(await nameLink?.innerText()).toBe('root4')
+    expect(await nameLink?.getAttribute('href')).toBe('root4')
+    expect(await shortHashLink?.innerText()).toContain('bafy...lo7q')
+    expect(await shortHashLink?.getAttribute('href')).toContain('http://localhost:3334/ipfs/bafybeifq2rzpqnqrsdupncmkmhs3ckxxjhuvdcbvydkgvch3ms24k5lo7q?filename=root4')
+  })
+
+  /**
+   * @see https://github.com/ipfs/service-worker-gateway/issues/662
+   */
+  test('request to /ipns/<libp2p-key> returns expected content', async ({ page, protocol, swResponses }) => {
+    await navigateAndGetSwResponse(page, {
+      url: `${protocol}//localhost:3334/ipns/k51qzi5uqu5dk3v4rmjber23h16xnr23bsggmqqil9z2gduiis5se8dht36dam`,
+      swScope: 'http://k51qzi5uqu5dk3v4rmjber23h16xnr23bsggmqqil9z2gduiis5se8dht36dam.ipns.localhost:3334'
+    })
+    const response = swResponses[swResponses.length - 1]
+    expect(response?.status()).toBe(200)
+    expect(response?.headers()['content-type']).toBe('text/plain; charset=utf-8')
+    expect(await response?.text()).toContain('hello')
+  })
+})
