Merge pull request #831 from haqq-network/fix/hqw-299-shell-sentry-er…

…rors-a-lot-off

fix: dynamically load components to prevent hydrations errors

.gitignore

@@ -55,3 +55,6 @@ package-lock.json
 
 # Sentry Config File
 .sentryclirc
+
+# Sentry Config File
+.env.sentry-build-plugin

apps/shell/next.config.js

@@ -32,40 +32,48 @@ const nextConfig = {
       },
     ];
   },
-  sentry: {
-    // 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,
-
-    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-    transpileClientSDK: true,
-
-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers. (increases server load)
-    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-    // side errors will fail.
-    tunnelRoute: '/monitoring',
-
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
-
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
-
-    // Enables automatic instrumentation of Vercel Cron Monitors.
-    // See the following for more information:
-    // https://docs.sentry.io/product/crons/
-    // https://vercel.com/docs/cron-jobs
-    automaticVercelMonitors: true,
+  experimental: {
+    instrumentationHook: true,
   },
 };
 
 const sentryWebpackPluginOptions = {
-  silent: true,
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
   org: process.env.SENTRY_ORG,
   project: process.env.SENTRY_PROJECT,
   authToken: process.env.SENTRY_AUTH_TOKEN,
+
+  // 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,
+
+  // Transpiles SDK to be compatible with IE11 (increases bundle size)
+  transpileClientSDK: true,
+
+  // 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: '/api/monitoring',
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // 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,
 };
 
 const plugins = [

apps/shell/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { SpeedInsights } from '@vercel/speed-insights/next';
 import clsx from 'clsx';
 import type { Metadata, Viewport } from 'next';
 import dynamic from 'next/dynamic';
+import { headers } from 'next/headers';
 import type { Config } from '@haqq/shell-shared';
 import { AppWrapper } from '../components/app-wrapper';
 import { PHProvider } from '../components/posthog';
@@ -46,12 +47,20 @@ const PostHogPageView = dynamic(
     const { PostHogPageView } = await import('../components/posthog-page-view');
     return { default: PostHogPageView };
   },
-  {
-    ssr: false,
-  },
+  { ssr: false },
 );
 
 export default function RootLayout({ children }: PropsWithChildren) {
+  const headersList = headers();
+  const userAgent = headersList.get('user-agent');
+  const isMobileUserAgent = userAgent
+    ? Boolean(
+        userAgent.match(
+          /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i,
+        ),
+      )
+    : false;
+
   return (
     <html
       lang="en"
@@ -63,7 +72,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
           <PostHogPageView />
           <SpeedInsights />
 
-          <Providers config={shellConfig}>
+          <Providers config={shellConfig} isMobileUserAgent={isMobileUserAgent}>
             <AppWrapper>{children}</AppWrapper>
           </Providers>
         </body>