vue.jsvisual-studio-codevitesentryquasar

Visual Studio Code Debugger doesn't stop at breakpoint in TypeScript (ts) file but in Vue file


I have a problem that recently my Visual Studio Code debugger refused to stop at breakpoints when debugging my Vue.js application when setting a breakpoint in a plain TypeScript (.ts) file, whereas it works just fine when setting a breakpoint in a Vue Single-File-Component (.vue).

The current project setup is:

The launch configuration is

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug App in Chrome",
      "url": "http://localhost:9000",
      // To properly reflect changes after HMR with Vite
      "enableContentValidation": false,
      "webRoot": "${workspaceFolder}/src",
      // First start quasar dev in the background through a task
      // See https://stackoverflow.com/a/54017304/448357
      "preLaunchTask": "quasar-dev",
      // Terminate quasar dev when stopping debugging
      // See https://stackoverflow.com/a/60330174/448357
      "postDebugTask": "Terminate All Tasks",
    }
  ]
}

and the corresponding tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "quasar-dev",
      "command": "quasar dev",
      "isBackground": true,
      "type": "shell",
      // This task is run before some debug tasks.
      // Problem is, it's a watch script, and since it never exits, VSCode
      // complains. All this is needed so VSCode just lets it run.
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": ".",
          }
        }
      ]
    },
    {
      "label": "Terminate All Tasks",
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}

Solution

  • We've found the culprit. It was a Vite plugin (Sentry), that was loaded in the quasar.config.js like this:

    const { sentryVitePlugin } = require('@sentry/vite-plugin');
    
    // ...
    
    build: {
    
      // ...
    
      extendViteConf(viteConf) {
        viteConf.plugins.push(
           sentryVitePlugin({
              authToken: <SENTRY_AUTH_TOKEN>,
              org: <ORG>,
              project: <PROJECT>,
           }),
         );
      },
    
      // ...
    
    }
    

    which apparently interferes somehow with debugging TS files. The problem is not Visual Studio Code, or the Vue Official Language tools.

    Not sure whether the problem is Vite, Vite's plug-in mechanism, Quasar loading the plugin, or the Sentry plugin itself, but changing the configuration to this fixed the problem:

    const { sentryVitePlugin } = require('@sentry/vite-plugin');
    
    // ...
    
    build: {
    
      // ...
    
      extendViteConf(viteConf) {
        if (process.env.PROD) {
          viteConf.plugins.push(
            sentryVitePlugin({
              authToken: <SENTRY_AUTH_TOKEN>,
              org: <ORG>,
              project: <PROJECT>,
            }),
          );
        }
      },
    
      // ...
    
    }