build(apps/web): enabled client code Sentry source maps uploading. (calcom#21108)

Co-authored-by: Omar López <zomars@me.com>

Author: zhyd1997

.env.example

@@ -159,11 +159,12 @@ SENDGRID_EMAIL=
 NEXT_PUBLIC_SENDGRID_SENDER_NAME=
 
 # Sentry
+SENTRY_ORG=
+SENTRY_PROJECT=
+SENTRY_AUTH_TOKEN=
 # Used for capturing exceptions and logging messages
 NEXT_PUBLIC_SENTRY_DSN=
 SENTRY_DEBUG=
-SENTRY_DISABLE_CLIENT_SOURCE_MAPS=
-SENTRY_DISABLE_SERVER_SOURCE_MAPS=
 SENTRY_MAX_SPANS=
 SENTRY_TRACES_SAMPLE_RATE=
 
@@ -363,9 +364,6 @@ E2E_TEST_OIDC_USER_PASSWORD=
 
 # ***********************************************************************************************************
 
-# disable setry server source maps
-SENTRY_DISABLE_SERVER_WEBPACK_PLUGIN=1
-
 # api v2
 NEXT_PUBLIC_API_V2_URL="http://localhost:5555/api/v2"
 

apps/web/app/api/version/route.ts

@@ -1,9 +1,9 @@
 import { defaultResponderForAppDir } from "app/api/defaultResponderForAppDir";
 import { NextResponse } from "next/server";
-import * as pjson from "package.json";
+import packageJson from "package.json";
 
 async function getHandler() {
-  return NextResponse.json({ version: pjson.version });
+  return NextResponse.json({ version: packageJson.version });
 }
 
 export const GET = defaultResponderForAppDir(getHandler);

apps/web/instrumentation-client.ts

@@ -0,0 +1,27 @@
+// This file configures the initialization of Sentry on the client.
+// The added config 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: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Add optional integrations for additional features
+  integrations: [Sentry.replayIntegration()],
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Define how likely Replay events are sampled.
+  // 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,
+
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

apps/web/instrumentation.ts

@@ -1,3 +1,5 @@
+import * as Sentry from "@sentry/nextjs";
+
 export async function register() {
   if (process.env.NEXT_PUBLIC_SENTRY_DSN && process.env.NEXT_RUNTIME === "nodejs") {
     await import("./sentry.server.config");
@@ -7,3 +9,5 @@ export async function register() {
     await import("./sentry.edge.config");
   }
 }
+
+export const onRequestError = Sentry.captureRequestError;

apps/web/modules/maintenance/maintenance-view.tsx

@@ -9,7 +9,7 @@ export default function MaintenancePage() {
   return (
     <div className="bg-subtle flex h-screen">
       <div className="bg-default m-auto rounded-md p-10 text-right ltr:text-left">
-        <h1 className="text-emphasis text-2xl font-medium">{t("down_for_maintenance")}</h1>
+        <h1 className="text-emphasis text-2xl font-medium">{t("under_maintenance")}</h1>
         <p className="text-default mb-6 mt-4 max-w-2xl text-sm">{t("maintenance_message")}</p>
         <Button href={`${WEBSITE_URL}/support`}>{t("contact_support")}</Button>
       </div>

apps/web/next.config.js

@@ -1,7 +1,6 @@
 require("dotenv").config({ path: "../../.env" });
 const englishTranslation = require("./public/static/locales/en/common.json");
 const { withAxiom } = require("next-axiom");
-const { withSentryConfig } = require("@sentry/nextjs");
 const { version } = require("./package.json");
 const {
   i18n: { locales },
@@ -188,9 +187,8 @@ const nextConfig = {
   experimental: {
     // externalize server-side node_modules with size > 1mb, to improve dev mode performance/RAM usage
     optimizePackageImports: ["@calcom/ui"],
-    turbo: {},
   },
-  productionBrowserSourceMaps: process.env.SENTRY_DISABLE_CLIENT_SOURCE_MAPS === "0",
+  productionBrowserSourceMaps: true,
   /* We already do type check on GH actions */
   typescript: {
     ignoreBuildErrors: !!process.env.CI,
@@ -226,10 +224,6 @@ const nextConfig = {
   },
   webpack: (config, { webpack, buildId, isServer }) => {
     if (isServer) {
-      if (process.env.SENTRY_DISABLE_SERVER_SOURCE_MAPS === "1") {
-        config.devtool = false;
-      }
-
       // Module not found fix @see https://github.com/boxyhq/jackson/issues/1535#issuecomment-1704381612
       config.plugins.push(
         new webpack.IgnorePlugin({
@@ -691,19 +685,4 @@ const nextConfig = {
   },
 };
 
-if (!!process.env.NEXT_PUBLIC_SENTRY_DSN) {
-  plugins.push((nextConfig) =>
-    withSentryConfig(nextConfig, {
-      autoInstrumentServerFunctions: false,
-      hideSourceMaps: true,
-      // disable source map generation for the server code
-      disableServerWebpackPlugin: !!process.env.SENTRY_DISABLE_SERVER_WEBPACK_PLUGIN,
-      silent: false,
-      sourcemaps: {
-        disable: process.env.SENTRY_DISABLE_SERVER_SOURCE_MAPS === "1",
-      },
-    })
-  );
-}
-
 module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);

apps/web/package.json

@@ -14,8 +14,9 @@
     "test-codegen": "yarn playwright codegen http://localhost:3000",
     "type-check": "tsc --pretty --noEmit",
     "type-check:ci": "tsc-absolute --pretty --noEmit",
+    "sentry:release": "NODE_OPTIONS='--max-old-space-size=6144' node scripts/create-sentry-release.js",
     "copy-static": "node scripts/copy-app-store-static.js",
-    "build": "yarn copy-static && next build",
+    "build": "yarn copy-static && next build && yarn sentry:release",
     "start": "next start",
     "lint": "eslint . --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
@@ -70,7 +71,7 @@
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-toggle-group": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
-    "@sentry/nextjs": "^9.8.0",
+    "@sentry/nextjs": "^9.15.0",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^5.17.15",

apps/web/public/static/locales/en/common.json

@@ -3141,7 +3141,6 @@
   "user_team": "User/Team",
   "client_id_copied": "Client ID copied!",
   "client_secret_copied": "Client secret copied!",
-  "down_for_maintenance": "Down for maintenance",
   "maintenance_message": "The Cal.com team are performing scheduled maintenance. If you have any questions, please contact support.",
   "your_payment_failed": "Your payment failed",
   "payment_successful": "Payment successful!",

apps/web/scripts/create-sentry-release.js

@@ -0,0 +1,43 @@
+const { execSync } = require("child_process");
+
+const CLIENT_FILES_PATH = ".next/static/chunks";
+
+try {
+  // Continue if required any env vars are not set
+  const requiredEnvVars = ["SENTRY_AUTH_TOKEN", "SENTRY_ORG", "SENTRY_PROJECT"];
+  const missingEnvVars = requiredEnvVars.filter((envVar) => !process.env[envVar]);
+  if (missingEnvVars.length > 0) {
+    console.log(
+      `Skipping release creation as required environment variables are not set: ${missingEnvVars.join(", ")}`
+    );
+    process.exit(0);
+  }
+
+  const release = execSync("git rev-parse HEAD").toString().trim();
+
+  // Add release
+  execSync(`sentry-cli releases new ${release}`, { stdio: "inherit" });
+
+  // Add git commits
+  execSync(`sentry-cli releases set-commits ${release} --auto`, {
+    stdio: "inherit",
+  });
+
+  // Inject Debug IDs
+  execSync(`sentry-cli sourcemaps inject ${CLIENT_FILES_PATH}`, { stdio: "inherit" });
+
+  // Upload with release flag
+  execSync(
+    `sentry-cli sourcemaps upload ${CLIENT_FILES_PATH} --validate --ext=js --ext=map --release=${release}`,
+    {
+      stdio: "inherit",
+      env: process.env,
+    }
+  );
+
+  // Finalize the release
+  execSync(`sentry-cli releases finalize ${release}`, { stdio: "inherit" });
+} catch (err) {
+  console.error("Sentry cli execution failed:", err);
+  process.exit(1);
+}