Merge pull request #442 from devtron-labs/fix/sentry-issues

fix: sentry null checks and remove image minification

Author: eshankvaish

.gitignore

@@ -105,3 +105,4 @@ typings/
 
 .DS_Store
 .npmrc
+.build-cache

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.2.5",
+    "version": "1.2.6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -48,7 +48,7 @@
         "@typescript-eslint/eslint-plugin": "8.3.0",
         "@typescript-eslint/parser": "8.3.0",
         "@vitejs/plugin-react": "4.3.1",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.6.1",
@@ -107,6 +107,7 @@
         "tslib": "2.7.0"
     },
     "overrides": {
+        "cross-spawn": "^7.0.5",
         "react-dates": {
             "react": "^17.0.2",
             "react-dom": "^17.0.2"

package.json

@@ -150,7 +150,14 @@ async function fetchAPI<K = object>(
                     })
                 } else {
                     handleLogout()
-                    return { code: 401, status: 'Unauthorized', result: [] }
+                    // Using this way to ensure that the user is redirected to the login page
+                    // and the component has enough time to get unmounted otherwise the component re-renders
+                    // and try to access some property of a variable and log exception to sentry
+                    return await new Promise((resolve) => {
+                        setTimeout(() => {
+                            resolve({ code: 401, status: 'Unauthorized', result: [] })
+                        }, 1000)
+                    })
                 }
             } else if (response.status >= 300 && response.status <= 599) {
                 return await handleServerError(contentType, response)

src/Common/Api.ts

@@ -511,7 +511,7 @@ export const getUrlWithSearchParams = <T extends string | number = string | numb
 /**
  * Custom exception logger function for logging errors to sentry
  */
-export const logExceptionToSentry = Sentry.captureException.bind(window)
+export const logExceptionToSentry: typeof Sentry.captureException  = Sentry.captureException.bind(window)
 
 export const customStyles = {
     control: (base, state) => ({

src/Common/Helper.tsx

@@ -47,10 +47,10 @@ const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscap
         if (task) {
             return `<li style="list-style: none">
                         <input disabled type="checkbox" ${checked ? 'checked' : ''} class="dc__vertical-align-middle" style="margin: 0 0.2em 0.25em -1.4em">
-                        ${text}
+                        ${marked(text)}
                     </li>`
         }
-        return `<li>${text}</li>`
+        return `<li>${marked(text)}</li>`
     }
 
     renderer.image = ({ href, title, text }: Tokens.Image) =>
@@ -60,7 +60,7 @@ const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscap
         <div class="table-container">
             <table>
                 <thead>
-                    <tr>${header.map((headerCell) => `<th align="${headerCell.align}">${headerCell.text}</th>`).join('')}</tr>
+                    <tr>${header.map((headerCell) => `<th align="${headerCell.align}">${marked(headerCell.text)}</th>`).join('')}</tr>
                 </thead>
                 <tbody>
                     ${rows.map((row) => renderTableRow(row)).join('')}

src/Common/Markdown/MarkDown.tsx

@@ -257,6 +257,10 @@ export const IndexStore = {
         _nodesFilteredSubject.next([..._nodes])
     },
 
+    clearAppDetails() {
+        this.publishAppDetails({}, null)
+    },
+
     getAppDetails: (): AppDetails => _appDetailsSubject.getValue(),
 
     getAppDetailsObservable: () => _appDetailsSubject.asObservable(),

src/Shared/Store/IndexStore.tsx

@@ -23,7 +23,7 @@ import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets'
 import svgr from 'vite-plugin-svgr'
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
 import tsconfigPaths from 'vite-tsconfig-paths'
-import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
+// import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
 import * as packageJson from './package.json'
 
 // https://vitejs.dev/config/
@@ -42,9 +42,13 @@ export default defineConfig({
         NodeGlobalsPolyfillPlugin({
             process: true,
         }),
-        ViteImageOptimizer({
-            logStats: false,
-        }),
+        // Commented since it merges the attributes of svg there by messing up with
+        // the styles
+        // ViteImageOptimizer({
+        //     logStats: false,
+        //     cache: true,
+        //     cacheLocation: '.build-cache/vite-image-optimizer',
+        // }),
     ],
     build: {
         target: 'ES2021',