Boaz-marube · Boaz-marube · Sep 10, 2025 · Sep 10, 2025
diff --git a/apps/frontendapp/.gitignore b/apps/frontendapp/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry Config File
+.env.sentry-build-plugin
diff --git a/apps/frontendapp/app/components/ErrorBoundary.tsx b/apps/frontendapp/app/components/ErrorBoundary.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import { ErrorBoundary as SentryErrorBoundary } from "@sentry/react";
+
+interface ErrorFallbackProps {
+  error: Error;
+  resetError: () => void;
+}
+
+function ErrorFallback({ error, resetError }: ErrorFallbackProps) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Something went wrong</h2>
+        <p className="text-gray-600 mb-6">We've been notified and are working on a fix.</p>
+        <button
+          onClick={resetError}
+          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        >
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function ErrorBoundary({ children }: { children: React.ReactNode }) {
+  return (
+    <SentryErrorBoundary fallback={ErrorFallback} beforeCapture={Sentry.captureException}>
+      {children}
+    </SentryErrorBoundary>
+  );
+}
diff --git a/apps/frontendapp/app/global-error.tsx b/apps/frontendapp/app/global-error.tsx
@@ -0,0 +1,23 @@
+"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>
+      <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/apps/frontendapp/app/layout.tsx b/apps/frontendapp/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { ThemeProvider } from "@/app/components/theme/theme-provider";
+import ErrorBoundary from "@/app/components/ErrorBoundary";
 
 export const metadata: Metadata = {
   title: 'Health Bridge App',
@@ -25,7 +26,9 @@ export default function RootLayout({
           storageKey="health-bridge-theme"
           disableTransitionOnChange
         >
+          <ErrorBoundary>
             {children}
+          </ErrorBoundary>
         </ThemeProvider>
 
       </body>

diff --git a/apps/frontendapp/instrumentation-client.ts b/apps/frontendapp/instrumentation-client.ts
@@ -0,0 +1,32 @@
+// 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: "https://5d0f0535efed9f111c88b72d2d30f277@o4509977180372992.ingest.de.sentry.io/4509994839769168",
+
+  // 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,
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // 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;
diff --git a/apps/frontendapp/instrumentation.ts b/apps/frontendapp/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+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');
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/apps/frontendapp/next.config.ts b/apps/frontendapp/next.config.ts
@@ -1,3 +1,4 @@
+import {withSentryConfig} from "@sentry/nextjs";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
@@ -11,4 +12,35 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+  org: "health-bridge-app",
+
+  project: "health-bridge-app",
+
+  // 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,
+
+  // Uncomment to 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,
+
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
+});
diff --git a/apps/frontendapp/package.json b/apps/frontendapp/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
+    "@sentry/nextjs": "^10.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.542.0",

diff --git a/apps/frontendapp/sentry.edge.config.ts b/apps/frontendapp/sentry.edge.config.ts
@@ -0,0 +1,21 @@
+// 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://5d0f0535efed9f111c88b72d2d30f277@o4509977180372992.ingest.de.sentry.io/4509994839769168",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: process.env.NODE_ENV === 'development',
+
+  environment: process.env.NODE_ENV,
+});
diff --git a/apps/frontendapp/sentry.server.config.ts b/apps/frontendapp/sentry.server.config.ts
@@ -0,0 +1,20 @@
+// 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://5d0f0535efed9f111c88b72d2d30f277@o4509977180372992.ingest.de.sentry.io/4509994839769168",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: process.env.NODE_ENV === 'development',
+
+  environment: process.env.NODE_ENV,
+});