feat: webpack-dev-server GC plugin & auto-restat on crash

Author: ikevin127

config/webpack/ForceGarbageCollectionPlugin.ts

@@ -0,0 +1,41 @@
+/* eslint-disable no-console */
+import type {Compiler} from 'webpack';
+
+/**
+ * Custom webpack plugin that forces garbage collection every 5 compilations
+ * and logs memory usage to help monitor memory consumption during development.
+ * 
+ * Note: Requires Node.js to be started with --expose-gc flag to enable garbage collection.
+ */
+class ForceGarbageCollectionPlugin {
+    private compilationCount = 0;
+
+    apply(compiler: Compiler) {
+        if (gc && typeof gc === 'function') {
+            compiler.hooks.done.tap(this.constructor.name, () => {
+                this.compilationCount++;
+                
+                // Log memory usage every compilation
+                const memUsage = process.memoryUsage();
+                const heapUsedMB = Math.round(memUsage.heapUsed / 1024 / 1024);
+                const heapTotalMB = Math.round(memUsage.heapTotal / 1024 / 1024);
+                
+                console.log(`📊 Compilation #${this.compilationCount} - Heap: ${heapUsedMB}MB/${heapTotalMB}MB`);
+                if (this.compilationCount % 5 === 0) {
+                    console.log(`🗑️ Forcing garbage collection after ${this.compilationCount} compilations`);
+                    // @ts-expect-error - gc is a global function provided when Node.js is started with --expose-gc flag
+                    gc();
+                    
+                    // Log memory after garbage collection
+                    const memAfterGC = process.memoryUsage();
+                    const heapAfterMB = Math.round(memAfterGC.heapUsed / 1024 / 1024);
+                    console.log(`✅ Post-GC heap size: ${heapAfterMB}MB (freed ${heapUsedMB - heapAfterMB}MB)`);
+                }
+            });
+        } else {
+            console.warn('⚠️ ForceGarbageCollectionPlugin: gc() function not available. Start Node.js with --expose-gc flag to enable garbage collection.');
+        }
+    }
+}
+
+export default ForceGarbageCollectionPlugin;

config/webpack/webpack.common.ts

@@ -68,7 +68,6 @@ function mapEnvironmentToLogoSuffix(environmentFile: string): string {
  * Get a production grade config for web or desktop
  */
 const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment): Configuration => {
-    // Determine if this is a development build
     const isDevelopment = file === '.env' || file === '.env.development';
 
     return {

config/webpack/webpack.dev.ts

@@ -7,6 +7,7 @@ import type {Configuration} from 'webpack';
 import {DefinePlugin} from 'webpack';
 import type {Configuration as DevServerConfiguration} from 'webpack-dev-server';
 import {merge} from 'webpack-merge';
+import ForceGarbageCollectionPlugin from './ForceGarbageCollectionPlugin';
 import type Environment from './types';
 import getCommonConfiguration from './webpack.common';
 
@@ -65,38 +66,7 @@ const getConfiguration = (environment: Environment): Promise<Configuration> =>
                     'process.env.NODE_ENV': JSON.stringify('development'),
                 }),
                 new ReactRefreshWebpackPlugin({overlay: {sockProtocol: 'wss'}}),
-                // Custom plugin to force garbage collection every 5 compilations
-                {
-                    apply(compiler) {
-                        let compilationCount = 0;
-                        if (gc && typeof gc === 'function') {
-                            compiler.hooks.done.tap('ForceGCEvery5Compilations', () => {
-                                compilationCount++;
-                                
-                                // Log memory usage every compilation
-                                const memUsage = process.memoryUsage();
-                                const heapUsedMB = Math.round(memUsage.heapUsed / 1024 / 1024);
-                                const heapTotalMB = Math.round(memUsage.heapTotal / 1024 / 1024);
-                                
-                                // eslint-disable-next-line no-console
-                                console.log(`📊 Compilation #${compilationCount} - Heap: ${heapUsedMB}MB/${heapTotalMB}MB`);
-                                
-                                if (compilationCount % 5 === 0) {
-                                    // eslint-disable-next-line no-console
-                                    console.log(`🗑️  Forcing garbage collection after ${compilationCount} compilations`);
-                                    // @ts-expect-error - gc is a global function provided by Node.js when --expose-gc is used
-                                    gc();
-                                    
-                                    // Log memory after GC
-                                    const memAfterGC = process.memoryUsage();
-                                    const heapAfterMB = Math.round(memAfterGC.heapUsed / 1024 / 1024);
-                                    // eslint-disable-next-line no-console
-                                    console.log(`✅ Post-GC heap: ${heapAfterMB}MB (freed ${heapUsedMB - heapAfterMB}MB)`);
-                                }
-                            });
-                        }
-                    },
-                },
+                new ForceGarbageCollectionPlugin(),
             ],
             // This prevents import error coming from react-native-tab-view/lib/module/TabView.js
             // where Pager is imported without extension due to having platform-specific implementations

