feat: Source mapping for stacktraces in dev mode

We have to cheat again and use require() to lazy load a dev dependency.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

5 files changed, 40 insertions, 7 deletions

diff --git a/packages/main/esbuild.config.js b/packages/main/esbuild.config.js
index ef0aa71..996ec5a 100644
--- a/packages/main/esbuild.config.js
+++ b/packages/main/esbuild.config.js
@@ -7,7 +7,7 @@ import getEsbuildConfig from '../../config/getEsbuildConfig.js';
 const externalPackages = ['electron'];
 
 if (process.env.MODE !== 'development') {
-  externalPackages.push('electron-devtools-installer');
+  externalPackages.push('electron-devtools-installer', 'source-map-support');
 }
 
 const gitInfo = getRepoInfo();
diff --git a/packages/main/package.json b/packages/main/package.json
index c03e81e..9b87835 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -33,10 +33,12 @@
     "@types/ms": "^0.7.31",
     "@types/node": "^17.0.12",
     "@types/slug": "^5",
+    "@types/source-map-support": "^0",
     "electron-devtools-installer": "^3.2.0",
     "esbuild": "^0.14.14",
     "git-repo-info": "^2.1.1",
     "jest": "^27.4.7",
-    "jest-mock": "^27.4.6"
+    "jest-mock": "^27.4.6",
+    "source-map-support": "^0.5.21"
   }
 }
diff --git a/packages/main/src/devTools.ts b/packages/main/src/devTools.ts
index 4ca1bf3..10f4545 100644
--- a/packages/main/src/devTools.ts
+++ b/packages/main/src/devTools.ts
@@ -35,13 +35,28 @@ export const DEVMODE_ALLOWED_URL_PREFIXES = [
 ];
 
 /**
+ * Enables using source maps for node stack traces.
+ */
+export function enableStacktraceSourceMaps(): void {
+  const sourceMapSupport =
+    /* eslint-disable-next-line
+      import/no-extraneous-dependencies,
+      global-require,
+      @typescript-eslint/no-var-requires,
+      unicorn/prefer-module --
+      Hack to lazily require a CJS module from an ES module transpiled into a CJS module.
+    */
+    require('source-map-support') as typeof import('source-map-support');
+  sourceMapSupport.install();
+}
+
+/**
  * Installs the react and redux developer tools extensions.
  *
  * We use the redux devtools and connect the mobx store to it with `mst-middlewares`,
  * because the mobx-state-tree devtools are currently unmaintained.
  */
 export async function installDevToolsExtensions(): Promise<void> {
-  // Hack to lazily require a CJS module from an ES module transpiled into a CJS module.
   const {
     default: installExtension,
     REACT_DEVELOPER_TOOLS,
@@ -50,7 +65,8 @@ export async function installDevToolsExtensions(): Promise<void> {
       import/no-extraneous-dependencies,
       global-require,
       @typescript-eslint/no-var-requires,
-      unicorn/prefer-module
+      unicorn/prefer-module --
+      Hack to lazily require a CJS module from an ES module transpiled into a CJS module.
     */
   } = require('electron-devtools-installer') as typeof import('electron-devtools-installer');
   await installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS], {
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 2830fa7..ee89f49 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -41,6 +41,7 @@ import osName from 'os-name';
 
 import {
   DEVMODE_ALLOWED_URL_PREFIXES,
+  enableStacktraceSourceMaps,
   installDevToolsExtensions,
   openDevToolsWhenReady,
 } from './devTools';
@@ -55,11 +56,14 @@ const log = getLogger('index');
 // Always enable sandboxing.
 app.enableSandbox();
 
-// Use alternative directory when debugging to avoid clobbering the main installation.
 if (isDevelopment) {
+  // Use alternative directory when debugging to avoid clobbering the main installation.
   app.setPath('userData', `${app.getPath('userData')}-dev`);
+  ensureDirSync(app.getPath('userData'));
+
+  // Use source maps in stack traces.
+  enableStacktraceSourceMaps();
 }
-ensureDirSync(app.getPath('userData'));
 
 // Only allow a single instance at a time.
 const isSingleInstance = app.requestSingleInstanceLock();
diff --git a/yarn.lock b/yarn.lock
index f7dd338..6a1288e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1243,6 +1243,7 @@ __metadata:
     "@types/ms": ^0.7.31
     "@types/node": ^17.0.12
     "@types/slug": ^5
+    "@types/source-map-support": ^0
     chalk: ^5.0.0
     deep-equal: ^2.0.5
     electron: 17.0.0
@@ -1262,6 +1263,7 @@ __metadata:
     nanoid: ^3.1.30
     os-name: ^5.0.1
     slug: ^5.2.0
+    source-map-support: ^0.5.21
   languageName: unknown
   linkType: soft
 
@@ -1672,6 +1674,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/source-map-support@npm:^0":
+  version: 0.5.4
+  resolution: "@types/source-map-support@npm:0.5.4"
+  dependencies:
+    source-map: ^0.6.0
+  checksum: 160ff77e8a101b18d9915cb5320fd73d484679aef8518ce007b9b5988e333631778730196c4bb15517ff881bee805663fd8640c0ce2ebfab65f061103c452369
+  languageName: node
+  linkType: hard
+
 "@types/stack-utils@npm:^2.0.0":
   version: 2.0.1
   resolution: "@types/stack-utils@npm:2.0.1"
@@ -8390,7 +8401,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-support@npm:^0.5.19, source-map-support@npm:^0.5.6":
+"source-map-support@npm:^0.5.19, source-map-support@npm:^0.5.21, source-map-support@npm:^0.5.6":
   version: 0.5.21
   resolution: "source-map-support@npm:0.5.21"
   dependencies: