feat: add sentry integration

Author: moshloop

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;

next.config.js

@@ -5,12 +5,15 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
 /**
  * @type {import('next').NextConfig}
  */
-const config = {
+let config = {
   productionBrowserSourceMaps: true,
   env: {
     // make the backend URL available to the frontend
     NEXT_PUBLIC_BACKEND_URL: process.env.BACKEND_URL,
-    NEXT_PUBLIC_ACCOUNTS_URL: "https://accounts.flanksource.com"
+    NEXT_PUBLIC_ACCOUNTS_URL: "https://accounts.flanksource.com",
+    NEXT_PUBLIC_SENTRY_HOST: "https://1db3b3bbf111cafee19c4e7827a4b601@o4508810638589952.ingest.de.sentry.io",
+    NEXT_PUBLIC_SENTRY_PROJECT_ID: "4508810640162896",
+    NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN || "https://1db3b3bbf111cafee19c4e7827a4b601@o4508810638589952.ingest.de.sentry.io/4508810640162896",
   },
   redirects: async () => {
     if (process.env.NEXT_PUBLIC_APP_DEPLOYMENT === "CANARY_CHECKER") {
@@ -83,8 +86,8 @@ const config = {
   // https://github.com/vercel/next.js/tree/canary/examples/with-docker#in-existing-projects
   ...(process.env.NEXT_STANDALONE_DEPLOYMENT === "true"
     ? {
-        output: "standalone"
-      }
+      output: "standalone"
+    }
     : {}),
   experimental: {
     // increase the default timeout for the proxy from 30s to 10m to allow for
@@ -96,4 +99,50 @@ const config = {
   transpilePackages: ["monaco-editor"]
 };
 
-module.exports = withBundleAnalyzer(config);
+config = withBundleAnalyzer(config);
+
+
+
+// Injected content via Sentry wizard below
+
+const { withSentryConfig } = require("@sentry/nextjs");
+
+module.exports = withSentryConfig(
+  config,
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    org: "flanksource",
+    project: "flanksource-ui",
+
+    // 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,
+    },
+
+    // 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: false,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+
+    automaticVercelMonitors: false,
+  }
+);
+