fix: display UX friendly error for missing files

public/locales/en/files.json

@@ -185,5 +185,14 @@
   },
   "noPinsInProgress": "All done, no remote pins in progress.",
   "remotePinningInProgress": "Remote pinning in progress:",
-  "selectAllEntries": "Select all entries"
+  "selectAllEntries": "Select all entries",
+  "previewNotFound": {
+    "title": "IPFS can't find this item",
+    "helpTitle": "These are common troubleshooting steps might help:",
+    "helpListItemPathTypo": "Are there typos in the path you entered?",
+    "helpListItemFileMoved": "Was the file moved, renamed, or deleted?",
+    "helpListItemBookmarkMigrated": "Did you copy a URL or bookmark from another computer? If so, you'll need to",
+    "helpListItemBookmarkMigratedLink": "point this instance at that computer's node",
+    "backButton": "Go to Home"
+  }
 }

src/bundles/files/actions.js

@@ -221,8 +221,19 @@ const actions = () => ({
       ? await last(ipfs.name.resolve(realPath))
       : realPath
 
-    const stats = await stat(ipfs, resolvedPath)
     const time = Date.now()
+    /** @type {Stat} */
+    let stats
+    try {
+      stats = await stat(ipfs, resolvedPath)
+    } catch (error) {
+      console.error(`Error fetching stats for path "${resolvedPath}":`, error)
+      return {
+        fetched: time,
+        type: 'not-found',
+        path: resolvedPath
+      }
+    }
 
     switch (stats.type) {
       case 'unknown': {

src/files/FilesPage.js

@@ -14,6 +14,7 @@ import FilePreview from './file-preview/FilePreview.js'
 import FilesList from './files-list/FilesList.js'
 import FilesGrid from './files-grid/files-grid.js'
 import { ViewList, ViewModule } from '../icons/stroke-icons.js'
+import FileNotFound from './file-not-found/index.tsx'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Icons
@@ -192,6 +193,9 @@ const FilesPage = ({
         </div>
       )
     }
+    if (files.type === 'not-found') {
+      return <FileNotFound path={files.path} />
+    }
 
     const commonProps = {
       key: window.encodeURIComponent(files.path),

src/files/file-not-found/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Button from '../../components/button/button.js'
+import GlyphAttention from '../../icons/GlyphAttention.js'
+import { useTranslation } from 'react-i18next'
+
+export interface FileNotFoundProps {
+  path: string
+}
+
+const FileNotFound = ({ path }: FileNotFoundProps) => {
+  const { t } = useTranslation('files')
+
+  return (
+    <div
+      className='mb3 pa4-l pa2 mw9 center'
+      style={{ background: 'rgba(251, 251, 251)' }}
+    >
+      <div className='flex flex-row items-center mb3'>
+        <GlyphAttention style={{ height: 76 }} className='fill-red mr' role='presentation' />
+        <div className='red fw6 truncate'>{t('previewNotFound.title')}</div>
+      </div>
+      <div className='mb3 charcoal fw6 truncate'>{path}</div>
+      <div className='mb3'>{t('previewNotFound.helpTitle')}</div>
+      <ul>
+        <li>{t('previewNotFound.helpListItemPathTypo')}</li>
+        <li>{t('previewNotFound.helpListItemFileMoved')}</li>
+        <li>{t('previewNotFound.helpListItemBookmarkMigrated')} <a href="#/peers">{t('previewNotFound.helpListItemBookmarkMigratedLink')}</a>.</li>
+      </ul>
+      <a href="#/files">
+        <Button className='ma2 tc' bg='bg-teal'>{t('previewNotFound.backButton')}</Button>
+      </a>
+    </div>
+  )
+}
+
+export default FileNotFound