Debug react through nginx reverse proxy with HTTPS and at a specific basepath in vscode

[C-monC]

Hi,

We have several apps running in iframes inside a parent app. The parent app runs at https://localhost.com Embedded apps at https://localhost.com/admin-console

npx create-react-app admin-console was run inside ${workspaceFolder}/apps creating the folder ${workspaceFolder}/apps/admin-console.

I have tried so many different configurations of the launch.json and I can't get the app to break in vscode.

The app is started with npm run start and the vscode launch.json:

        {
            "name": "Admin Console",
            "request": "launch",
            "type": "chrome",
            "url": "https://localhost.com/admin-console",
            "webRoot": "${workspaceFolder}/apps/admin-console/src"
        },

[connor4312]

Can you get a trace log using the following instructions?

---

If you're able to, add "trace": true to your launch.json and reproduce the issue. The location of the log file on your disk will be written to the Debug Console. Share that with us.

⚠️ This log file will not contain source code, but will contain file paths. You can drop it into https://microsoft.github.io/vscode-pwa-analyzer/index.html to see what it contains. If you'd rather not share the log publicly, you can email it to connor@xbox.com

[C-monC]

I've emailed you the logs.

For the purpose of understanding the logs. I first went to https://localhost.com which hosts a react-app that is always the parent of the other web-apps in iframes. Then opened admin-console in a iframe in the parent. Lastly I went to https://localhost.com/admin-console to load the web-app outside the parent app.

Thanks for checking this out.

[connor4312]

Your source map has the path service/AuthServices.ts. This is being added to the webRoot <dir>/apps/admin-console/src to form <dir>/apps/admin-console/src/static/js/service/AuthServices.ts, but you want it to be <dir>/apps/app-selector/src/service/AuthServices.ts instead. So you should adjust your webRoot accordingly.

You may want to update your build setup to have different source prefixes for each app (or sourceRoots, which is usually easily configurable in build tooling, including in tsconfig.json's) so that the debugger can distinguish between sources coming from different apps.

[C-monC]

The app-selector is the parent app in the directory<dir>/apps/app-selector/ - the debugging works with no config changes as it is served at the root https://localhost.com.

I think the webRoot should be correct in the original post: "webRoot": "${workspaceFolder}/apps/admin-console/src",

I tried modifying the sourceRoot in tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "sourceMap": true,                                              //new
    "sourceRoot": "<absolute path to apps>/apps/admin-console/src/" //new 
  },
  "include": [
    "src"
  ]
}

I also tried: "sourceRoot": "/apps/admin-console/src/" "sourceRoot": "apps/admin-console/src/"
"sourceRoot": "https://localhost.com/admin-console/src/"

[C-monC]

Hi, I'm revisting this as I need debugging again. I am really struggling to find any documentation on sourceMapPathOverrides, sourceRoot and webRoot.

I set sourceRoot to "sourceRoot": "https://localhost.com/ app-name /src/" I set webRoot to "webRoot": "${workspaceFolder}/ app-name

I would really appreciate it if you could hint at what sourceMapPathOverrides, sourceRoot and webRoot should be for a setup as follows:

• the app is served at https://localhost.com/ I.e. basepath = /\ in the case of react router.
• the source is at \/\ i.e. /home/user/project/\