feat: add BAILogger to replace with console

Author: nowgnuesLee

packages/backend.ai-ui/package.json

@@ -94,6 +94,9 @@
         {
           "additionalHooks": "useRecoilCallback"
         }
+      ],
+      "no-console": [
+        "warn"
       ]
     }
   },

packages/backend.ai-ui/src/components/provider/BAIClientProvider/hooks/useAnonymousBAIClient.ts

@@ -1,8 +1,11 @@
+import { useBAILogger } from '../../../../hooks';
 import { BAIAnonymousClientContext } from '../context';
 import { BAIClient } from '../types';
 import { useContext } from 'react';
 
 const useBAIAnonymousClient = (apiEndpoint: string): BAIClient => {
+  const { logger } = useBAILogger();
+
   try {
     const baiAnonymousClient = useContext(BAIAnonymousClientContext);
     if (!baiAnonymousClient) {
@@ -12,7 +15,7 @@ const useBAIAnonymousClient = (apiEndpoint: string): BAIClient => {
     }
     return baiAnonymousClient(apiEndpoint);
   } catch (error) {
-    console.error('Error using BAI Anonymous Client:', error);
+    logger.error('Error using BAI Anonymous Client:', error);
     throw error;
   }
 };

packages/backend.ai-ui/src/hooks/index.ts

@@ -39,3 +39,9 @@ export type { ErrorResponse } from './useErrorMessageResolver';
 export type { ESMClientErrorResponse } from './useErrorMessageResolver';
 export { default as useGetAvailableFolderName } from './useGetAvailableFolderName';
 export { useInterval, useIntervalValue } from './useIntervalValue';
+export {
+  default as useBAILogger,
+  ContextualLogger,
+  LogLevel,
+} from './useBAILogger';
+export type { LoggerPlugin, LogContext, BAILogger } from './useBAILogger';

packages/backend.ai-ui/src/hooks/useBAILogger.tsx

@@ -0,0 +1,193 @@
+export enum LogLevel {
+  LOG = 0,
+  DEBUG = 1,
+  INFO = 2,
+  WARN = 3,
+  ERROR = 4,
+}
+
+export interface LogContext {
+  level: LogLevel;
+  args: any[];
+  timestamp: Date;
+  metadata?: Record<string, any>;
+}
+
+/**
+ * Plugin interface for extending logger behavior
+ */
+export interface LoggerPlugin {
+  /**
+   * Hook called before logging. Can modify the log context or abort logging.
+   * @param context - The current log context
+   * @returns Modified context to continue logging, or null to abort
+   */
+  beforeLog?(context: LogContext): LogContext | null;
+
+  /**
+   * Hook called after logging is completed
+   * @param context - The log context that was used
+   */
+  afterLog?(context: LogContext): void;
+
+  /**
+   * Hook called when an error occurs during the logging process
+   * @param error - The error that occurred
+   * @param context - The log context when the error happened
+   */
+  onError?(error: Error, context: LogContext): void;
+}
+
+/**
+ * BAI Logger class for structured logging with plugin support
+ */
+class Logger {
+  private plugins: LoggerPlugin[] = [];
+  private metadata: Record<string, any> = {};
+  private enabled: boolean = process.env.NODE_ENV !== 'production';
+  private static instance: Logger;
+
+  private constructor() {
+    // Singleton pattern: private constructor
+  }
+
+  use(plugin: LoggerPlugin): this {
+    this.plugins.push(plugin);
+    return this;
+  }
+
+  setMetadata(key: string, value: any): this {
+    this.metadata[key] = value;
+    return this;
+  }
+
+  clearMetadata(): this {
+    this.metadata = {};
+    return this;
+  }
+
+  setEnabled(enabled: boolean): this {
+    this.enabled = enabled;
+    return this;
+  }
+
+  private logging(level: LogLevel, ...args: any[]) {
+    if (!this.enabled) return;
+
+    let context: LogContext = {
+      level,
+      args,
+      timestamp: new Date(),
+      metadata: { ...this.metadata },
+    };
+
+    try {
+      // Before hooks
+      for (const plugin of this.plugins) {
+        const result = plugin.beforeLog?.(context);
+        if (result === null) return;
+        if (result !== undefined) {
+          context = result;
+        }
+      }
+
+      // Actual log output
+      const consoleMethods = [
+        console.log,
+        console.debug,
+        console.info,
+        console.warn,
+        console.error,
+      ];
+      consoleMethods[level](...context.args);
+
+      // After hooks
+      for (const plugin of this.plugins) {
+        plugin.afterLog?.(context);
+      }
+    } catch (error) {
+      // Plugin error handling
+      for (const plugin of this.plugins) {
+        plugin.onError?.(error as Error, context);
+      }
+    }
+  }
+
+  log(...args: any[]) {
+    this.logging(LogLevel.LOG, ...args);
+  }
+
+  debug(...args: any[]) {
+    this.logging(LogLevel.DEBUG, ...args);
+  }
+
+  info(...args: any[]) {
+    this.logging(LogLevel.INFO, ...args);
+  }
+
+  warn(...args: any[]) {
+    this.logging(LogLevel.WARN, ...args);
+  }
+
+  error(...args: any[]) {
+    this.logging(LogLevel.ERROR, ...args);
+  }
+
+  // Helper for method chaining
+  withContext(key: string, value: any) {
+    return new ContextualLogger(this, { [key]: value });
+  }
+
+  static getInstance(): Logger {
+    if (!Logger.instance) {
+      Logger.instance = new Logger();
+    }
+    return Logger.instance;
+  }
+}
+
+// Logger with context support
+export class ContextualLogger {
+  constructor(
+    private baseLogger: Logger,
+    private context: Record<string, any>,
+  ) {}
+
+  private withContext(fn: () => void) {
+    this.baseLogger.setMetadata('context', this.context);
+    try {
+      fn();
+    } finally {
+      this.baseLogger.clearMetadata();
+    }
+  }
+
+  log(...args: any[]) {
+    this.withContext(() => this.baseLogger.log(...args));
+  }
+
+  debug(...args: any[]) {
+    this.withContext(() => this.baseLogger.debug(...args));
+  }
+
+  info(...args: any[]) {
+    this.withContext(() => this.baseLogger.info(...args));
+  }
+
+  warn(...args: any[]) {
+    this.withContext(() => this.baseLogger.warn(...args));
+  }
+
+  error(...args: any[]) {
+    this.withContext(() => this.baseLogger.error(...args));
+  }
+}
+
+// Export Logger instance type (not the class itself)
+export type BAILogger = Logger;
+
+const useBAILogger = () => {
+  return { logger: Logger.getInstance() };
+};
+
+export default useBAILogger;

react/package.json

@@ -129,6 +129,9 @@
             "@lobehub/fluent-emoji"
           ]
         }
