Introduce error boundary mechanism and exception capture with Baselime and Sentry

Deleted the ErrorBoundary component from the makerkit package and introduced new exception capture mechanisms for Baselime and Sentry monitoring providers. The code now captures all exceptions thrown within components and sends them to the configured monitoring provider, which in turn logs the errors for debugging purposes. Updated packages and environment variables accordingly to support this feature.

apps/web/.env.production

@@ -44,4 +44,8 @@ NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
 NEXT_PUBLIC_ENABLE_ACCOUNT_DELETION=true
 NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=true
 NEXT_PUBLIC_ENABLE_ORGANIZATION_DELETION=true
-NEXT_PUBLIC_ENABLE_ORGANIZATION_BILLING=true
+NEXT_PUBLIC_ENABLE_ORGANIZATION_BILLING=true
+
+# MONITORING
+MONITORING_PROVIDER=
+MONITORING_INSTRUMENTATION_ENABLED=false

apps/web/app/(dashboard)/home/[account]/billing/error.tsx

@@ -1,16 +1,21 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 
+import { useCaptureException } from '@kit/monitoring/hooks';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { Button } from '@kit/ui/button';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
-export default function BillingErrorPage() {
-  const router = useRouter();
+export default function BillingErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useCaptureException(error);
 
   return (
     <>
@@ -34,7 +39,7 @@ export default function BillingErrorPage() {
           </Alert>
 
           <div>
-            <Button variant={'outline'} onClick={() => router.refresh()}>
+            <Button variant={'outline'} onClick={reset}>
               <Trans i18nKey={'common:retry'} />
             </Button>
           </div>

apps/web/app/error.tsx

@@ -4,13 +4,22 @@ import Link from 'next/link';
 
 import { ArrowLeft } from 'lucide-react';
 
+import { useCaptureException } from '@kit/monitoring/hooks';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
 import { SiteHeader } from '~/(marketing)/_components/site-header';
 
-const ErrorPage = () => {
+const ErrorPage = ({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) => {
+  useCaptureException(error);
+
   return (
     <div className={'flex h-screen flex-1 flex-col'}>
       <SiteHeader />
@@ -39,13 +48,11 @@ const ErrorPage = () => {
             </div>
 
             <div>
-              <Link href={'/'}>
-                <Button variant={'outline'}>
-                  <ArrowLeft className={'mr-2 h-4'} />
+              <Button variant={'outline'} onClick={reset}>
+                <ArrowLeft className={'mr-2 h-4'} />
 
-                  <Trans i18nKey={'common:backToHomePage'} />
-                </Button>
-              </Link>
+                <Trans i18nKey={'common:goBack'} />
+              </Button>
             </div>
           </div>
         </div>

apps/web/instrumentation.ts

@@ -2,11 +2,17 @@
  * This file is used to register monitoring instrumentation
  * for your Next.js application.
  */
+
+const RUNTIME = process.env.NEXT_RUNTIME;
+
+const ENABLE_INSTRUMENTATION =
+  process.env.MONITORING_INSTRUMENTATION_ENABLED === 'true';
+
 export async function register() {
   // only run in nodejs runtime
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
+  if (RUNTIME === 'nodejs' && ENABLE_INSTRUMENTATION) {
     const { registerMonitoringInstrumentation } = await import(
-      '@kit/monitoring'
+      '@kit/monitoring/instrumentation'
     );
 
     // Register monitoring instrumentation based on the

apps/web/public/locales/en/common.json

@@ -21,6 +21,7 @@
   "clear": "Clear",
   "notFound": "Not Found",
   "backToHomePage": "Back to Home Page",
+  "goBack": "Go Back",
   "genericServerError": "Sorry, something went wrong.",
   "genericServerErrorHeading": "Sorry, something went wrong while processing your request. Please contact us if the issue persists.",
   "pageNotFound": "Sorry, this page does not exist.",