feat: implement Sentry

Author: mgrabina

.cursor/mcp.json

@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "Sentry": {
+      "url": "https://mcp.sentry.dev/mcp/avara-ex/aave-v3"
+    }
+  }
+}

.gitignore

@@ -48,3 +48,6 @@ package-lock.json
 .idea
 .vscode
 .env.development
+
+# Sentry Config File
+.env.sentry-build-plugin

next.config.js

@@ -1,3 +1,5 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
 // eslint-disable-next-line
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
@@ -8,53 +10,86 @@ if (process.env.NEXT_PUBLIC_ENABLE_GOVERNANCE === 'true') pageExtensions.push('g
 if (process.env.NEXT_PUBLIC_ENABLE_STAKING === 'true') pageExtensions.push('staking.tsx');
 
 /** @type {import('next').NextConfig} */
-module.exports = withBundleAnalyzer({
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/i,
-      issuer: /\.[jt]sx?$/,
-      use: [
-        {
-          loader: '@svgr/webpack',
-          options: {
-            svgoConfig: {
-              plugins: ['prefixIds'],
+module.exports = withSentryConfig(
+  withBundleAnalyzer({
+    webpack(config) {
+      config.module.rules.push({
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              svgoConfig: {
+                plugins: ['prefixIds'],
+              },
             },
           },
-        },
-      ],
-    });
-    config.experiments = {
-      topLevelAwait: true,
-      layers: true, // added for next api routes rpc proxy
-    };
-    config.resolve.fallback = { fs: false, net: false, tls: false };
-    return config;
-  },
-  reactStrictMode: true,
-  // assetPrefix: "./",
-  trailingSlash: true,
-  pageExtensions,
-  // NOTE: Needed for SAFE testing locally
-  // async headers() {
-  //   return [
-  //     {
-  //       source: '/manifest.json',
-  //       headers: [
-  //         {
-  //           key: 'Access-Control-Allow-Origin',
-  //           value: '*',
-  //         },
-  //         {
-  //           key: 'Access-Control-Allow-Methods',
-  //           value: 'GET',
-  //         },
-  //         {
-  //           key: 'Access-Control-Allow-Headers',
-  //           value: 'X-Requested-With, content-type, Authorization',
-  //         },
-  //       ],
-  //     },
-  //   ];
-  // },
-});
+        ],
+      });
+      config.experiments = {
+        topLevelAwait: true,
+        layers: true, // added for next api routes rpc proxy
+      };
+      config.resolve.fallback = { fs: false, net: false, tls: false };
+      return config;
+    },
+    reactStrictMode: true,
+    // assetPrefix: "./",
+    trailingSlash: true,
+    pageExtensions,
+    // NOTE: Needed for SAFE testing locally
+    // async headers() {
+    //   return [
+    //     {
+    //       source: '/manifest.json',
+    //       headers: [
+    //         {
+    //           key: 'Access-Control-Allow-Origin',
+    //           value: '*',
+    //         },
+    //         {
+    //           key: 'Access-Control-Allow-Methods',
+    //           value: 'GET',
+    //         },
+    //         {
+    //           key: 'Access-Control-Allow-Headers',
+    //           value: 'X-Requested-With, content-type, Authorization',
+    //         },
+    //       ],
+    //     },
+    //   ];
+    // },
+  }),
+  {
+    // For all available options, see:
+    // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+    org: 'avara-ex',
+    project: 'aave-v3',
+
+    // 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,
+
+    // 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',
+
+    // 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,
+  }
+);

package.json

@@ -55,6 +55,7 @@
     "@paraswap/sdk": "6.10.0",
     "@safe-global/safe-apps-provider": "^0.18.4",
     "@safe-global/safe-apps-sdk": "^9.1.0",
+    "@sentry/nextjs": "7.120.4",
     "@tanstack/react-query": "^5.62.8",
     "@visx/annotation": "^3.3.0",
     "@visx/axis": "^2.14.0",
@@ -159,4 +160,4 @@
     "budgetPercentIncreaseRed": 20,
     "showDetails": true
   }
-}
+}

pages/_error.page.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/nextjs';
 import type { NextPageContext } from 'next';
 import Error from 'next/error';
 
@@ -9,8 +10,11 @@ function ErrorPage({ statusCode }: ErrorPageProps) {
   return <Error statusCode={statusCode} />;
 }
 
-ErrorPage.getInitialProps = (ctx: NextPageContext) => {
+ErrorPage.getInitialProps = async (ctx: NextPageContext) => {
   const { res, err } = ctx;
+
+  await Sentry.captureUnderscoreErrorException(ctx);
+
   // Inspect the status code and show the given template based off of it
   // Default to 404 page
   const statusCode = res ? res.statusCode : err ? err.statusCode : 404;

pages/api/sentry-example-api.ts

@@ -0,0 +1,16 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+// Custom error class for Sentry testing
+class SentryExampleAPIError extends Error {
+  constructor(message: string | undefined) {
+    super(message);
+    this.name = 'SentryExampleAPIError';
+  }
+}
+// A faulty API route to test Sentry's error monitoring
+export default function handler(_req: NextApiRequest, res: NextApiResponse) {
+  throw new SentryExampleAPIError(
+    'This error is raised on the backend called by the example page.'
+  );
+  res.status(200).json({ name: 'John Doe' });
+}