feature/sentry.io for web (#5326)

* Initial commits that install sentry.io on web app

* Updates yarn.lock

* Update yarn.lock

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

apps/web/.gitignore

@@ -67,4 +67,6 @@ tsconfig.tsbuildinfo
 public/embed
 
 # Copied app-store images
-public/app-store
+public/app-store
+# Sentry
+.sentryclirc

apps/web/next.config.js

@@ -1,5 +1,6 @@
 require("dotenv").config({ path: "../../.env" });
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const { withSentryConfig } = require("@sentry/nextjs");
 
 const withTM = require("next-transpile-modules")([
   "@calcom/app-store",
@@ -228,6 +229,18 @@ const nextConfig = {
 
     return redirects;
   },
+  sentry: {
+    hideSourceMaps: true,
+  },
 };
 
-module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
+const sentryWebpackPluginOptions = {
+  silent: true, // Suppresses all logs
+};
+
+const moduleExports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
+
+// Sentry should be the last thing to export to catch everything right
+module.exports = process.env.NEXT_PUBLIC_SENTRY_DSN
+  ? withSentryConfig(moduleExports, sentryWebpackPluginOptions)
+  : moduleExports;

apps/web/package.json

@@ -56,6 +56,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": "^7.17.3",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",

apps/web/pages/_error.tsx

@@ -2,6 +2,7 @@
  * Typescript class based component for custom-error
  * @link https://nextjs.org/docs/advanced-features/custom-error-page
  */
+import * as Sentry from "@sentry/nextjs";
 import { NextPage, NextPageContext } from "next";
 import NextError, { ErrorProps } from "next/error";
 import React from "react";
@@ -46,7 +47,9 @@ const CustomError: NextPage<CustomErrorProps> = (props) => {
  * Partially adapted from the example in
  * https://github.com/vercel/next.js/tree/canary/examples/with-sentry
  */
-CustomError.getInitialProps = async ({ res, err, asPath }: AugmentedNextPageContext) => {
+CustomError.getInitialProps = async (ctx: AugmentedNextPageContext) => {
+  const { res, err, asPath } = ctx;
+  await Sentry.captureUnderscoreErrorException(ctx);
   const errorInitialProps = (await NextError.getInitialProps({
     res,
     err,

apps/web/sentry.client.config.js

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

apps/web/sentry.properties

@@ -0,0 +1,3 @@
+defaults.url=https://sentry.io/
+defaults.org=calcom
+defaults.project=cal

apps/web/sentry.server.config.js

@@ -0,0 +1,16 @@
+// 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";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});