diff --git a/apps/frontendapp/.gitignore b/apps/frontendapp/.gitignore
index 5ef6a52..dd146b5 100644
--- 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
new file mode 100644
index 0000000..8d7195e
--- /dev/null
+++ 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 (
+
+
+
Something went wrong
+
We've been notified and are working on a fix.
+
+
+
+ );
+}
+
+export default function ErrorBoundary({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
\ No newline at end of file
diff --git a/apps/frontendapp/app/global-error.tsx b/apps/frontendapp/app/global-error.tsx
new file mode 100644
index 0000000..9bda5fe
--- /dev/null
+++ 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 (
+
+
+ {/* `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. */}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/frontendapp/app/layout.tsx b/apps/frontendapp/app/layout.tsx
index ab2948a..dada46d 100644
--- 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
>
+
{children}
+