Problem
function logPropertyUpdates(target) {
  return new Proxy(target, {
    set(target, property, value, receiver) {
      console.log(`Property "${property}" changed to "${value}"`);
      return Reflect.set(target, property, value, receiver);
    },
  });
}

const user = logPropertyUpdates({
  name: "Lew",
  details: {
    age: 24,
    country: "USA",
  },
});

user.name = "Kareem";
user.details.age = 25;
Solution

ES6 Proxies are not recursive by default. In the above example, the user object is wrapped in a Proxy, but the details property is not. Therefore, when the user.details.age property is updated, the Proxy is not triggered.

To fix this, we can make the Proxy recursive:

function logPropertyUpdates(target) {
  if (typeof target === "object" && target !== null) {
    return new Proxy(target, {
      get(target, property, receiver) {
        const value = Reflect.get(target, property, receiver);
        return logPropertyUpdates(value);
      },
      set(target, property, value, receiver) {
        console.log(`Property "${property}" changed to "${value}"`);
        return Reflect.set(target, property, value, receiver);
      },
    });
  }
  return target;
}

const user = logPropertyUpdates({
  name: "Lew",
  details: {
    age: 24,
    country: "USA",
  },
});

user.name = "Kareem";
user.details.age = 25;