fix: fix undefined process in package

artemmufazalov · artemmufazalov · commit ad5f2e191763 · 2025-03-06T14:35:19.000+03:00
diff --git a/config-overrides.js b/config-overrides.js
@@ -2,16 +2,13 @@ const path = require('path');
 
 const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const webpack = require('webpack');
 const srcRoot = path.resolve(__dirname, 'src');
 const uiKitRoot = path.resolve(__dirname, 'node_modules/@gravity-ui/uikit');
 const antlr4C3Root = path.resolve(__dirname, 'node_modules/antlr4-c3');
 const websqlRoot = path.resolve(__dirname, 'node_modules/@gravity-ui/websql-autocomplete');
 const antlr4ngRoot = path.resolve(__dirname, 'node_modules/antlr4ng');
 const uiKitIconsRoot = path.resolve(__dirname, 'node_modules/@gravity-ui/icons');
 
-const packageJson = require('./package.json');
-
 module.exports = {
     webpack: (config, env) => {
         const oneOfRule = config.module.rules.find((r) => r.oneOf);
@@ -48,13 +45,6 @@ module.exports = {
             }),
         );
 
-        // Add DefinePlugin to expose just the version
-        config.plugins.push(
-            new webpack.DefinePlugin({
-                'process.env.UI_VERSION': JSON.stringify(packageJson.version),
-            }),
-        );
-
         const cssExtractPlugin = config.plugins.find((p) => p instanceof MiniCSSExtractPlugin);
         if (cssExtractPlugin) {
             cssExtractPlugin.options.ignoreOrder = true;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -164,8 +164,7 @@
     "source-map-explorer": "^2.5.3",
     "stylelint": "^15.11.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.7.3",
-    "webpack": "^5.98.0"
+    "typescript": "^5.7.3"
   },
   "peerDependencies": {
     "monaco-yql-languages": ">=1.3.0",
diff --git a/public/index.html b/public/index.html
@@ -21,10 +21,10 @@
     <title>YDB Monitoring</title>
     <script>
       window.systemSettings = {};
-      window.userSettings = {};
       window.web_version = !'%REACT_APP_BACKEND%';
       window.custom_backend = '%NODE_ENV%' === 'development' && '%REACT_APP_BACKEND%';
       window.meta_backend = '%REACT_APP_META_BACKEND%'
+      window.react_app_disable_checks = '%REACT_APP_DISABLE_CHECKS%'
     </script>
   </head>
   <body>
diff --git a/src/components/ErrorBoundary/utils.tsx b/src/components/ErrorBoundary/utils.tsx
@@ -1,22 +1,33 @@
 import {prepareErrorMessage} from '../../utils/prepareErrorMessage';
 
 export async function collectDiagnosticsData(error: Error) {
-    return await getBackendVersion().then((backendVersion) => {
-        return {
-            location: window.location.href,
-            userAgent: navigator.userAgent,
-            error: {
-                message: prepareErrorMessage(error),
-                stack: prepareErrorStack(error.stack, {trim: true, maxLines: 10}),
-            },
-            uiVersion: process.env.UI_VERSION,
-            backendVersion,
-        };
-    });
+    return await Promise.all([getUiVersion(), getBackendVersion()]).then(
+        ([uiVersion, backendVersion]) => {
+            return {
+                location: window.location.href,
+                userAgent: navigator.userAgent,
+                error: {
+                    message: prepareErrorMessage(error),
+                    stack: prepareErrorStack(error.stack, {trim: true, maxLines: 10}),
+                },
+                uiVersion,
+                backendVersion,
+            };
+        },
+    );
 }
 
 export type DiagnosticsData = Awaited<ReturnType<typeof collectDiagnosticsData>>;
 
+async function getUiVersion() {
+    try {
+        const packageJson = await import('../../../package.json');
+        return packageJson.version;
+    } catch (error) {
+        return {error: prepareErrorMessage(error)};
+    }
+}
+
 async function getBackendVersion() {
     try {
         // node_id=. returns data about node that fullfills request
diff --git a/src/containers/UserSettings/settings.tsx b/src/containers/UserSettings/settings.tsx
@@ -21,6 +21,8 @@ import {Lang, defaultLang} from '../../utils/i18n';
 import type {SettingProps, SettingsInfoFieldProps} from './Setting';
 import i18n from './i18n';
 
+import packageJson from '../../../package.json';
+
 export interface SettingsSection {
     id: string;
     title: string;
@@ -141,7 +143,7 @@ export const autocompleteOnEnterSetting: SettingProps = {
 export const interfaceVersionInfoField: SettingsInfoFieldProps = {
     title: i18n('settings.about.interfaceVersionInfoField.title'),
     type: 'info',
-    content: process.env.UI_VERSION,
+    content: packageJson.version,
 };
 
 export const appearanceSection: SettingsSection = {
diff --git a/src/store/configureStore.ts b/src/store/configureStore.ts
@@ -28,12 +28,12 @@ function _configureStore<
         preloadedState,
         middleware: (getDefaultMiddleware) =>
             getDefaultMiddleware({
-                immutableCheck: process.env.REACT_APP_DISABLE_CHECKS
+                immutableCheck: window.react_app_disable_checks
                     ? false
                     : {
                           ignoredPaths: ['tooltip.currentHoveredRef'],
                       },
-                serializableCheck: process.env.REACT_APP_DISABLE_CHECKS
+                serializableCheck: window.react_app_disable_checks
                     ? false
                     : {
                           ignoredPaths: ['tooltip.currentHoveredRef', 'api'],
diff --git a/src/types/window.d.ts b/src/types/window.d.ts
@@ -39,7 +39,8 @@ interface Window {
     meta_backend?: string;
     code_assist_backend?: string;
 
-    userSettings?: import('../services/settings').SettingsObject;
+    react_app_disable_checks?: boolean;
+
     systemSettings?: import('../services/settings').SettingsObject;
 
     api: import('../services/api/index').YdbEmbeddedAPI;
