6

I am trying to debug an angular/typescript application in Visual Code. Let's say I run the following code

try {
    ...
} catch (error) {
    console.log(error);
}

Assume an error occurs, I will see in my console the error being logged for a normal execution. The issue I face is that if I run the same situation in debug mode ("Launch Chrome against localhost"). I will get:

"Uncaught ReferenceError: error is not defined"

If I look at the 'Closure' section instead of the 'Local' section in the debug view. I have access to error_ which indeed contains what normally gets logged in a normal execution.

Is there a way to view the error as error instead of error_1 in debug mode for angular/typescript application?

I tried a suggestion from Typescript/babel import causing "_1.default is not a function" without any success.

Error preview

Greg7000
  • 297
  • 3
  • 15
  • Why not use the watch section in the debug view instead Variables > Closure. I would imagine you'll get the desired result for your "error" variable there – John Jan 14 '21 at 01:02
  • @John , I added [Error preview](https://ibb.co/NLmFhf1), as you can see I can't refer to 'error' in the watch section. – Greg7000 Jan 14 '21 at 16:28
  • What angular version are you using? Where that thing happens? Inside component/service? I just setup latest app from boilerplate and can't reproduce what you have. – Józef Podlecki Jan 14 '21 at 16:54
  • @JózefPodlecki, thing happens inside a component. The [following link](https://github.com/microsoft/TypeScript/issues/39625) provides useful information on this issue but it was not enough for me to fix this on my side . My angular is based on 8.2.14. – Greg7000 Jan 14 '21 at 17:33
  • How are you serving your frontend? Did you run an npm run start through the terminal or is the code being built elsewhere? Taking swings in the dark a little, but what does your launch.json file look like? – John Jan 14 '21 at 17:44
  • @John, "ng serve" for app launch, "Launch Chrome against localhost" for debug. (Angular CLI: 8.3.25, Node: 12.16.0, Angular: 8.2.14) – Greg7000 Jan 14 '21 at 18:43
  • do you have both a launch and attach in your configuration array? something like this: "configurations": [{ "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:44378/", "webRoot": "${workspaceFolder}", "sourceMaps": true, }, { "name": "Attach Chrome", "type": "chrome", "request": "attach", "url": "http://localhost:44378/", "webRoot": "${workspaceFolder}", "port": 9222, "sourceMaps": true }] – John Jan 14 '21 at 19:21

1 Answers1

3

That thing happens when ECMAScript target version in ts config is below ES6.

{
  "compilerOptions": {
    "target": "ES5",
  }
}

If you can't increase it then there is no solution.

Perhaps this is caused by async/await function is being rewritten into __awaiter __generator form. It doesn't even use try catch concept here...

 AppComponent.prototype.functionInComponent = function () {
        return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__awaiter"])(this, void 0, void 0, function () {
            var error_1;
            return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__generator"])(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        _a.trys.push([0, 1, , 3]);
                        ...
                    case 1:
                        error_1 = _a.sent();
                        ...
                        return [4 /*yield*/, asyncFunctionAfterConsoleLog];
                    case 2:
                        _a.sent();
                        return [3 /*break*/, 3];
                    case 3: return [2 /*return*/];
                }
            });
        });
    };
Józef Podlecki
  • 10,453
  • 5
  • 24
  • 50
  • unfortunately I can't verify since I am in a context where I can't switch to ES6. I might try with a different project, will post an update if my situation changes. – Greg7000 Jan 14 '21 at 20:20