desktop/start.ts

@@ -12,7 +12,7 @@ portfinder
         port: basePort,
     })
     .then((port) => {
-        const devServer = `webpack-dev-server --config config/webpack/webpack.dev.ts --port ${port} --env platform=desktop`;
+        const devServer = `./scripts/start-dev-with-auto-restart.sh --port ${port} --env platform=desktop --no-open`;
         const buildMain = 'webpack watch --config config/webpack/webpack.desktop.ts --config-name desktop-main --mode=development';
 
         const env = {

package.json

@@ -28,7 +28,7 @@
     "start": "npx rnef start",
     "web": "./scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server",
     "web-proxy": "ts-node web/proxy.ts",
-    "web-server": "./scripts/web-server-with-restart.sh",
+    "web-server": "./scripts/start-dev-with-auto-restart.sh",
     "build": "webpack --config config/webpack/webpack.common.ts --env file=.env.production && ts-node ./scripts/combine-web-sourcemaps.ts",
     "build-staging": "webpack --config config/webpack/webpack.common.ts --env file=.env.staging && ts-node ./scripts/combine-web-sourcemaps.ts",
     "build-adhoc": "webpack --config config/webpack/webpack.common.ts --env file=.env.adhoc && ts-node ./scripts/combine-web-sourcemaps.ts",

scripts/web-server-with-restart.sh scripts/start-dev-with-auto-restart.shscripts/web-server-with-restart.sh renamed to scripts/start-dev-with-auto-restart.sh

@@ -2,15 +2,17 @@
 
 # Auto-restart webpack-dev-server on memory crashes
 # This script monitors for heap out of memory errors and automatically restarts
+# Usage: ./start-dev-with-auto-restart.sh [webpack-dev-server arguments]
 
+WDS_ARGS="$@"
 MAX_RESTARTS=10
 RESTART_COUNT=0
 RESTART_DELAY=1
 
 echo "🚀 Starting webpack-dev-server with auto-restart (max restarts: $MAX_RESTARTS)"
 
 run_wds () {
-    node --expose-gc "$(npm root)/webpack-dev-server/bin/webpack-dev-server.js" $1 --config config/webpack/webpack.dev.ts
+    node --expose-gc ./node_modules/.bin/webpack-dev-server $1 $WDS_ARGS --config config/webpack/webpack.dev.ts
 }
 
 while [ $RESTART_COUNT -lt $MAX_RESTARTS ]; do
@@ -24,14 +26,13 @@ while [ $RESTART_COUNT -lt $MAX_RESTARTS ]; do
 
     # Capture exit code
     EXIT_CODE=$?
-    
     # Check if it was a memory-related crash
     if [ $EXIT_CODE -eq 134 ] || [ $EXIT_CODE -eq 137 ] || [ $EXIT_CODE -eq 139 ]; then
         echo "💥 Memory crash detected (exit code: $EXIT_CODE)"
         RESTART_COUNT=$((RESTART_COUNT + 1))
 
         if [ $RESTART_COUNT -lt $MAX_RESTARTS ]; then
-            echo "🔄 Auto-restarting in $RESTART_DELAY seconds... (restart #$RESTART_COUNT)"
+            echo "🔄 Auto-restarting... (restart #$RESTART_COUNT)"
             sleep $RESTART_DELAY
         else
             echo "❌ Max restarts reached ($MAX_RESTARTS). Exiting."