fix: review

Author: artemmufazalov

config-overrides.js

@@ -2,13 +2,16 @@ 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);
@@ -45,6 +48,13 @@ 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;

package-lock.json

@@ -164,7 +164,8 @@
     "source-map-explorer": "^2.5.3",
     "stylelint": "^15.11.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "webpack": "^5.98.0"
   },
   "peerDependencies": {
     "monaco-yql-languages": ">=1.3.0",

package.json

@@ -105,7 +105,7 @@ function ErrorStack({stack}: {stack?: string}) {
 
     const stackToDisplay = prepareErrorStack(stack, {
         trim: false,
-        maxLength: undefined,
+        maxLines: undefined,
     });
 
     return (

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -36,12 +36,12 @@ describe('prepareErrorStack', () => {
             } as Window & typeof globalThis;
         });
 
-        expect(prepareErrorStack(stack, {trim: false, maxLength: undefined})).toBe(preparedStack);
+        expect(prepareErrorStack(stack, {trim: false, maxLines: undefined})).toBe(preparedStack);
 
         windowSpy.mockRestore();
     });
 
-    test('Limit trace to maxLenght', () => {
+    test('Limit trace to maxLines', () => {
         const stack = `TypeError: Cannot read properties of null (reading 'hello')
     at Content (/static/js/bundle.js:4725:8)
     at renderWithHooks (/static/js/bundle.js:98993:22)
@@ -59,7 +59,7 @@ describe('prepareErrorStack', () => {
     at renderWithHooks (/static/js/bundle.js:98993:22)
     at mountIndeterminateComponent (/static/js/bundle.js:102964:17)`;
 
-        expect(prepareErrorStack(stack, {trim: false, maxLength: 3})).toBe(preparedStack);
+        expect(prepareErrorStack(stack, {trim: false, maxLines: 3})).toBe(preparedStack);
     });
 
     test('Trims data if needed', () => {

src/components/ErrorBoundary/__tests__/prepareErrorStack.test.ts

@@ -1,33 +1,22 @@
+import {prepareErrorMessage} from '../../utils/prepareErrorMessage';
+
 export async function collectDiagnosticsData(error: Error) {
-    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, maxLength: 10}),
-                },
-                uiVersion,
-                backendVersion,
-            };
-        },
-    );
+    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,
+        };
+    });
 }
 
 export type DiagnosticsData = Awaited<ReturnType<typeof collectDiagnosticsData>>;
 
-// Error could happen on app init, while modules not inited
-// Import in try catch blocks to prevent any errors with error data collection
-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
@@ -40,19 +29,9 @@ async function getBackendVersion() {
     }
 }
 
-function prepareErrorMessage(error: unknown) {
-    if (error) {
-        if (typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
-            return error.message;
-        }
-    }
-
-    return '';
-}
-
 export function prepareErrorStack(
     stack?: string,
-    {trim = true, maxLength}: {trim?: boolean; maxLength?: number} = {},
+    {trim = true, maxLines}: {trim?: boolean; maxLines?: number} = {},
 ) {
     return (
         stack
@@ -73,7 +52,7 @@ export function prepareErrorStack(
                 return preparedLine;
             })
             // Do not slice first row
-            .slice(0, maxLength ? maxLength + 1 : undefined)
+            .slice(0, maxLines ? maxLines + 1 : undefined)
             .join('\n')
     );
 }

src/components/ErrorBoundary/utils.tsx

@@ -1,3 +1,4 @@
+import {prepareErrorMessage} from '../../../utils/prepareErrorMessage';
 import i18n from '../i18n';
 
 interface ResponseErrorProps {
@@ -11,19 +12,7 @@ export const ResponseError = ({
     className,
     defaultMessage = i18n('responseError.defaultMessage'),
 }: ResponseErrorProps) => {
-    let statusText = '';
+    const message = prepareErrorMessage(error) || defaultMessage;
 
-    if (error && typeof error === 'string') {
-        statusText = error;
-    }
-    if (error && typeof error === 'object') {
-        if ('data' in error && typeof error.data === 'string') {
-            statusText = error.data;
-        } else if ('statusText' in error && typeof error.statusText === 'string') {
-            statusText = error.statusText;
-        } else if ('message' in error && typeof error.message === 'string') {
-            statusText = error.message;
-        }
-    }
-    return <div className={`error ${className}`}>{statusText || defaultMessage}</div>;
+    return <div className={`error ${className}`}>{message}</div>;
 };

src/components/Errors/ResponseError/ResponseError.tsx

@@ -21,8 +21,6 @@ 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;
@@ -143,7 +141,7 @@ export const autocompleteOnEnterSetting: SettingProps = {
 export const interfaceVersionInfoField: SettingsInfoFieldProps = {
     title: i18n('settings.about.interfaceVersionInfoField.title'),
     type: 'info',
-    content: packageJson.version,
+    content: process.env.UI_VERSION,
 };
 
 export const appearanceSection: SettingsSection = {

src/containers/UserSettings/settings.tsx

@@ -0,0 +1,17 @@
+export function prepareErrorMessage(error: unknown) {
+    if (error && typeof error === 'string') {
+        return error;
+    }
+
+    if (error && typeof error === 'object') {
+        if ('data' in error && typeof error.data === 'string') {
+            return error.data;
+        } else if ('statusText' in error && typeof error.statusText === 'string') {
+            return error.statusText;
+        } else if ('message' in error && typeof error.message === 'string') {
+            return error.message;
+        }
+    }
+
+    return '';
+}