fix: capture some errors we were logging to console (#188)

We're losing visibility into user errors because we are catching and
logging Errors to the console - replace a bunch of places where we do
this with a new Sentry logging function that logs to the error console
and then captures the error in Sentry.

Author: travis

src/app/migration/create/page.tsx

@@ -9,6 +9,7 @@ import { DIDKey, useW3 } from '@w3ui/react'
 import { DidIcon } from '@/components/DidIcon'
 import { MigrationConfiguration, DataSourceID } from '@/lib/migrations/api'
 import { dataSources } from '@/app/migration/data-sources'
+import { logAndCaptureError } from '@/sentry'
 
 interface WizardProps {
   config: Partial<MigrationConfiguration>
@@ -91,7 +92,7 @@ function AddSourceToken ({ config, onNext, onPrev }: WizardProps) {
     try {
       await ds.source.checkToken(token)
     } catch (err: any) {
-      console.error(err)
+      logAndCaptureError(err)
       return setError(`Error using token: ${err.message}`)
     } finally {
       setChecking(false)

src/app/settings/page.tsx

@@ -10,6 +10,7 @@ import { GB, TB, filesize } from '@/lib'
 import DefaultLoader from '@/components/Loader'
 import { RefcodeLink, ReferralsList, RefcodeCreator } from '../referrals/page'
 import { useReferrals } from '@/lib/referrals/hooks'
+import { logAndCaptureError } from '@/sentry'
 
 const Plans: Record<`did:${string}`, { name: string, limit: number }> = {
   'did:web:starter.web3.storage': { name: 'Starter', limit: 5 * GB },
@@ -51,13 +52,13 @@ export default function SettingsPage (): JSX.Element {
             }
           } catch (err) {
             // TODO: figure out why usage/report cannot be used on old spaces 
-            console.error(err)
+            logAndCaptureError(err)
           }
         }
       }
       return usage
     },
-    onError: err => console.error(err.message, err.cause)
+    onError: logAndCaptureError
   })
 
   const product = plan?.product

src/app/space/[did]/page.tsx

@@ -6,6 +6,7 @@ import useSWR from 'swr'
 import { useRouter, usePathname } from 'next/navigation'
 import { createUploadsListKey } from '@/cache'
 import { Breadcrumbs } from '@/components/Breadcrumbs'
+import { logAndCaptureError } from '@/sentry'
 
 const pageSize = 15
 
@@ -39,7 +40,7 @@ export default function Page ({ params, searchParams }: PageProps): JSX.Element
         size: pageSize
       })
     },
-    onError: err => console.error(err.message, err.cause),
+    onError: logAndCaptureError,
     keepPreviousData: true
   })
 

src/app/space/[did]/root/[cid]/page.tsx

@@ -13,6 +13,7 @@ import CopyIcon from '@/components/CopyIcon'
 import { Breadcrumbs } from '@/components/Breadcrumbs'
 import { useRouter } from 'next/navigation'
 import { createUploadsListKey } from '@/cache'
+import { logAndCaptureError } from '@/sentry'
 import { ipfsGatewayURL } from '@/components/services'
 
 interface PageProps {
@@ -39,7 +40,7 @@ export default function ItemPage ({ params }: PageProps): JSX.Element {
 
       return await client.capability.upload.get(root)
     },
-    onError: err => console.error(err.message, err.cause)
+    onError: logAndCaptureError
   })
 
   const [isRemoveConfirmModalOpen, setRemoveConfirmModalOpen] = useState(false)

src/app/space/[did]/root/[cid]/shard/[shard]/page.tsx

@@ -18,6 +18,7 @@ import ExpandIcon from '@/components/ExpandIcon'
 import { useState } from 'react'
 import AggregateIcon from '@/components/AggregateIcon'
 import PieceIcon from '@/components/PieceIcon'
+import { logAndCaptureError } from '@/sentry'
 
 type ProofStyle = 'mini'|'midi'|'maxi'
 
@@ -67,7 +68,7 @@ export default function ItemPage ({ params }: PageProps): JSX.Element {
         }
       }
     },
-    onError: err => console.error(err.message, err.cause)
+    onError: logAndCaptureError
   })
 
   const claimKey = `/assert/equals?content=${shard}`
@@ -80,7 +81,7 @@ export default function ItemPage ({ params }: PageProps): JSX.Element {
         }
       }
     },
-    onError: err => console.error(err.message, err.cause)
+    onError: logAndCaptureError
   })
 
   const filecoinInfoKey = `/filecoin/info?piece=${claim.data?.equals}`
@@ -99,7 +100,7 @@ export default function ItemPage ({ params }: PageProps): JSX.Element {
 
       return out.ok
     },
