feat: add link to check.ipfs.network on block fetch failure (#469)

* feat: add link to check.ipfs.network on block fetch failure

* revert: prior changes to locales

* feat: improve self service with troubleshooting tips and improved error messages in explore component

* fix: center IpldExploreErrorComponent

---------

Co-authored-by: Russell Dempsey <[email protected]>

Author: george-hub331

package-lock.json

@@ -69,6 +69,16 @@
     }
   },
   "errors": {
-    "BlockFetchTimeoutError": "Failed to fetch content in {timeout}s. Please refresh the page to retry or try a different CID."
+    "BlockFetchTimeoutError": "Failed to fetch content in {timeout}s. Please refresh the page to retry or try a different CID.",
+    "BlockFetchError": "Failed to fetch content: {error}. This could mean the content is not available on the network or there are connectivity issues.",
+    "CidSyntaxError": "Invalid CID format: {cid}. Please ensure you are using a valid CID.",
+    "checkIpfsNetwork": "Check content availability on IPFS Network",
+    "troubleshootingTips": {
+      "title": "Troubleshooting Tips",
+      "refresh": "Try refreshing the page",
+      "checkConnection": "Check your internet connection",
+      "tryLater": "Try again later - the content may still be propagating through the network",
+      "checkCidSyntax": "Verify that your CID is formatted correctly or that your CAR file is valid"
+    }
   }
 }

public/locales/en/explore.json

@@ -63,7 +63,7 @@ export const ExplorePage = ({
           : <div style={{ height: 54 }} />}
 
         <div className='dt-l dt--fixed'>
-          <div className='dtc-l w-100 w-two-thirds-l pr3-l v-top'>
+          <div className={`${error != null ? 'w-100 dt-row-l' : 'dtc-l w-100 w-two-thirds-l pr3-l'} v-top`}>
             <IpldExploreErrorComponent error={error} />
 
             {targetNode != null

src/components/ExplorePage.tsx

@@ -1,18 +1,55 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { useExplore } from '../../providers/explore'
 import type IpldExploreError from '../../lib/errors'
 
 export interface IpldExploreErrorComponentProps {
   error: IpldExploreError | null
 }
 
+const TroubleshootingTips: React.FC<{ cid: string }> = ({ cid }) => {
+  const { t } = useTranslation('explore', { keyPrefix: 'errors' })
+  if (cid == null) return null
+
+  return (
+    <>
+      <div className='mt3'>
+        <h4 className='ma0 mb2'>{t('troubleshootingTips.title')}</h4>
+        <ul className='ma0 pl3'>
+          <li>{t('troubleshootingTips.refresh')}</li>
+          <li>{t('troubleshootingTips.checkConnection')}</li>
+          <li>{t('troubleshootingTips.tryLater')}</li>
+          <li>{t('troubleshootingTips.checkCidSyntax')}</li>
+        </ul>
+      </div>
+      <div className='mt2'>
+        <a
+          href={`https://check.ipfs.network/?cid=${cid}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className='red-dark hover-red underline'
+        >
+          {t('checkIpfsNetwork')}
+        </a>
+    </div>
+    </>
+  )
+}
+
 export function IpldExploreErrorComponent ({ error }: IpldExploreErrorComponentProps): JSX.Element | null {
+  const { exploreState } = useExplore()
+  const { path } = exploreState
+  const [cid] = path?.split('/') ?? []
   const { t } = useTranslation('explore', { keyPrefix: 'errors' })
   if (error == null) return null
 
+  // more self service
   return (
-    <div className='bg-red white pa3 lh-copy'>
-      <div>{error.toString(t)}</div>
+    <div className="flex justify-center w-100 pa3">
+      <div className="bg-red-muted red-dark pa3 br2 lh-copy mw7">
+        <div>{error.toString(t)}</div>
+        <TroubleshootingTips cid={cid} />
+      </div>
     </div>
   )
 }

src/components/explore/IpldExploreErrorComponent.tsx

@@ -37,7 +37,8 @@
   "include": [
     "src/**/*",
     "dev/**/*",
-    "test/**/*"
+    "test/**/*",
+    "vite.config.ts"
   ],
   "exclude": [
     "src/**/*.stories.*",