Add opt in sentry error tracking

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# Sentry Auth Token
+.sentryclirc

components/ErrorTrackingProvider.tsx

@@ -0,0 +1,30 @@
+import * as Sentry from '@sentry/nextjs'
+
+import { FC, ReactElement, useEffect } from 'react'
+import { useAccount } from 'wagmi'
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN
+
+type Props = {
+  children: ReactElement
+}
+
+const ErrorTrackingProvider: FC<Props> = ({ children }) => {
+  const { address } = useAccount()
+
+  useEffect(() => {
+    if (!SENTRY_DSN) {
+      return
+    }
+
+    if (address) {
+      Sentry.setUser({ id: address })
+    } else {
+      Sentry.setUser(null)
+    }
+  }, [address])
+
+  return children
+}
+
+export default ErrorTrackingProvider

next.config.mjs

@@ -1,3 +1,4 @@
+import { withSentryConfig } from '@sentry/nextjs'
 /**
  * @type {import('next').NextConfig}
  */

package.json

@@ -29,6 +29,7 @@
     "@radix-ui/react-tooltip": "^1.0.2",
     "@rainbow-me/rainbowkit": "0.12.2",
     "@reservoir0x/reservoir-kit-ui": "^0.16.6",
+    "@sentry/nextjs": "^7.53.1",
     "@types/uuid": "^9.0.1",
     "dayjs": "^1.11.6",
     "ethers": "^5.6.9",

pages/_app.tsx

@@ -2,6 +2,7 @@ import AnalyticsProvider, {
   initializeAnalytics,
 } from 'components/AnalyticsProvider'
 initializeAnalytics()
+import ErrorTrackingProvider from 'components/ErrorTrackingProvider'
 
 import { Inter } from '@next/font/google'
 import type { AppContext, AppProps } from 'next/app'
@@ -80,7 +81,9 @@ function AppWrapper(props: AppProps & { baseUrl: string }) {
       <WagmiConfig client={wagmiClient}>
         <ChainContextProvider>
           <AnalyticsProvider>
-            <MyApp {...props} />
+            <ErrorTrackingProvider>
+              <MyApp {...props} />
+            </ErrorTrackingProvider>
           </AnalyticsProvider>
         </ChainContextProvider>
       </WagmiConfig>

sentry.client.config.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs'
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    new Sentry.Replay({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+})

sentry.edge.config.ts

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs'
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+})

sentry.server.config.ts

@@ -0,0 +1,15 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs'
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+})