chore: unify logger (#3121)

Author: 2heal1

.changeset/fast-apples-double.md

@@ -0,0 +1,17 @@
+---
+'@module-federation/bridge-shared': patch
+'@module-federation/bridge-react': patch
+'@module-federation/bridge-vue3': patch
+'@module-federation/rsbuild-plugin': patch
+'@module-federation/data-prefetch': patch
+'@module-federation/retry-plugin': patch
+'@module-federation/dts-plugin': patch
+'@module-federation/enhanced': patch
+'@module-federation/managers': patch
+'@module-federation/manifest': patch
+'@module-federation/modern-js': patch
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+chore: unified logger

packages/bridge/bridge-react/package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "@module-federation/bridge-shared": "workspace:*",
+    "@module-federation/sdk": "workspace:*",
     "react-error-boundary": "^4.0.13"
   },
   "peerDependencies": {

packages/bridge/bridge-react/src/utils.ts

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Logger } from '@module-federation/bridge-shared';
+import { createLogger } from '@module-federation/sdk';
 
-export const LoggerInstance = new Logger('bridge-react');
+export const LoggerInstance = createLogger(
+  '[ Module Federation Bridge React ]',
+);
 
 type typeReact = typeof React;
 

packages/bridge/bridge-shared/src/index.ts

@@ -1,3 +1,2 @@
 export type { RenderFnParams, ProviderParams } from './type';
-export { Logger } from './logger';
 export { dispatchPopstateEnv } from './env';

packages/bridge/bridge-shared/src/logger.ts

@@ -31,7 +31,8 @@
     "vue-router": "=3"
   },
   "dependencies": {
-    "@module-federation/bridge-shared": "workspace:*"
+    "@module-federation/bridge-shared": "workspace:*",
+    "@module-federation/sdk": "workspace:*"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

packages/bridge/vue3-bridge/package.json

@@ -1,3 +1,3 @@
-import { Logger } from '@module-federation/bridge-shared';
+import { createLogger } from '@module-federation/sdk';
 
-export const LoggerInstance = new Logger('vue3-bridge');
+export const LoggerInstance = createLogger('[ Module Federation Bridge Vue3 ]');

packages/bridge/vue3-bridge/src/utils.ts

@@ -1,3 +1,5 @@
-import { Logger } from '@module-federation/sdk';
+import { createLogger } from '@module-federation/sdk';
 
-export default new Logger('[Module Federation Data Prefetch]');
+const logger = createLogger('[ Module Federation Data Prefetch ]');
+
+export default logger;

packages/data-prefetch/src/logger/index.ts

@@ -27,7 +27,7 @@ import {
   REMOTE_ALIAS_IDENTIFIER,
   HOST_API_TYPES_FILE_NAME,
 } from '../constant';
-import { fileLog } from '../../server';
+import { fileLog, logger } from '../../server';
 import { axiosGet, cloneDeepOptions, isDebugMode } from './utils';
 import { UpdateMode } from '../../server/constant';
 
@@ -163,12 +163,10 @@ class DTSManager {
           console.error(err);
         }
       }
-      console.log(ansiColors.green('Federated types created correctly'));
+      logger.success('Federated types created correctly');
     } catch (error) {
       if (this.options.remote?.abortOnError === false) {
-        console.error(
-          ansiColors.red(`Unable to compile federated types, ${error}`),
-        );
+        logger.error(`Unable to compile federated types, ${error}`);
       } else {
         throw error;
       }
@@ -406,7 +404,7 @@ class DTSManager {
         this.consumeAPITypes(hostOptions);
       }
 
-      console.log(ansiColors.green('Federated types extraction completed'));
+      logger.success('Federated types extraction completed');
     } catch (err) {
       if (this.options.host?.abortOnError === false) {
         fileLog(

packages/dts-plugin/src/core/lib/DTSManager.ts

@@ -10,6 +10,7 @@ import {
   WEB_CLIENT_OPTIONS_IDENTIFIER,
   WebClientOptions,
   getIPV4,
+  logger,
 } from '../server';
 import type { Compiler, WebpackPluginInstance } from 'webpack';
 import path from 'path';
@@ -56,32 +57,32 @@ export class DevPlugin implements WebpackPluginInstance {
 
   private _stopWhenSIGTERMOrSIGINT(): void {
     process.on('SIGTERM', () => {
-      console.log(
-        chalk`{cyan ${this._options.name} Process(${process.pid}) SIGTERM, mf server will exit...}`,
+      logger.info(
+        `${this._options.name} Process(${process.pid}) SIGTERM, mf server will exit...`,
       );
       this._exit(PROCESS_EXIT_CODE.SUCCESS);
     });
 
     process.on('SIGINT', () => {
-      console.log(
-        chalk`{cyan ${this._options.name} Process(${process.pid}) SIGINT, mf server will exit...}`,
+      logger.info(
+        `${this._options.name} Process(${process.pid}) SIGINT, mf server will exit...`,
       );
       this._exit(PROCESS_EXIT_CODE.SUCCESS);
     });
   }
 
   private _handleUnexpectedExit(): void {
     process.on('unhandledRejection', (error) => {
-      console.error('Unhandled Rejection Error: ', error);
-      console.log(
-        chalk`{cyan ${this._options.name} Process(${process.pid}) unhandledRejection, mf server will exit...}`,
+      logger.error(error);
+      logger.error(
+        `Process(${process.pid}) unhandledRejection, mf server will exit...`,
       );
       this._exit(PROCESS_EXIT_CODE.FAILURE);
     });
     process.on('uncaughtException', (error) => {
-      console.error('Unhandled Rejection Error: ', error);
-      console.log(
-        chalk`{cyan ${this._options.name} Process(${process.pid}) uncaughtException, mf server will exit...}`,
+      logger.error(error);
+      logger.error(
+        `Process(${process.pid}) uncaughtException, mf server will exit...`,
       );
       this._exit(PROCESS_EXIT_CODE.FAILURE);
     });