Unable to log circular objects with functions

[marvinhagemeister]

Logging an object with a circular reference works for as long as no property points to a function.

Without any function it works fine:

const a = { type: null, foo: 123 }
a.foo = a;
console.log(a);

...but when a function is present it fails.

const Foo = () => null;
const obj = { type: Foo, foo: null };
obj.foo = obj;
console.log(obj);

Error message:

Error while collecting browser logs: Evaluation failed: TypeError: Converting circular structure to JSON
          --> starting at object with constructor 'Window'
          --- property 'self' closes the circle
          at JSON.stringify (<anonymous>)
          at Object.serialize (<anonymous>:103:17)
          at __puppeteer_evaluation_script__:2:47

[LarsDenBakker]

This one is pretty interesting. We handle circular references, but to serialize functions we actually create a new object with some information about the function. This way we created a new circular reference which wasn't handled properly.

It's fixed in @web/[email protected]

[marvinhagemeister]

Woa that was quick!! 🙌

[bennypowers]

Getting

TypeError","message":"Converting circular structure to JSON

in some test files

at

export async function sendMessage(message) {
  if (!message.type) {
    throw new Error('Missing message type');
  }
  await webSocketOpened;
  webSocket.send(JSON.stringify(message));
}

web/packages/dev-server-core/src/web-sockets/webSocketsPlugin.ts

Line 45 in df43d1d

webSocket.send(JSON.stringify(message));

We should safe-stringify there