Implement Baselime monitoring and update error handling

This commit introduces the integration of Baselime for monitoring, accounting for various error scenarios and improved console error logging. Request handling has been updated to assign unique IDs for each request, aiding in tracing/logs. The environment variable key was updated, and the `MonitoringProvider` was nested in the root providers. In the base monitoring service, a function to format errors for logging was added. The provider logic was updated to create a new instance of service for each request, improving memory efficiency.

apps/web/components/root-providers.tsx

@@ -8,6 +8,7 @@ import { ThemeProvider } from 'next-themes';
 
 import { CaptchaProvider } from '@kit/auth/captcha/client';
 import { I18nProvider } from '@kit/i18n/provider';
+import { MonitoringProvider } from '@kit/monitoring/components';
 import { AuthChangeListener } from '@kit/supabase/components/auth-change-listener';
 
 import appConfig from '~/config/app.config';
@@ -42,26 +43,28 @@ export function RootProviders({
   const i18nSettings = getI18nSettings(lang);
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <ReactQueryStreamedHydration>
-        <I18nProvider settings={i18nSettings} resolver={i18nResolver}>
-          <CaptchaProvider>
-            <CaptchaTokenSetter siteKey={captchaSiteKey} />
+    <MonitoringProvider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryStreamedHydration>
+          <I18nProvider settings={i18nSettings} resolver={i18nResolver}>
+            <CaptchaProvider>
+              <CaptchaTokenSetter siteKey={captchaSiteKey} />
 
-            <AuthChangeListener appHomePath={pathsConfig.app.home}>
-              <ThemeProvider
-                attribute="class"
-                enableSystem
-                disableTransitionOnChange
-                defaultTheme={theme}
-                enableColorScheme={false}
-              >
-                {children}
-              </ThemeProvider>
-            </AuthChangeListener>
-          </CaptchaProvider>
-        </I18nProvider>
-      </ReactQueryStreamedHydration>
-    </QueryClientProvider>
+              <AuthChangeListener appHomePath={pathsConfig.app.home}>
+                <ThemeProvider
+                  attribute="class"
+                  enableSystem
+                  disableTransitionOnChange
+                  defaultTheme={theme}
+                  enableColorScheme={false}
+                >
+                  {children}
+                </ThemeProvider>
+              </AuthChangeListener>
+            </CaptchaProvider>
+          </I18nProvider>
+        </ReactQueryStreamedHydration>
+      </QueryClientProvider>
+    </MonitoringProvider>
   );
 }

apps/web/middleware.ts

@@ -21,6 +21,10 @@ export const config = {
 export async function middleware(request: NextRequest) {
   const response = NextResponse.next();
 
+  // set a unique request ID for each request
+  // this helps us log and trace requests
+  setRequestId(request);
+
   // apply CSRF and session middleware
   const csrfResponse = await withCsrfMiddleware(request, response);
 
@@ -109,6 +113,9 @@ async function adminMiddleware(request: NextRequest, response: NextResponse) {
   return response;
 }
 
+/**
+ * Define URL patterns and their corresponding handlers.
+ */
 function getPatterns() {
   return [
     {
@@ -170,6 +177,10 @@ function getPatterns() {
   ];
 }
 
+/**
+ * Match URL patterns to specific handlers.
+ * @param url
+ */
 function matchUrlPattern(url: string) {
   const patterns = getPatterns();
   const input = url.split('?')[0];
@@ -182,3 +193,11 @@ function matchUrlPattern(url: string) {
     }
   }
 }
+
+/**
+ * Set a unique request ID for each request.
+ * @param request
+ */
+function setRequestId(request: Request) {
+  request.headers.set('x-correlation-id', crypto.randomUUID());
+}