VUE quisk start using @auth0-spa-js, debugging issues in VS Code

Help
1

I’m trying to debug in VS Code the quick start of how to use Auth0 in VUE.
I noticed the following weird behaviour that I don’t know if it is a problem of Axios, auth0-spa-js module or something else.
If I use Promise syntax instead of async/await as in the provided example at the link above I’m able to place a breakpoint at catch and inspect error message in the debugger.
The code “reviseted” is:

methods: {
    async callApi2() {
      this.executed = true;
      try {
        const { data } = await this.$http.get(
          "https://gorest.co.in/public-api/posts5"
        );
        this.apiMessage = data;
      } catch (error) {
        this.apiMessage = error.stack;
      }
    },

    callApi() {
      this.executed = true;

      const accessToken = "gjkgkjgk"; //await this.$auth.getTokenSilently();
      this.$http
        .get("/api/external", {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        })
        .then((data) => (this.apiMessage = data))
        .catch(
          (error) =>
            //console.log(err);
            (this.apiMessage = `Error: the server responded with '${error.response.status}: ${error.response.statusText}'`)
        );
    },
  },
};
</script>

Using the above code all works fine while using the same callApi method in async/await syntax I can’t view the error (noticed I deliberately inserted an invalid token). I inserted also another method, callApi2 that exhibits the same weird behaviour: I can view error in the browser (v-highlightjs) but not while debugging!!
What am I missing?
Thanks.

2

Hey there @ferlito.sergio :wave:

Thanks for sharing this, I will dive into it and let you know what I find. In the meantime if you direct message me your tenant name I will be happy to take a look at your configuration as well. Thanks!

4

Hi @James.Morrison,
Thanks for your kind reply.
Here you can find a “revised” version of Auth0’s quick start (all modules updated).
With the following VS Code “launch.js” settings:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      },
      "preLaunchTask": "serve"

    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

And “tasks.json”:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "serve",
        "type": "npm",
        "script": "serve-vue",
        "isBackground": true,
        "problemMatcher": [
          {
            "base": "$tsc-watch",
            "background": {
              "activeOnStart": true,
              "beginsPattern": "Starting development server",
              "endsPattern": "Compiled successfully"
            }
          }
        ],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      }
    ]
  }

I was finally able to correctly debug the code app (the issue I described has gone).
For my understanding, the described issue is not related to Axios or auth0-spa-js module but entirely related to how to start VS Code debug. All depends on “launch.json” and “task.json” files inside “.vscode” folder that probably needs sometimes different setting according to webpack an babel configurations files. I’m experiencing many weird behaviours from VS Code in VUE or Node debugging as: “unbound breakpoints”, splits in the breakpoint position or the previously described issue reported in this post. So far I was not able to derive some “rule” to diagnose and resolve such issues. If you have any suggestions I would highly appreciate? Thanks.