add TS checks

.gitignore

@@ -41,3 +41,6 @@ cypress/screenshots
 #swc
 .swc
 .cypress_cache
+
+# Sentry Config File
+.env.sentry-build-plugin

config/webpack.config.js

@@ -55,8 +55,8 @@ const commonConfig = ({ dev }) => {
           },
         }
       : {}),
-    devtool: false,
-    resolve: {
+      devtool: 'hidden-source-map',
+      resolve: {
       extensions: ['.js', '.ts', '.tsx'],
       alias: {
         ...searchIgnoredStyles(path.resolve(__dirname, '../')),

config/webpack.plugins.js

@@ -9,6 +9,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const getDynamicModules = require('./get-dynamic-modules');
+const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
 
 const deps = require('../package.json').dependencies;
 
@@ -87,6 +88,22 @@ const plugins = (dev = false, beta = false, restricted = false) => {
       __SENTRY_DEBUG__: false,
     }),
     ...(dev ? [new ReactRefreshWebpackPlugin()] : []),
+     // Put the Sentry Webpack plugin after all other plugins
+     ...(process.env.SENTRY_AUTH_TOKEN && process.env.SENTRY_ORG && process.env.SENTRY_PROJECT
+      ? [
+          sentryWebpackPlugin({
+            authToken: process.env.SENTRY_AUTH_TOKEN,
+            org: process.env.SENTRY_ORG,
+            project: process.env.SENTRY_PROJECT,
+            _experiments: {
+              moduleMetadata: ({ release }) => ({
+                authToken: process.env.SENTRY_AUTH_TOKEN,
+                release,
+              }),
+            },
+          }),
+        ]
+      : []),
   ];
 };
 

package.json

@@ -153,8 +153,9 @@
     "@scalprum/core": "^0.8.1",
     "@scalprum/react-core": "^0.9.3",
     "@segment/analytics-next": "^1.73.0",
-    "@sentry/react": "^7.118.0",
-    "@sentry/tracing": "^7.118.0",
+    "@sentry/browser": "^8.32.0",
+    "@sentry/react": "^8.32.0",
+    "@sentry/webpack-plugin": "^2.22.4",
     "@types/intercom-web": "^2.8.26",
     "@unleash/proxy-client-react": "^3.6.0",
     "abortcontroller-polyfill": "^1.7.5",

src/components/GlobalFilter/globalFilterApi.ts

