Merge pull request #835 from haqq-network/dev

release

.gitignore

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

apps/islamic-website/instrumentation.ts

@@ -0,0 +1,30 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    Sentry.init({
+      dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+      // Adjust this value in production, or use tracesSampler for greater control
+      tracesSampleRate: 1,
+
+      // Setting this option to true will print useful information to the console while you're setting up Sentry.
+      debug: false,
+
+      // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+      // spotlight: process.env.NODE_ENV === 'development',
+    });
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    Sentry.init({
+      dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+      // Adjust this value in production, or use tracesSampler for greater control
+      tracesSampleRate: 1,
+
+      // Setting this option to true will print useful information to the console while you're setting up Sentry.
+      debug: false,
+    });
+  }
+}

apps/islamic-website/next.config.js

@@ -2,6 +2,7 @@
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { composePlugins, withNx } = require('@nx/next');
+const { withSentryConfig } = require('@sentry/nextjs');
 const withNextIntl = require('next-intl/plugin');
 
 /**
@@ -47,6 +48,48 @@ const nextConfig = {
   },
 };
 
+const sentryWebpackPluginOptions = {
+  // 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 = [withNx, withNextIntl('./i18n.ts')];
 
-module.exports = composePlugins(...plugins)(nextConfig);
+module.exports = withSentryConfig(
+  composePlugins(...plugins)(nextConfig),
+  sentryWebpackPluginOptions,
+);

apps/islamic-website/sentry.client.config.js

@@ -2,29 +2,29 @@
 // The config you add here will be used whenever a users loads a page in their browser.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-// import * as Sentry from '@sentry/nextjs';
+import * as Sentry from '@sentry/nextjs';
 
-// Sentry.init({
-//   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
 
-//   // Adjust this value in production, or use tracesSampler for greater control
-//   tracesSampleRate: 1,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
 
-//   // Setting this option to true will print useful information to the console while you're setting up Sentry.
-//   debug: false,
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
 
-//   replaysOnErrorSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0,
 
-//   // This sets the sample rate to be 10%. You may want this to be 100% while
-//   // in development and sample at a lower rate in production
-//   replaysSessionSampleRate: 0.1,
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
 
-//   // You can remove this option if you're not planning to use the Sentry Session Replay feature:
-//   integrations: [
-//     new Sentry.Replay({
-//       // Additional Replay configuration goes in here, for example:
-//       maskAllText: true,
-//       blockAllMedia: true,
-//     }),
-//   ],
-// });
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    Sentry.replayIntegration({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

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>