feat(web): add sentry

apps/web/next.config.mjs

@@ -1,9 +1,10 @@
-import { remarkCodeHike } from "@code-hike/mdx";
 // @ts-check
+import { remarkCodeHike } from "@code-hike/mdx";
 import bundleAnalzyer from "@next/bundle-analyzer";
 import mdx from "@next/mdx";
+import { withSentryConfig } from "@sentry/nextjs";
 import { withPlausibleProxy } from "next-plausible";
-import theme from "shiki/themes/poimandres.json" assert { type: "json" };
+import theme from "shiki/themes/poimandres.json" with { type: "json" };
 
 const withMDX = mdx({
   extension: /\.mdx?$/,
@@ -65,9 +66,50 @@ const config = {
   },
 };
 
-export default withPlausibleProxy()(
-  withBundleAnalyzer(
-    // @ts-ignore
-    withMDX(config)
-  )
+console.log({
+  "process.env.SENTRY_ORG": process.env.SENTRY_ORG,
+  "process.env.SENTRY_PROJECT": process.env.SENTRY_PROJECT,
+
+})
+
+const withSentry =
+  process.env.SENTRY_ORG && process.env.SENTRY_PROJECT
+    ? withSentryConfig
+    : (/** @type {any} */ config) => config;
+
+export default withSentry(
+  withPlausibleProxy()(
+    withBundleAnalyzer(
+      // @ts-ignore
+      withMDX(config)
+    )
+  ),
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+    org: process.env.SENTRY_ORG,
+    project: process.env.SENTRY_PROJECT,
+    sentryUrl: "https://sentry.io/",
+
+    // 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,
+
+    // 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: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+  }
 );

apps/web/package.json

@@ -61,6 +61,7 @@
     "@react-email/render": "0.0.5",
     "@react-email/section": "0.0.4",
     "@react-email/text": "0.0.3",
+    "@sentry/nextjs": "^8",
     "@stripe/stripe-js": "^1.52.1",
     "@tanstack/react-query": "^4.29.1",
     "@tiptap/extension-bubble-menu": "2.4.0",

apps/web/sentry.client.config.ts

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

apps/web/sentry.edge.config.ts

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

apps/web/sentry.server.config.ts

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

apps/web/src/instrumentation.ts

@@ -7,6 +7,15 @@ export async function register() {
       import("server/queue/event"),
     ]);
 
+    if (process.env.NEXT_RUNTIME === "nodejs") {
+      await import("../sentry.server.config");
+    }
+
+    // biome-ignore lint/suspicious/noExplicitAny: typings are off
+    if (process.env.NEXT_RUNTIME === ("edge" as any)) {
+      await import("../sentry.edge.config");
+    }
+
     const gracefulShutdown = async (signal: string) => {
       console.log(`Received ${signal}, closing server...`);
       await Promise.all(workers.map((w) => w.default.close()));

apps/web/src/pages/_error.jsx

@@ -0,0 +1,17 @@
+import * as Sentry from "@sentry/nextjs";
+import Error from "next/error";
+
+const CustomErrorComponent = (props) => {
+  return <Error statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  // This will contain the status code of the response
+  return Error.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;