-    onError: err => console.error(err.message, err.cause)
+    onError: logAndCaptureError
   })
 
   const [proofStyle, setProofStyle] = useState<ProofStyle>('mini')

src/components/MigrationsProvider.tsx

@@ -6,6 +6,7 @@ import { useW3 } from '@w3ui/react'
 import * as Migrations from '@/lib/migrations'
 import { MigrationsStorage } from '@/lib/migrations/store'
 import { serviceConnection } from './services'
+import { logAndCaptureError } from '@/sentry'
 
 const MAX_LOG_LINES = 1000
 
@@ -126,7 +127,7 @@ export function Provider ({ children }: ProviderProps): ReactNode {
         setMigrations(() => migrationsStore.load())
       },
       onError: async (err, upload, shard) => {
-        console.error(err)
+        logAndCaptureError(err)
         log(id, `failed migration ${upload.root}${shard ? ` (shard: ${shard.link})` : ''}: ${err.stack}`)
         const migration = migrationsStore.read(id)
         migration.progress = migration.progress ?? await initProgress()

src/components/SpaceCreator.tsx

@@ -13,6 +13,7 @@ import * as UcantoClient from '@ucanto/client'
 import { HTTP } from '@ucanto/transport'
 import * as CAR from '@ucanto/transport/car'
 import { gatewayHost } from './services'
+import { logAndCaptureError } from '@/sentry'
 
 export function SpaceCreatorCreating(): JSX.Element {
   return (
@@ -99,7 +100,7 @@ export function SpaceCreatorForm({
       resetForm()
     } catch (error) {
       /* eslint-disable-next-line no-console */
-      console.error(error)
+      logAndCaptureError(error)
       throw new Error('failed to create space', { cause: error })
     }
   }

src/components/Uploader.tsx

@@ -16,6 +16,7 @@ import { ipfsGatewayURL } from '../components/services'
 import { useEffect, useState } from 'react'
 import { RadioGroup } from '@headlessui/react'
 import { H2 } from './Text'
+import { logAndCaptureError } from '@/sentry'
 
 function StatusLoader ({ progressStatus }: { progressStatus: ProgressStatus }) {
   const { total, loaded, lengthComputable } = progressStatus
@@ -66,7 +67,7 @@ export const Errored = ({ error }: { error: any }): JSX.Element => {
   useEffect(() => {
     if (error != null) {
       // eslint-disable-next-line no-console
-      console.error('Uploader Error:', error)
+      logAndCaptureError(new Error('Uploader Error:', { cause: error }))
     }
   }, [error])
 
@@ -256,7 +257,7 @@ const UploaderContents = (): JSX.Element => {
           </div>
           <div className='p-4'>
             <button type='submit' className='inline-block bg-hot-red border border-hot-red hover:bg-white hover:text-hot-red font-epilogue text-white uppercase text-sm px-6 py-2 rounded-full whitespace-nowrap' disabled={file === undefined}>
-              <CloudArrowUpIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Start Upload
+              <CloudArrowUpIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{ marginTop: -4 }} /> Start Upload
             </button>
           </div>
         </>

src/hooks.tsx

@@ -1,5 +1,6 @@
 import { Account, DID, PlanGetSuccess, PlanSetSuccess, PlanSetFailure, Result } from '@w3ui/react'
 import useSWR, { SWRResponse, useSWRConfig } from 'swr'
+import { logAndCaptureError } from './sentry'
 
 /**
  * calculate the cache key for a plan's account
@@ -18,7 +19,7 @@ export const usePlan = (account: Account) => {
       if (result.error) throw new Error('getting plan', { cause: result.error })
       return result.ok
     },
-    onError: err => console.error(err.message, err.cause)
+    onError: logAndCaptureError
   })
   // @ts-ignore it's important to assign this into the existing object
   // to avoid calling the getters in SWRResponse when copying values over -

src/lib/migrations/nft-storage.ts

@@ -6,6 +6,7 @@ import { CarBlockIterator } from '@ipld/car'
 import { LinkIndexer } from 'linkdex'
 import { DataSourceConfiguration, Shard, Upload } from './api'
 import { carCode } from './constants'
+import { logAndCaptureError } from '@/sentry'
 
 export const id = 'classic.nft.storage'
 
@@ -118,9 +119,9 @@ class Reader {
               }
             }
           } catch (err) {
-            console.error(`failed to read content claims for PSA item: ${root}`, err)
+            logAndCaptureError(new Error(`failed to read content claims for PSA item: ${root}`, { cause: err }))
           }
-        } 
+        }
 
         const shards: Shard[] = []
         for (const p of parts) {
@@ -163,7 +164,7 @@ class Reader {
             const link = Link.create(carCode, await sha256.digest(bytes))
             shards.push({ link, size: async () => bytes.length, bytes: async () => bytes })
           } catch (err) {
-            console.error(`failed to download CAR for item: ${root}`, err)
+            logAndCaptureError(new Error(`failed to download CAR for item: ${root}`, {cause: err}))
           }
         }
 
@@ -191,7 +192,7 @@ async function * paginator (fn: (service: Service, opts: ListOptions) => Promise
   // Iterate through next pages
   while (body && body.value.length) {
     // Get before timestamp with less 1ms
-    const before = (new Date((new Date(body.value[body.value.length-1].created)).getTime() - 1)).toISOString()
+    const before = (new Date((new Date(body.value[body.value.length - 1].created)).getTime() - 1)).toISOString()
     res = await fn(service, { ...opts, before })
     body = await res.json()
     yield body

src/lib/migrations/store.ts

@@ -1,5 +1,6 @@
 import * as dagJSON from '@ipld/dag-json'
 import { Migration, MigrationConfiguration, MigrationID } from './api'
+import { logAndCaptureError } from '@/sentry'
 
 export class MigrationsStorage {
   load () {
@@ -13,7 +14,7 @@ export class MigrationsStorage {
         const migration: Migration = dagJSON.parse(localStorage.getItem(`migration.${id}`) ?? '')
         migrations.push(migration)
       } catch (err) {
-        console.error(`failed to load migration: ${id}`, err)
+        logAndCaptureError(new Error(`failed to load migration: ${id}`, {cause: err}))
       }
     }
     return migrations

src/lib/migrations/web3-storage-psa.ts

@@ -5,6 +5,7 @@ import { DataSourceConfiguration, Shard, Upload } from './api'
 import * as Gateway from './gateway'
 import { Result, Failure } from '@ucanto/interface'
 import { CARLink } from '@w3ui/react'
+import { logAndCaptureError } from '@/sentry'
 
 export const id = 'psa.old.web3.storage'
 
@@ -98,7 +99,7 @@ class Reader {
             }
           })
         } catch (err) {
-          console.error(`determining CAR hash for root: ${root}`, err)
+          logAndCaptureError(new Error(`determining CAR hash for root: ${root}`, {cause: err}))
         }
 
         // Add a synthetic shard that is the entire DAG.
@@ -108,7 +109,7 @@ class Reader {
             const shard = await Gateway.fetchCAR(root)
             shards.push(shard)
           } catch (err) {
-            console.error(`downloading CAR for root: ${root}`, err)
+            logAndCaptureError(new Error(`downloading CAR for root: ${root}`, {cause: err}))
           }
         }
 

src/lib/migrations/web3-storage.ts

@@ -1,11 +1,8 @@
 import { Web3Storage } from 'web3.storage'
 import * as Link from 'multiformats/link'
-import { sha256 } from 'multiformats/hashes/sha2'
-import { CarBlockIterator } from '@ipld/car'
-import { LinkIndexer } from 'linkdex'
 import { DataSourceConfiguration, Shard, Upload } from './api'
-import { carCode } from './constants'
 import { fetchCAR } from './gateway'
+import { logAndCaptureError } from '@/sentry'
 
 export const id = 'old.web3.storage'
 
@@ -80,7 +77,7 @@ class Reader {
           const shard = await fetchCAR(root)
           shards.push(shard)
         } catch (err) {
-          console.error(`failed to download CAR for item: ${root}`, err)
+          logAndCaptureError(new Error(`failed to download CAR for item: ${root}`, {cause: err}))
         }
       }
 

src/sentry.ts

@@ -0,0 +1,12 @@
+
+import * as Sentry from '@sentry/nextjs'
+
+/**
+ * Log to the error console and capture the error in Sentry.
+ * 
+ * @param err the error - typed as unknown to match catch(err)
+ */
+export function logAndCaptureError (err: unknown) {
+  console.error(err)
+  Sentry.captureException(err)
+}

src/share.tsx

@@ -10,6 +10,7 @@ import Tooltip from './components/Tooltip'
 import { ArrowDownOnSquareStackIcon, CloudArrowDownIcon, PaperAirplaneIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
 import * as DIDMailTo from '@web3-storage/did-mailto'
 import { DID } from '@ucanto/core'
+import { logAndCaptureError } from './sentry'
 
 function Header(props: PropsWithChildren): JSX.Element {
   return (
@@ -223,14 +224,14 @@ export function ImportSpace() {
       }
       delegation = res.ok
     } catch (err) {
-      console.error(err)
+      logAndCaptureError(err)
       return
     }
     try {
       await client.addSpace(delegation)
       setProof(delegation)
     } catch (err) {
-      console.error(err)
+      logAndCaptureError(err)
     }
   }