🥅 chore: add sentry (#2048)

* 🥅 chore: add sentry modules

* Update package.json

next.config.mjs

@@ -1,5 +1,6 @@
 import nextPWA from '@ducanh2912/next-pwa';
 import analyzer from '@next/bundle-analyzer';
+import { withSentryConfig } from '@sentry/nextjs';
 
 const isProd = process.env.NODE_ENV === 'production';
 const buildWithDocker = process.env.DOCKER === 'true';
@@ -69,4 +70,49 @@ const withPWA = isProd
     })
   : noWrapper;
 
-export default withBundleAnalyzer(withPWA(nextConfig));
+const hasSentry = !!process.env.NEXT_PUBLIC_SENTRY_DSN;
+const withSentry =
+  isProd && hasSentry
+    ? (c) =>
+        withSentryConfig(
+          c,
+          {
+            // For all available options, see:
+            // https://github.com/getsentry/sentry-webpack-plugin#options
+
+            // Suppresses source map uploading logs during build
+            silent: true,
+            org: process.env.SENTRY_ORG,
+            project: process.env.SENTRY_PROJECT,
+          },
+          {
+            // 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,
+
+            // Transpiles SDK to be compatible with IE11 (increases bundle size)
+            transpileClientSDK: true,
+
+            // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers. (increases server load)
+            // 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.
+            // See the following for more information:
+            // https://docs.sentry.io/product/crons/
+            // https://vercel.com/docs/cron-jobs
+            automaticVercelMonitors: true,
+          },
+        )
+    : noWrapper;
+
+export default withBundleAnalyzer(withPWA(withSentry(nextConfig)));

package.json

@@ -94,6 +94,7 @@
     "@lobehub/tts": "latest",
     "@lobehub/ui": "^1.137.7",
     "@next/third-parties": "^14.1.4",
+    "@sentry/nextjs": "^7.105.0",
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.0.10",
     "ahooks": "^3.7.11",

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';
+
+if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+    integrations: [
+      Sentry.replayIntegration({
+        blockAllMedia: true,
+        // Additional Replay configuration goes in here, for example:
+        maskAllText: true,
+      }),
+    ],
+
+    replaysOnErrorSampleRate: 1,
+
+    // 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,
+
+    // Adjust this value in production, or use tracesSampler for greater control
+    tracesSampleRate: 1,
+  });
+}

sentry.edge.config.ts

@@ -0,0 +1,17 @@
+// 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';
+
+if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Adjust this value in production, or use tracesSampler for greater control
+    tracesSampleRate: 1,
+  });
+}

sentry.server.config.ts

@@ -0,0 +1,19 @@
+// 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';
+
+if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Adjust this value in production, or use tracesSampler for greater control
+    tracesSampleRate: 1,
+
+    // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+    // spotlight: process.env.NODE_ENV === 'development',
+  });
+}