exception stack locations are incorrect when using typescript/webpack and asar

[zac-jacobson]

Pre-flight checklist

• [X] I have read the contribution documentation for this project.
• [X] I agree to follow the code of conduct that this project uses.
• [X] I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

6.0.0-beta.61

Electron version

v15.1.2

Operating system

Windows 10 (19042.1320)

Last known working Electron Forge version

No response

Expected behavior

We have been troubleshooting some problems with our app, but the error stack traces are not accurately reflecting where in the code the errors occurred, which makes troubleshooting difficult.

When an error is thrown in our electron app, we would expect the stack attribute of that error to correctly point to the place in the webpack-generated index.js file, be it for main or renderer.

And when packagerConfig.asar: false, that stack attribute does point to the spot in the code where an error is created.

Actual behavior

If packagerConfig.asar: true, the location given in the error's stack do not line up in the generated index.js with where the error was created.

Steps to reproduce

We are setting webpack.devtool: "source-map"

I include a line during app initialization to print out a stack trace, just to see what is going on, just to show that this is not an issue with our error reporting module:

    logger.warn(new Error("test error"));

running the make process and comparing the logged error's stack locations with the generated webpack artifacts, it does not point at the correct place when packagerConfig.asar: true

Additional information

forge.config.js

const fs = require("fs");
const path = require("path");
const packageJson = require("./package.json");

const { desktopProductName, version } = packageJson;
const ignore = (file) => {
  if (!file) return false;
  // Adding .map files to what's in @electron-forge/webpack-plugin
  return !/^[/\\]\.webpack($|[/\\]).*$/.test(file) || /\.js\.map$/.test(file);
};

const config = {
  packagerConfig: {
    name: desktopProductName,
    appBundleId: "com.electron.my-ap",
    appCategoryType: "public.app-category.business",
    asar: true,
    darwinDarkModeSupport: true,
    extraResource: ["resources", "static/images/tray", "static/app-update.yml"],
    icon: path.resolve(__dirname, "static", "images", "icon", "standard-color"),
    ignore: ignore,
    protocols: [
      {
        name: "com.electron.my-app",
        schemes: ["myapp"],
      },
    ],
  },
  makers: [
    {
      name: "@electron-forge/maker-squirrel",
      platforms: ["win32"],
      config: {
        iconUrl: "https://XXX.cloudfront.net/MyApp/icons/standard-color.ico",
        loadingGif: "./static/images/installer/install_splash.gif",
        name: "my_app",
        noMsi: true,
        setupExe: `${desktopProductName}-${version} Setup.exe`,
        setupIcon: "./static/images/icon/standard-color.ico",
      },
    },
    {
      name: "@electron-forge/maker-dmg",
      config: {
        background: "static/images/installer/background.png",
        contents: [
          { x: 422, y: 256, type: "link", path: "/Applications" },
          {
            x: 237,
            y: 256,
            type: "file",
            path: path.join(__dirname, "out", `${desktopProductName}-darwin-x64`, `${desktopProductName}.app`),
          },
        ],
        icon: "./static/images/icon/standard-color.icns",
      },
    },
    {
      name: "@electron-forge/maker-zip",
      platforms: ["darwin"],
    },
  ],
  plugins: [
    [
      "@electron-forge/plugin-webpack",
      {
        devContentSecurityPolicy:
          "default-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-eval' 'unsafe-inline' data:",
        mainConfig: "./webpack.main.config.js",
        renderer: {
          config: "./webpack.renderer.config.js",
          entryPoints: [
            {
              html: "./src/renderer/index.html",
              js: "./src/renderer/index.tsx",
              name: "main_window",
            },
          ],
          nodeIntegration: true,
        },
        port: 3005,
      },
    ],
  ],
};

module.exports = config;

[iyobo]

Can concur that source-maps are not respected in error outputs despite the fact that they look like they are being generated in the file system.

E.g in the case of

⠴ Compiling Renderer CodeIssues checking in progress...
⠙ Compiling Renderer CodeApp threw an error during load
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:371:5)
    at validateString (node:internal/validators:119:11)
    at Object.join (node:path:1172:7)
    at Object../src/main/data/local/appStorage.ts (/home-dir/.webpack/main/index.js:53234:15)
    at __webpack_require__ (/home-dir/.webpack/main/index.js:58123:42)
    at Object../src/main/handlers/storyHandlers.ts (/home-dir/.webpack/main/index.js:53692:20)
    at __webpack_require__ (/home-dir/.webpack/main/index.js:58123:42)
    at Object../src/main/helpers/mainUtils.ts (/home-dir/.webpack/main/index.js:54124:23)
    at __webpack_require__ (/home-dir/.webpack/main/index.js:58123:42)
    at Object../src/main/index.ts (/home-dir/.webpack/main/index.js:54411:19)

There exists a /home-dir/.webpack/main/index.js.map, but it is ignored in this stack trace.

[p10tr3k]

I also have this problem. This is what I have tried without success:

Installed npm install --save-dev source-map-support

In Index.ts:

if (process.env.NODE_ENV === 'development') {
  require('source-map-support').install();
}

forge.config.ts:

plugins: [
  new AutoUnpackNativesPlugin({}),
  new WebpackPlugin({
    mainConfig: {
      ...mainConfig,
      devtool: 'source-map', 
    },
    renderer: {
      config: {
        ...rendererConfig,
        devtool: 'source-map', 
      },
      entryPoints: [
        {
          html: './src/index.html',
          js: './src/app.tsx',
          name: 'main_window',
          preload: {
            js: './src/preload.ts',
          },
        },
      ],
    },
  }),
],

tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
     ...
  }
}