Console logs can cause infinite loop when logging objects with a Proxy

[benjackwhite]

Thanks to some debugging with a customer, we found an interesting "edge" case that can trigger an infinite loop via console logs.

The situation is like this (WARNING: If you run this with console log recording enabled your browser will freeze).

let target = {
  foo: "bar"
};

const handler = {
  get(target, prop, receiver) {
    if (prop === "foo") {
      console.warn("foo was accessed. This shouldn't be done... Context:", target)
    }
    return Reflect.get(...arguments);
  },
};

const proxy = new Proxy(target, handler);
target.proxy = proxy

console.log(proxy); 

1. We log the proxy object
2. The console log is intercepted by our code
3. It creates a "copy" of the object via stringifying
4. This triggers the proxied get call which itself is logging a warning
5. ... which triggers Step 2 and now we have a loop 🙈

This is probably something where the fix would need to be in rrweb but I wonder if there is a way we could at least detect this and stop the infinite loop occurring...

[benjackwhite]

Fix is mentioned here. I think we might publish our own forked version of rrweb so we can control this flow a bit better and contribute back to the core