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

Author: george-hub331

public/locales/en/explore.json

@@ -70,6 +70,15 @@
   },
   "errors": {
     "BlockFetchTimeoutError": "Failed to fetch content in {timeout}s. Please refresh the page to retry or try a different CID.",
-    "checkIpfsNetwork": "Check content availability on IPFS Network"
+    "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"
+    }
   }
 }

src/components/explore/IpldExploreErrorComponent.tsx

@@ -1,33 +1,43 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { BlockFetchTimeoutError } from '../../lib/errors'
+import { useExplore } from '../../providers/explore'
 import type IpldExploreError from '../../lib/errors'
 
 export interface IpldExploreErrorComponentProps {
   error: IpldExploreError | null
 }
 
 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
 
-  const isBlockError = error instanceof BlockFetchTimeoutError
-
+  // more self service
   return (
     <div className='bg-red white pa3 lh-copy'>
       <div>{error.toString(t)}</div>
-      {isBlockError && (
+      {cid != null && <><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/#/ipfs/${error.cid ?? ''}`}
+            href={`https://check.ipfs.network/?cid=${cid}`}
             target="_blank"
             rel="noopener noreferrer"
             className='white underline hover-white'
           >
             {t('checkIpfsNetwork')}
           </a>
         </div>
-      )}
+      </>}
     </div>
   )
 }

src/lib/errors.ts

@@ -1,7 +1,7 @@
 import { type TFunction } from 'i18next'
 
 export default class IpldExploreError extends Error {
-  constructor (protected readonly options: Record<string, string | number>) {
+  constructor (private readonly options: Record<string, string | number>) {
     super()
     this.name = this.constructor.name
   }
@@ -19,10 +19,6 @@ export default class IpldExploreError extends Error {
   toString (t: TFunction<'translation', 'translation'>): string {
     return t(this.name, this.options)
   }
-
-  get cid (): string | undefined {
-    return this.options.cid as string | undefined
-  }
 }
 
 export class BlockFetchTimeoutError extends IpldExploreError {}