+      ],
+      "no-console": [
+        "warn"
       ]
     }
   },

react/src/components/AutoScalingRuleEditorModal.tsx

@@ -19,7 +19,7 @@ import {
   Space,
   Typography,
 } from 'antd';
-import { BAIFlex, BAIModal, BAIModalProps } from 'backend.ai-ui';
+import { BAIFlex, BAIModal, BAIModalProps, useBAILogger } from 'backend.ai-ui';
 import _ from 'lodash';
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -66,6 +66,7 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
 }) => {
   const { t } = useTranslation();
   const { message } = App.useApp();
+  const { logger } = useBAILogger();
 
   const [nameOptions, setNameOptions] = useState<Array<string>>(
     METRIC_NAMES_MAP.KERNEL || [],
@@ -222,7 +223,7 @@ const AutoScalingRuleEditorModal: React.FC<AutoScalingRuleEditorModalProps> = ({
         }
       })
       .catch((err) => {
-        console.log(err);
+        logger.error(err);
       });
   };
 

react/src/components/Chat/ChatCard.tsx

@@ -25,6 +25,7 @@ import {
 } from 'ai';
 import { Alert, App, Card, CardProps, theme } from 'antd';
 import { createStyles } from 'antd-style';
+import { BAILogger, useBAILogger } from 'backend.ai-ui';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React, {
@@ -163,13 +164,17 @@ const ChatHeader = PureChatHeader;
 
 const ChatInput = React.memo(PureChatInput);
 
-function createBaseURL(basePath?: string, endpointUrl?: string | null) {
+function createBaseURL(
+  logger: BAILogger,
+  basePath?: string,
+  endpointUrl?: string | null,
+) {
   try {
     return endpointUrl
       ? new URL(basePath ?? '', endpointUrl).toString()
       : undefined;
   } catch {
-    console.error('Invalid base URL:', basePath, 'endpointUrl', endpointUrl);
+    logger.error('Invalid base URL:', basePath, 'endpointUrl', endpointUrl);
   }
 }
 
@@ -189,6 +194,7 @@ const PureChatCard: React.FC<ChatCardProps> = ({
 }) => {
   'use memo';
   const { t } = useTranslation();
+  const { logger } = useBAILogger();
   const { message: appMessage } = App.useApp();
   const endpointResult = useLazyLoadQuery<ChatCardQuery>(
     graphql`
@@ -222,7 +228,7 @@ const PureChatCard: React.FC<ChatCardProps> = ({
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
   const [startTime, setStartTime] = useState<number | null>(null);
 
-  const baseURL = createBaseURL(chat.provider.basePath, endpoint?.url);
+  const baseURL = createBaseURL(logger, chat.provider.basePath, endpoint?.url);
   const { models, modelId, modelsError } = useModels(
     chat.provider,
     fetchKey,
@@ -287,7 +293,7 @@ const PureChatCard: React.FC<ChatCardProps> = ({
               },
             });
           } catch (error) {
-            console.error('Client-side streaming error:', error);
+            logger.error('Client-side streaming error:', error);
             // Fallback to regular fetch
             return fetch(input, init);
           }