vscode-js-debug icon indicating copy to clipboard operation
vscode-js-debug copied to clipboard

Consider Source Map For Stack Traces

Open hediet opened this issue 9 months ago • 3 comments

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

hediet avatar Feb 21 '25 10:02 hediet

We do this but only if we're logging an Error object. We can probably be more aggressive

https://github.com/microsoft/vscode-js-debug/blob/cdca7f206692f5ceed702c19b7f7f72aa2bba3b9/src/adapter/console/textualMessage.ts#L110

connor4312 avatar Feb 21 '25 16:02 connor4312

Ah yes, I can verify that console.log(new Error()) works, but console.log(new Error().stack) not!

Maybe we can fix onUnhandledError in vscode to log the error object instead of the stack trace.

hediet avatar Feb 21 '25 17:02 hediet

I'm good making that check more permissive too. PR welcome :)

connor4312 avatar Feb 21 '25 17:02 connor4312