feat: add sentry to frontend

boklisten · Jan 16, 2025 · 95f2624 · 95f2624
1 parent 91ee212
commit 95f2624
Showing 10 changed files with 867 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -42,3 +42,4 @@ cypress/screenshots/
 
 # Sentry
 .sentryclirc
+.env.sentry-build-plugin
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -1,2 +1,3 @@
 NEXT_PUBLIC_API_URL=
 NEXT_PUBLIC_BL_WEB_URL=
+SENTRY_AUTH_TOKEN=
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
@@ -1,3 +1,4 @@
+import { withSentryConfig } from "@sentry/nextjs";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
@@ -47,4 +48,15 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  org: "boklisten",
+  project: "frontend",
+  widenClientFileUpload: true,
+  reactComponentAnnotation: {
+    enabled: true,
+  },
+  tunnelRoute: "/monitoring",
+  hideSourceMaps: true,
+  disableLogger: true,
+  automaticVercelMonitors: true,
+});
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
     "@mui/material": "^6.3.1",
     "@mui/material-nextjs": "^6.3.1",
     "@mui/x-date-pickers": "^7.23.6",
+    "@sentry/nextjs": "^8",
     "@toolpad/core": "^0.12.0",
     "@yudiel/react-qr-scanner": "^2.1.0",
     "draft-js": "^0.11.7",

diff --git a/frontend/sentry.client.config.ts b/frontend/sentry.client.config.ts
@@ -0,0 +1,14 @@
+// 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: "https://[email protected]/4508654849294336",
+  integrations: [Sentry.replayIntegration()],
+  tracesSampleRate: 1,
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+  debug: false,
+});
diff --git a/frontend/sentry.edge.config.ts b/frontend/sentry.edge.config.ts
@@ -0,0 +1,12 @@
+// 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: "https://[email protected]/4508654849294336",
+  tracesSampleRate: 1,
+  debug: false,
+});
diff --git a/frontend/sentry.server.config.ts b/frontend/sentry.server.config.ts
@@ -0,0 +1,11 @@
+// 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: "https://[email protected]/4508654849294336",
+  tracesSampleRate: 1,
+  debug: false,
+});
diff --git a/frontend/src/app/global-error.tsx b/frontend/src/app/global-error.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html lang="no">
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}
diff --git a/frontend/src/instrumentation.ts b/frontend/src/instrumentation.ts
@@ -0,0 +1,9 @@
+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");
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -42,3 +42,4 @@ cypress/screenshots/

		# Sentry
		.sentryclirc
		.env.sentry-build-plugin