chore: add sentry to appkit demo (#3474)

Co-authored-by: tomiir <[email protected]>
reown-com · Dec 17, 2024 · 8622237 · 8622237
1 parent fdc9132
commit 8622237
Show file tree

Hide file tree

Showing 8 changed files with 1,592 additions and 18 deletions.
diff --git a/apps/builder/app/global-error.tsx b/apps/builder/app/global-error.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import * as Sentry from '@sentry/nextjs'
+import NextError from 'next/error'
+import { useEffect } from 'react'
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error)
+  }, [error])
+
+  return (
+    <html>
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  )
+}
diff --git a/apps/builder/instrumentation.ts b/apps/builder/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs'
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./sentry.server.config')
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./sentry.edge.config')
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError
diff --git a/apps/builder/next.config.mjs b/apps/builder/next.config.mjs
@@ -1,3 +1,5 @@
+import { withSentryConfig } from '@sentry/nextjs'
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   eslint: {
@@ -10,4 +12,42 @@ const nextConfig = {
   }
 }
 
-export default nextConfig
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  org: 'walletconnect',
+  project: 'appkit-demo',
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Automatically annotate React components to show their full name in breadcrumbs and session replay
+  reactComponentAnnotation: {
+    enabled: true
+  },
+
+  // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  // tunnelRoute: "/monitoring",
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true
+})
diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -28,6 +28,7 @@
     "@reown/appkit-adapter-wagmi": "workspace:*",
     "@reown/appkit-core": "workspace:*",
     "@reown/appkit-scaffold-ui": "workspace:*",
+    "@sentry/nextjs": "8.45.1",
     "@tanstack/react-query": "5.56.2",
     "@wagmi/core": "2.13.8",
     "class-variance-authority": "0.7.0",

diff --git a/apps/builder/sentry.client.config.ts b/apps/builder/sentry.client.config.ts
@@ -0,0 +1,18 @@
+// 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: 'https://[email protected]/4508478682365952',
+
+  // Define how likely traces are sampled. 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,
+
+  // Only enable Sentry in production
+  enabled: process.env.NODE_ENV === 'production'
+})
diff --git a/apps/builder/sentry.edge.config.ts b/apps/builder/sentry.edge.config.ts
@@ -0,0 +1,19 @@
+// 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: 'https://[email protected]/4508478682365952',
+
+  // Define how likely traces are sampled. 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,
+
+  // Only enable Sentry in production
+  enabled: process.env.NODE_ENV === 'production'
+})
diff --git a/apps/builder/sentry.server.config.ts b/apps/builder/sentry.server.config.ts
@@ -0,0 +1,18 @@
+// 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: 'https://[email protected]/4508478682365952',
+
+  // Define how likely traces are sampled. 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,
+
+  // Only enable Sentry in production
+  enabled: process.env.NODE_ENV === 'production'
+})