fix: strip root hash from URL on error page (#907)

To not interfere with `CTRL+R`-style page reloads, when we there is
an error to be shown, ensure we are on the bare URL and not `#/`.

Fixes #817 though this was also partially handled by #906 and #902

Author: achingbrain

src/app.tsx

@@ -28,28 +28,42 @@ function toAbsolutePath (path: string): string {
   return path
 }
 
+/**
+ * Do not redirect to `#/` if we are already on the bare domain, otherwise the
+ * hash can interfere with CTRL+R-style page reloads
+ */
+function doNothingIfClickedOnRoot (event: React.MouseEvent): boolean {
+  if (globalThis.location.hash === '') {
+    event.preventDefault()
+    event.stopPropagation()
+    return false
+  }
+
+  return true
+}
+
 function Header (): React.ReactElement {
   let errorPageLink: React.ReactElement | undefined
 
   if (globalThis.fetchError != null) {
     errorPageLink = (
-      <NavLink to={`/${HASH_FRAGMENTS.IPFS_SW_FETCH_ERROR_UI}`} className={({ isActive }) => isActive ? 'white' : ''}>
+      <NavLink to='/' className={({ isActive }) => (isActive ?? globalThis.location.hash === '') ? 'yellow-muted' : 'yellow'} onClickCapture={doNothingIfClickedOnRoot}>
         <FaExclamationCircle className='ml2 f3' />
       </NavLink>
     )
   }
 
   if (globalThis.serverError != null) {
     errorPageLink = (
-      <NavLink to={`/${HASH_FRAGMENTS.IPFS_SW_SERVER_ERROR_UI}`} className={({ isActive }) => isActive ? 'white' : ''}>
+      <NavLink to='/' className={({ isActive }) => (isActive ?? globalThis.location.hash === '') ? 'red-muted' : 'red'} onClickCapture={doNothingIfClickedOnRoot}>
         <FaExclamationCircle className='ml2 f3' />
       </NavLink>
     )
   }
 
   if (globalThis.originIsolationWarning != null) {
     errorPageLink = (
-      <NavLink to={`/${HASH_FRAGMENTS.IPFS_SW_ORIGIN_ISOLATION_WARNING}`} className={({ isActive }) => isActive ? 'white' : ''}>
+      <NavLink to='/' className={({ isActive }) => (isActive ?? globalThis.location.hash === '') ? 'yellow-muted' : 'yellow'} onClickCapture={doNothingIfClickedOnRoot}>
         <FaExclamationTriangle className='ml2 f3' />
       </NavLink>
     )
@@ -65,7 +79,7 @@ function Header (): React.ReactElement {
       <div className='pb1 ma0 mr2 inline-flex items-center aqua'>
         <h1 className='e2e-header-title f3 fw2 ttu sans-serif'>Service Worker Gateway</h1>
         {errorPageLink}
-        <NavLink to='/' className={({ isActive }) => isActive ? 'white' : ''}>
+        <NavLink to={`/${HASH_FRAGMENTS.IPFS_SW_LOAD_UI}`} className={({ isActive }) => (isActive || (errorPageLink == null && globalThis.location.hash === '')) ? 'white' : ''}>
           <FaDownload className='ml2 f3' />
         </NavLink>
         <NavLink to={`/${HASH_FRAGMENTS.IPFS_SW_ABOUT_UI}`} className={({ isActive }) => isActive ? 'white' : ''}>
@@ -83,31 +97,47 @@ function Header (): React.ReactElement {
 }
 
 /**
- * This component is used when either:
- *
- * 1. the SW encountered an error fulfilling the request
- * 2. Installing the service worker failed
- * 3. The user wants to update the service worker config
- * 4. The user needs to accept the origin isolation warning
+ * Dynamically create an index route - if an error has occurred, show that on
+ * the landing page, otherwise show the "Enter a CID" UI page
  */
-function App (): React.ReactElement {
+function getIndexRoute (): React.ReactElement {
   if (globalThis.fetchError != null && globalThis.location.hash === '') {
-    window.location.hash = `/${HASH_FRAGMENTS.IPFS_SW_FETCH_ERROR_UI}`
+    return (
+      <Route element={<FetchErrorPage />} index />
+    )
   }
 
   if (globalThis.serverError != null && globalThis.location.hash === '') {
-    window.location.hash = `/${HASH_FRAGMENTS.IPFS_SW_SERVER_ERROR_UI}`
+    return (
+      <Route element={<ServerErrorPage />} index />
+    )
   }
 
   if (globalThis.originIsolationWarning != null && globalThis.location.hash === '') {
-    window.location.hash = `/${HASH_FRAGMENTS.IPFS_SW_ORIGIN_ISOLATION_WARNING}`
+    return (
+      <Route element={<OriginIsolationWarningPage />} index />
+    )
   }
 
+  return (
+    <Route element={<HomePage />} index />
+  )
+}
+
+/**
+ * This component is used when either:
+ *
+ * 1. the SW encountered an error fulfilling the request
+ * 2. Installing the service worker failed
+ * 3. The user wants to update the service worker config
+ * 4. The user needs to accept the origin isolation warning
+ */
+function App (): React.ReactElement {
   return (
     <HashRouter>
       <Header />
       <Routes>
-        <Route index element={<HomePage />} />,
+        {getIndexRoute()}
         <Route path={`/${HASH_FRAGMENTS.IPFS_SW_LOAD_UI}`} element={<HomePage />} />,
         <Route path={`/${HASH_FRAGMENTS.IPFS_SW_ABOUT_UI}`} element={<AboutPage />} />,
         <Route path={`/${HASH_FRAGMENTS.IPFS_SW_CONFIG_UI}`} element={<ConfigPage />} />,

src/lib/remove-root-hash.ts

@@ -0,0 +1,13 @@
+/**
+ * Error pages live on the page root but React's HashRouter makes the page hash
+ * "#/" which can interfere with CTRL+R-style page reloads so remove the hash
+ * without causing a page reload so we are on a bare URL.
+ */
+export function removeRootHashIfPresent (): void {
+  if (window.location.hash === '#/') {
+    // const base = document.querySelector('base');
+    // base?.setAttribute('href', '');
+    // remove any UI-added navigation info
+    history.pushState('', document.title, window.location.pathname + window.location.search)
+  }
+}

src/pages/fetch-error.tsx

@@ -4,6 +4,7 @@ import ContentBox from '../components/content-box.jsx'
 import { Link } from '../components/link.jsx'
 import Terminal from '../components/terminal.jsx'
 import { HASH_FRAGMENTS } from '../lib/constants.js'
+import { removeRootHashIfPresent } from '../lib/remove-root-hash.js'
 import { toGatewayRoot } from '../lib/to-gateway-root.js'
 import type { ConfigDb } from '../lib/config-db.js'
 import type { RequestDetails, ResponseDetails } from '../sw/fetch-error-page.js'
@@ -167,6 +168,8 @@ export function FetchErrorPage ({ request, response, config, logs, providers }:
     )
   }
 
+  removeRootHashIfPresent()
+
   const defaultShowDebugInfo = response.status === 500
 
   let showDebugInfo = defaultShowDebugInfo

src/pages/home.tsx

@@ -6,9 +6,12 @@ import { dnsLinkLabelDecoder, isInlinedDnsLink } from '../lib/dns-link-labels.js
 import { LOCAL_STORAGE_KEYS } from '../lib/local-storage.js'
 import './default-page-styles.css'
 import { pathRegex, subdomainRegex } from '../lib/regex.js'
+import { removeRootHashIfPresent } from '../lib/remove-root-hash.js'
 import type { ReactElement } from 'react'
 
 function LoadContent (): ReactElement {
+  removeRootHashIfPresent()
+
   let initialPath = localStorage.getItem(LOCAL_STORAGE_KEYS.forms.requestPath) ?? ''
 
   if (initialPath === '') {

src/pages/origin-isolation-warning.tsx

@@ -3,6 +3,7 @@ import { ServiceWorkerReadyButton } from '../components/sw-ready-button.jsx'
 import { ConfigContext } from '../context/config-context.jsx'
 import { QUERY_PARAMS } from '../lib/constants.js'
 import './default-page-styles.css'
+import { removeRootHashIfPresent } from '../lib/remove-root-hash.js'
 import { toGatewayRoot } from '../lib/to-gateway-root.js'
 import type { ReactNode } from 'react'
 
@@ -55,6 +56,8 @@ export default function SubdomainWarningPage (): ReactNode {
     )
   }
 
+  removeRootHashIfPresent()
+
   const [isSaving, setIsSaving] = useState(false)
   const configContext = useContext(ConfigContext)
 

src/pages/server-error.tsx

@@ -3,6 +3,7 @@ import { Button } from '../button.jsx'
 import ContentBox from '../components/content-box.jsx'
 import { Link } from '../components/link.jsx'
 import Terminal from '../components/terminal.jsx'
+import { removeRootHashIfPresent } from '../lib/remove-root-hash.js'
 import { toGatewayRoot } from '../lib/to-gateway-root.js'
 import type { ReactElement } from 'react'
 
@@ -95,6 +96,8 @@ export function ServerErrorPage ({ url, error, title, logs }: ServerErrorPagePro
     )
   }
 
+  removeRootHashIfPresent()
+
   function retry (): void {
     // remove any UI-added navigation info
     history.pushState('', document.title, window.location.pathname + window.location.search)

test-e2e/first-hit.test.ts

@@ -18,7 +18,7 @@ test.describe('first-hit ipfs-hosted', () => {
       }
     })
 
-    test('redirects are handled', async ({ page }) => {
+    test('loads the index page from the root when an path is present', async ({ page }) => {
       const response = await page.goto('http://127.0.0.1:3334/ipfs/bafkqablimvwgy3y', {
         waitUntil: 'networkidle'
       })
@@ -27,9 +27,7 @@ test.describe('first-hit ipfs-hosted', () => {
       expect(response?.status()).toBe(200)
       const headers = await response?.allHeaders()
 
-      // we redirect to the root path with query param so sw can be registered at the root path
-      await expect(page).toHaveURL('http://127.0.0.1:3334/ipfs/bafkqablimvwgy3y#/ipfs-sw-origin-isolation-warning')
-
+      // accept the warning
       await handleOriginIsolationWarning(page)
 
       expect(headers?.['content-type']).toContain('text/html')

test-e2e/origin-isolation-warning.test.ts

@@ -1,4 +1,3 @@
-import { HASH_FRAGMENTS } from '../src/lib/constants.js'
 import { testPathRouting as test, expect } from './fixtures/config-test-fixtures.js'
 import { handleOriginIsolationWarning } from './fixtures/handle-origin-isolation-warning.js'
 
@@ -8,16 +7,10 @@ test.describe('origin isolation warning', () => {
       waitUntil: 'networkidle'
     })
     const testUrl = 'http://127.0.0.1:3333/ipfs/bafkqablimvwgy3y'
-    const testURL = new URL(testUrl)
     await page.goto(testUrl, {
       waitUntil: 'networkidle'
     })
 
-    const warningUrl = new URL(testURL)
-    warningUrl.hash = `/${HASH_FRAGMENTS.IPFS_SW_ORIGIN_ISOLATION_WARNING}`
-
-    await expect(page).toHaveURL(warningUrl.toString())
-
     // accept warning
     await handleOriginIsolationWarning(page)