@@ -124,7 +124,7 @@ export const escaper = (value: string) => value.replace(/\//gi, '%2F').replace(/
 export const flatTags = memoize(
   (filter: FlagTagsFilter = {}, encode = false, format = false) => {
     const { Workloads, [SID_KEY]: SID, ...tags } = filter;
-    const mappedTags = flatMap(Object.entries({ ...tags, ...(!format && { Workloads }) } || {}), ([namespace, item]) =>
+    const mappedTags = flatMap(Object.entries({ ...tags, ...(!format && { Workloads }) }), ([namespace, item]) =>
       Object.entries<any>(item || {})
         .filter(([, { isSelected }]: [unknown, GroupItem]) => isSelected)
         .map(([tagKey, { item, value: tagValue }]: [any, GroupItem & { value: string }]) => {

src/components/Header/Header.tsx

@@ -58,7 +58,7 @@ const MemoizedHeader = memo(
     isOrgAdmin?: boolean;
     isInternal?: boolean;
   }) => {
-    const search = new URLSearchParams(window.location.search).keys().next().value;
+    const search = new URLSearchParams(window.location.search).keys().next().value || '';
     const isActivationPath = activationRequestURLs.includes(search);
     const { pathname } = useLocation();
     const noBreadcrumb = !['/', '/allservices', '/favoritedservices'].includes(pathname);

src/utils/sentry.ts

@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react';
-import { BrowserTracing } from '@sentry/tracing';
+import * as SentryBrowser from '@sentry/browser';
 import { ChromeUser } from '@redhat-cloud-services/types';
 import { isProd } from './common';
 
@@ -31,24 +31,25 @@ function getAppDetails() {
 
   return appDetails;
 }
+const EXTRA_KEY = 'ROUTE_TO';
+
+const transport = SentryBrowser.makeMultiplexedTransport(SentryBrowser.makeFetchTransport, (args) => {
+  const event = args.getEvent();
+  if (event && event.extra && EXTRA_KEY in event.extra && Array.isArray(event.extra[EXTRA_KEY])) {
+    return event.extra[EXTRA_KEY];
+  }
+  return [];
+});
 
-// Actually initialize sentry with the group's api key
 function initSentry() {
   if (sentryInitialized) {
     return;
   }
 
   sentryInitialized = true;
   const appDetails = getAppDetails();
-
-  let API_KEY;
-  switch (appDetails.app.name) {
-    case 'advisor':
-      API_KEY = 'https://[email protected]/4505397435367424';
-      break;
-    default:
-      API_KEY = 'https://[email protected]/1484024';
-  }
+  //These two apps will not be set up as of now. This helps limit transacations
+  const avoidedApps = ['subscriptions', 'image-builder'];
 
   // dsn: key
   // environment: logs Prod or Prod Beta for filtering
@@ -61,17 +62,50 @@ function initSentry() {
   // maskeAllText: mask all text on the screen.
   // ignoreErrors: Sentry ignores errors containing strings or regex. Regex needs to be exact message, string is partial
   // replaysSessionSampleRate: replays that begin recording immediately and last the entirety of the user's session.
-
+  // transport is what allows consumed apps to tell chrome what dsn to send things too.
   Sentry.init({
-    dsn: API_KEY,
+    //default api_key -> cp-001-insights
+    dsn: 'https://[email protected]/1484024',
     environment: `Prod${appDetails.beta}`,
     maxBreadcrumbs: 50,
     attachStacktrace: true,
-    integrations: [new BrowserTracing(), new Sentry.Replay({ maskAllText: false, maskAllInputs: true })],
-    tracesSampleRate: 0.2,
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration({ maskAllText: false, maskAllInputs: true }),
+      Sentry.moduleMetadataIntegration(),
+    ],
+    tracesSampleRate: 0.1,
     debug: !!window.localStorage.getItem('chrome:sentry:debug'),
     replaysOnErrorSampleRate: 1.0,
     replaysSessionSampleRate: 0.3,
+    transport,
+    beforeSend: (event) => {
+      if (event?.exception?.values?.[0]?.stacktrace?.frames) {
+        const frames = event.exception.values[0].stacktrace.frames;
+        // Find the last frame with module metadata containing a DSN
+        const routeTo = frames
+          .filter((frame) => frame.module_metadata && frame.module_metadata.dsn)
+          .map((v) => v.module_metadata)
+          .slice(-1); // using top frame only - you may want to customize this according to your needs
+
+        if (routeTo.length) {
+          event.extra = {
+            ...event.extra,
+            [EXTRA_KEY]: routeTo,
+          };
+        }
+      }
+
+      return event;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    beforeSendTransaction: (event: any) => {
+      const appName = event?.contexts?.app?.app_name;
+      if (avoidedApps.includes(appName)) {
+        return null;
+      }
+      return event;
+    },
   });
 }
 
@@ -83,17 +117,16 @@ function sentryTags(user: ChromeUser) {
   const browser_width = window.innerWidth + ' px';
 
   // TODO: Add request_id to this when we have it
-  Sentry.configureScope((scope) => {
-    scope.setUser({
-      id: user.identity.account_number,
-      account_id: user.identity.internal?.account_id,
-    });
-    scope.setTags({
-      app_name: appDetails.app.name,
-      app_group: appDetails.app.group,
-      location: 'frontend',
-      browser_width: browser_width,
-    });
+  const scope = SentryBrowser.getCurrentScope();
+  scope.setUser({
+    id: user.identity.account_number,
+    account_id: user.identity.internal?.account_id,
+  });
+  scope.setTags({
+    app_name: appDetails.app.name,
+    app_group: appDetails.app.group,
+    location: 'frontend',
+    browser_width: browser_width,
   });
 }