How to Use Proxy for Logging in JavaScript

Use the Proxy object in JavaScript to intercept operations on an object, such as property access or assignment, and add logging inside the handler methods like get and set. This lets you log every time a property is read or changed without modifying the original object directly.

Syntax

The Proxy constructor takes two arguments: the target object you want to wrap, and a handler object that defines traps (methods) to intercept operations.

• target: The original object to watch.
• handler: An object with functions like get and set to intercept property access and assignment.

Example traps:

• get(target, property, receiver): Called when a property is read.
• set(target, property, value, receiver): Called when a property is set.

javascript

const proxy = new Proxy(target, {
  get(target, property, receiver) {
    // called on property read
  },
  set(target, property, value, receiver) {
    // called on property write
  }
});

Example

This example shows how to create a proxy that logs every time a property is read or changed on an object.

javascript

const user = { name: 'Alice', age: 25 };

const loggedUser = new Proxy(user, {
  get(target, prop) {
    console.log(`Property '${prop}' was read.`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Property '${prop}' was set to '${value}'.`);
    target[prop] = value;
    return true;
  }
});

console.log(loggedUser.name);  // Logs read and then outputs 'Alice'
loggedUser.age = 26;          // Logs set
console.log(loggedUser.age);  // Logs read and then outputs 26

Output

Property 'name' was read.
Alice
Property 'age' was set to '26'.
Property 'age' was read.
26

Common Pitfalls

Common mistakes when using proxies for logging include:

• Not returning the property value in the get trap, which causes undefined results.
• Forgetting to return true in the set trap, which signals success to JavaScript.
• Logging too much or causing side effects inside traps, which can slow down your program.

javascript

const obj = { x: 10 };

// Wrong: missing return in get
const proxyWrongGet = new Proxy(obj, {
  get(target, prop) {
    console.log(`Accessing ${prop}`);
    // missing return target[prop];
  }
});

console.log(proxyWrongGet.x); // Outputs undefined

// Correct get trap
const proxyRightGet = new Proxy(obj, {
  get(target, prop) {
    console.log(`Accessing ${prop}`);
    return target[prop];
  }
});

console.log(proxyRightGet.x); // Outputs 10

Output

Accessing x
undefined
Accessing x
10

Quick Reference

Summary tips for using Proxy for logging:

• Always return the original property value in get.
• Return true in set to confirm assignment.
• Use proxies to add logging without changing original object code.
• Keep logging simple to avoid performance issues.

Key Takeaways

Use JavaScript Proxy with get and set traps to log property access and changes.

Always return the property value in get and true in set to avoid errors.

Proxies let you add logging without modifying the original object.

Avoid heavy logic inside proxy traps to keep performance smooth.