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/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>