Merge pull request #84 from BigWhaleLabs/add-sentry

add sentry

.env.sample

@@ -3,4 +3,5 @@ VITE_ETH_RPC=https://eth.example.com/rpc
 VITE_KETL_ATTESTATION_CONTRACT_ADDRESS=000000000000000000000000000000000000000000
 VITE_DEV_KETL_ATTESTATION_CONTRACT_ADDRESS=000000000000000000000000000000000000000000
 VITE_VERIFY_URL=https://eth.example.com
-VITE_KETL_INVITES_BACKEND=https://eth.example.com
+VITE_KETL_INVITES_BACKEND=https://eth.example.com
+VITE_SENTRY_DSN=XXXXX

.gitignore

@@ -28,4 +28,6 @@ yarn-error.log*
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+# Sentry Config File
+.env.sentry-build-plugin

package.json

@@ -28,6 +28,8 @@
     "@big-whale-labs/ketl-attestation-token": "0.1.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@rollup/plugin-inject": "^5.0.3",
+    "@sentry/react": "^7.80.0",
+    "@sentry/vite-plugin": "^2.10.1",
     "@vitejs/plugin-react": "^3.1.0",
     "@zk-kit/incremental-merkle-tree": "^1.0.0",
     "assert-browserify": "^2.0.0",

src/helpers/env.ts

@@ -19,5 +19,6 @@ export default cleanEnv(import.meta.env, {
   VITE_KETL_INVITES_BACKEND: str({
     default: KETL_INVITES_BACKEND,
   }),
+  VITE_SENTRY_DSN: str(),
   VITE_VERIFY_URL: str({ default: VERIFY_URL }),
 })

src/helpers/handleError.ts

@@ -1,10 +1,21 @@
-export default function handleError(error: unknown) {
-  let output = ''
-  if (error instanceof Error) output = error.message
-  if (typeof error === 'string') output = error
+import Sentry from 'helpers/initSentry'
+import parseError from 'helpers/parseError'
 
-  if (output.includes('to BigInt') || output.includes('invalid BigInt'))
-    return 'Please provide a valid token'
-  if (output.includes('The leaf')) return "Looks like you're not invited"
-  return output
+export default function handleError({
+  e,
+  sendToSentry = true,
+}: {
+  e: unknown
+  sendToSentry?: boolean
+}) {
+  console.error('Handled error\n', e)
+
+  const message = parseError(e)
+  if (sendToSentry) {
+    if (e instanceof Error) {
+      Sentry.captureException(e)
+    } else {
+      Sentry.captureException(new Error(message, { cause: e }))
+    }
+  }
 }

src/helpers/initSentry.ts

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/react'
+import env from 'helpers/env'
+
+export function initSentry() {
+  Sentry.init({
+    dsn: env.VITE_SENTRY_DSN,
+    environment: process.env.NODE_ENV,
+    tracesSampleRate: 1.0,
+  })
+}
+
+export default Sentry

src/helpers/onCreateAttestationProofMessage.ts

@@ -4,6 +4,7 @@ import Messages from 'models/Messages'
 import ProofResultStatus from 'models/ProofResultStatus'
 import createAttestationInput from 'helpers/createAttestationInput'
 import generateAttestationProof from 'helpers/generateAttestationProof'
+import handleError from 'helpers/handleError'
 import isValidAttestationProofMessage from 'helpers/isValidAttestationProofMessage'
 import onProofProgress from 'helpers/onProofProgress'
 import postWebViewMessage from 'helpers/postWebViewMessage'
@@ -61,6 +62,7 @@ export default async function onCreateAttestationProofMessage(
         : `An error occurred while verification, please try again`,
       type: Messages.GetAttestationProof,
     })
+    handleError({ e })
     console.error(e)
   }
 }

src/helpers/onCreatePasswordProofMessage.ts

@@ -2,6 +2,7 @@ import GeneratorError from 'helpers/GeneratorError'
 import Message from 'models/Message'
 import Messages from 'models/Messages'
 import createPasswordProof from 'helpers/createPasswordProof'
+import handleError from 'helpers/handleError'
 import isValidPasswordProofMessage from 'helpers/isValidPasswordProofMessage'
 import onProofProgress from 'helpers/onProofProgress'
 import postWebViewMessage from 'helpers/postWebViewMessage'
@@ -30,6 +31,7 @@ export default async function onPasswordProofMessage(message: Message) {
         : `An error occurred while preparing data for registration, please try again`,
       type: Messages.GetPasswordProof,
     })
+    handleError({ e })
     console.error(e)
   }
 }

src/helpers/parseError.ts

@@ -0,0 +1,24 @@
+import { isAxiosError } from 'axios'
+
+interface MessageObject {
+  message: string
+}
+
+export function stringifyError(e: unknown) {
+  if (typeof e === 'string') return e
+  if (isAxiosError(e) && e.response?.data?.message)
+    return e.response?.data?.message
+  if (e instanceof Error || isMessageObject(e)) return e.message
+  return e
+}
+
+function isMessageObject(e: unknown): e is MessageObject {
+  return (e as MessageObject)?.message !== undefined
+}
+
+export default function parseError(e: unknown, fallbackError?: string) {
+  const result = stringifyError(e)
+  return typeof result === 'string'
+    ? result
+    : fallbackError || 'An unknown error occurred, check the logs'
+}

src/index.tsx

@@ -1,5 +1,7 @@
 import 'index.css'
+import { initSentry } from 'helpers/initSentry'
 import { render } from 'preact'
 import App from 'App'
 
+initSentry()
 render(<App />, document.getElementById('root') as Element)