microsoft / microsoft/vscode-js-debug

Consider Source Map For Stack Traces

Open
#2,176 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2k
Forks
373
Avg merge
1d 9m
Merged PRs (30d)
6

Description

Sometimes, I see stack traces in the debug output:

Code_-_Insiders_k0P4UJJ0Ts

  ERR Cannot read properties of undefined (reading 'read'): TypeError: Cannot read properties of undefined (reading 'read')
    at Derived._computeFn (http://localhost:3000/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsView.ts?t=1740093639452:81:132)
    at Derived._recomputeIfNeeded (http://localhost:3000/src/vs/base/common/observableInternal/derived.ts?t=1740052750953:213:27)
    at Derived.get (http://localhost:3000/src/vs/base/common/observableInternal/derived.ts?t=1740052750953:191:14)
    at Derived.readObservable (http://localhost:3000/src/vs/base/common/observableInternal/derived.ts?t=1740052750953:322:30)
    at Derived.read (http://localhost:3000/src/vs/base/common/observableInternal/base.ts:27:21)
    at Derived._computeFn (http://localhost:3000/src/vs/base/common/observableInternal/base.ts:55:27)
    at Derived._recomputeIfNeeded (http://localhost:3000/src/vs/base/common/observableInternal/derived.ts?t=1740052750953:213:27)
    at Derived.get (http://localhost:3000/src/vs/base/common/observableInternal/derived.ts?t=1740052750953:191:14)
    at Derived.readObservable (http://localhost:3000/src/vs/base/common/observableInternal/derived.ts?t=1740052750953:322:30)
    at Derived.read (http://localhost:3000/src/vs/base/common/observableInternal/base.ts:27:21)

However, it is difficult to act on them, as they refer to the out source, and not the original typescript files.
It would be very helpful if the source map was considered for these stacktraces.

Some implementation ideas:

  1. Detect stack-like strings and rewrite them before they are written to the debug console
  2. Implement a link detector in the debug console that opens the source mapped location (e.g. ./src/main.ts) instead of the link directly (http://localhost:3000/src/main.ts)
  3. Add [[Location]] to the view when an Error is viewed, similar to functions (though this wouldn't work out of the box, as not the error object is logged, but the error string).
    Code_-_Insiders_FX3EiwO6FY
  4. Register a cdp binding so that the debugee can translate stack traces on their own (if the binding is present). Additionally, the debugger could inject JS code that patches Error.stack to automatically consider stack traces

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the shown compiled stack trace in the debug console and compare it with the source-mapped location in the original TypeScript file, such as inlineEditsView.ts. Review the four proposed approaches and define which debug-console or Error-view behavior should be supported; done means stack locations open or display their original source locations.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
devtools
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.