feat: sentry integration (#954)

* feat: add sentry WIP

* feat: update sentry init

* feat: remove unnecessary component

* feat: remove vercel cron option

* feat: update env variable names

* feat: explicitly silent mode

Author: olzhik11

frontend/app/error.tsx

@@ -1,23 +1,20 @@
-'use client'; // Error components must be Client Components
+"use client"; // Error components must be Client Components
 
-import Image from 'next/image';
-import Link from 'next/link';
+import * as Sentry from "@sentry/nextjs";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect } from "react";
 
-import icon from '@/assets/logo/icon.png';
+import icon from "@/assets/logo/icon.png";
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
 
-export default function Error({
-  error,
-  reset
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen">
-      <Link
-        href={'/projects'}
-        className="flex h-10 mb-8 items-center justify-center"
-      >
+      <Link href={"/projects"} className="flex h-10 mb-8 items-center justify-center">
         <Image alt="Laminar AI icon" src={icon} width={80} />
       </Link>
       <h1 className="mb-4 text-lg">Oops, something went wrong</h1>

frontend/instrumentation.ts

@@ -1,8 +1,13 @@
 // Yes, this file is called instrumentation.ts, but it's not actually used to instrument the app.
 // Apparently, this is the suggested way to run startup hooks in Next.js:
 // https://github.com/vercel/next.js/discussions/15341#discussioncomment-7091594
+import * as Sentry from "@sentry/nextjs";
 
 export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config.ts");
+  }
+
   // prevent this from running in the edge runtime for the second time
   if (process.env.NEXT_RUNTIME === "nodejs") {
     const { Feature, isFeatureEnabled } = await import("@/lib/features/features.ts");
@@ -61,10 +66,18 @@ export async function register() {
                 await clickhouseClient.exec({ query: statement });
               } catch (error) {
                 if ((error as { type: string }).type === "DUPLICATE_COLUMN") {
-                  console.warn("[WARNING] Failed to apply ClickHouse statement:", statement, "because column already exists");
+                  console.warn(
+                    "[WARNING] Failed to apply ClickHouse statement:",
+                    statement,
+                    "because column already exists"
+                  );
                   continue;
                 } else if ((error as { type: string }).type === "TABLE_ALREADY_EXISTS") {
-                  console.warn("[WARNING] Failed to apply ClickHouse statement:", statement, "because table already exists");
+                  console.warn(
+                    "[WARNING] Failed to apply ClickHouse statement:",
+                    statement,
+                    "because table already exists"
+                  );
                   continue;
                 } else {
                   throw error;
@@ -97,3 +110,5 @@ export async function register() {
     }
   }
 }
+
+export const onRequestError = Sentry.captureRequestError;

frontend/next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const path = require("path");
+const { withSentryConfig } = require("@sentry/nextjs");
 
 const nextConfig = {
   reactStrictMode: false,
@@ -76,4 +77,32 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+if (process.env.ENVIRONMENT === "PRODUCTION" && process.env.FRONTEND_SENTRY_DSN) {
+  module.exports = withSentryConfig(nextConfig, {
+    // For all available options, see:
+    // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+    org: process.env.SENTRY_ORG,
+    project: process.env.FRONTEND_SENTRY_PROJECT,
+
+    // Only print logs for uploading source maps in CI
+    silent: true,
+
+    // 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,
+  });
+} else {
+  module.exports = nextConfig;
+}

frontend/package.json

@@ -67,6 +67,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-email/components": "^0.3.3",
     "@react-email/tailwind": "^1.2.2",
+    "@sentry/nextjs": "^10.19.0",
     "@supabase/supabase-js": "2.49.4",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",