Is it possible to log the stack trace where a variable changes?

Question

I want to change a certain variable every second. But the same variable is changing on multiple places of them, and one of them is resulting in NaN. I can't seem to find out what exactly is causing that. Is there a way to log the stack trace where it changes? Take for example this code:

let foo = 0;

for (foo = 0; foo < 5; foo++) {
  // Do something
}

if (isNaN(foo)) {
  // Console.log the stack trace where the variable changes into NaN
}

Is it possible to do this in one, two or three lines without having to change too much logic or adding too much things in order for it to work? It is node.js-compatible, so it can be a NPM package if that's easier.

What you want is not a script or package, but the debugger function to watch a variable or conditional breakpoints — Bergi
– Bergi, Commented Dec 4, 2024 at 19:29
You tagged this question with typescript, but didn't give foo a type. Several (not all) causes of NaN surfacing as a result in JavaScript could be avoided by using TypeScript where you type all the variables that have anything to do with assignments to foo. — trincot
– trincot, Commented Dec 4, 2024 at 19:30
As far as I know, there is no such possibility, but in the new version of node, it is possible to get a stacktrace from the running function. Link — Ali Azmoodeh
– Ali Azmoodeh, Commented Dec 4, 2024 at 19:54
If foo is actually inside an object, you could make it a setter or a Proxy and capture new Error().stack on every set — cbr
– cbr, Commented Dec 4, 2024 at 20:53

Daniel Gimenez · Accepted Answer · 2024-12-04 21:22:58Z

1

If foo is in an object, you could wrap that object in a proxy that will report when certain properties change. The proxy object below will call console.trace when a property is set with a key that was passed as part of the propsToWatch array.

function propertyWatcher<T extends object>(
  target: T,
  ...propsToWatch: (keyof T)[]
) {
  return new Proxy(target, {
    set: (tgt, key, value) => {
      if (propsToWatch.includes(key as keyof T)) {
        console.trace(`changing "%s" from %o to %o in %o`, key, (tgt as any)[key], value, tgt);
      }
      (tgt as any)[key] = value;
      return true;
    },
  });
}

Usage

const fooHost = { foo: 1 };

const fooHostProxy = propertyWatcher(fooHost, 'foo');

function setFooAndBar() {
  fooHostProxy.foo = 2;
}

setFooAndBar();

Output

changing "foo" from 1 to 2 in {foo: 1, bar: 1} 
set          @ main.ts:10
setFooAndBar @ main.ts:24

answered Dec 4, 2024 at 21:22

Daniel Gimenez

21.1k4 gold badges60 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mart Dec 4, 2024 at 21:26

Yeah! That's what I was looking for! Thanks once again!

James · Accepted Answer · 2024-12-04 20:56:43Z

0

Depending on what version of node you are using I would just setup an Observable or whatever front end library I am using implementation of it. You can find example of this all over stack.

How to observe value changes in JS variables

answered Dec 4, 2024 at 20:56

James

1,51412 silver badges30 bronze badges

Collectives™ on Stack Overflow

Is it possible to log the stack trace where a variable changes?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related