52

Now that @canon has (more than) fixed the issues, I'm updating this question from a report to a :

Please update the stack snippets console code.

The current version of the stack snippet console has some rendering issues concerning duplicate and circular references.


Old bug report:

Take a look at the log output from this short snippet:

const x = {};
const y = [];
const obj = {
  foo: x,
  bar: x,
  baz: {x, y},
  wut: [x, y]
};

console.log(obj);
.as-console-wrapper { max-height: none !important; }

I'd expect the output to be displayed similar to how modern browsers do it:

enter image description here

(never mind the collapse / expand logic, or even proto)

Instead, values that are referenced multiple times in the same object are displayed as /**ref:n**/, without any clear indication of what the reference actually is / contains:

enter image description here

What does ref:4 refer to? It's not immediately obvious, and quite an unintuitive way of displaying a object's structure.

This seems to be either a bug or a new feature. Either way, can we get the old log output format back?

Or, preferably, implement it like a browser's console:

Build a tree structure that can be interactively expanded / collapsed. Expanding a level dynamically adds the next layer to the rendered tree. This way, you won't ever have issues with circular references, no hacky fix, but a familiar experience.

I've cross-posted a issue on the stack snippet repository.

0

2 Answers 2

16

You've found a bug (and a hack).

I have good news, though; they're both resolved in the latest version on github. I've replaced the old JSON-flavored object dumps with lazy tree expansion.

Here's a demo:

let values = ["a", "b", "c", 1, 2, 3, null, undefined, new Date(), /(?:)/, window];      /*<ignore>*/console.config({maximize:true,timeStamps:false,autoScroll:false});/*</ignore>*/
console.log("test: %o, date: %o", window, new Date());
console.log(values);
console.log({values});
console.log(...values);
console.log(function derpopotamus(a, b, c) {});
console.table([
  {name: "John", age:23, gender: "male"},
  {name: "Zoe", age:22, gender: "female"},
  {name: "Cthulhu", age: Infinity, gender:undefined},
]);
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js?201805111946"></script>

Probably ought to:

  • Create customized "collapsed" previews for HTMLElement, objects, and arrays.
  • Expand iterable values 100 at a time.
  • Bemoan lacking support for ShadowDOM and custom elements.
  • Consider hiding the timestamp column by default to allow more room for object expansion.
  • Tidy up some display issues.
  • Ask if the SO team is willing to adopt these changes. Haney was the point person last time.
8
  • Thanks for the answer. Not to be pushy, but are there plans to change the console output? Would a dynamically expandable tree, like how browsers do it, be an option (/be feasible)?
    – Cerbrus
    Commented Jan 3, 2018 at 20:56
  • So I guess you're a CodeMirror dev?
    – user247702
    Commented Jan 4, 2018 at 18:19
  • 1
    This is the best solution I could've hoped for! I'm loving the formatting / styling. Very well done!
    – Cerbrus
    Commented Jan 7, 2018 at 11:51
  • 2
    Great stuff! I wonder if it'll be 2019, 2020, or later before it gets incorporated by SE. Commented Jan 8, 2018 at 6:52
  • Lazy expansion should probably be opt-in, given this issue. Potentially thousands of answers relying on the old in-snippet console's behavior. Commented Jan 8, 2018 at 6:53
  • I'm referring to you in a feature request. Which would be appropriate, "he", "she", or something else? Commented Jan 8, 2018 at 8:13
  • @canon: "it" then. :-) Cool, I'll hold off updating and bountying that feature request for now then. Would you ping me (and/or bounty the FR) when you're ready? What do you think of making the lazy eval opt-in? (Supporting legacy is a pain, eh? :-) ) Commented Jan 8, 2018 at 8:19
  • 1
    @canon - True. But since SE show zero interest in improving the non-teams platform -- they haven't even included the improvements you made nearly two years ago -- I wouldn't waste any time on it. Commented Oct 9, 2019 at 6:05
9

This does look like a bug. What I'm not 100% sure of is how it should be fixed, since I can see at least two sensible options.

Basically, the intended purpose of this feature is to handle circular references like this:

const x = {};
const obj = { foo: x };
x.bar = x;
x.baz = obj;

console.log(obj);

which will output:

{
  /**id:1**/
  "foo": {
    /**id:2**/
    "bar": /**ref:2**/,
    "baz": /**ref:1**/
  }
}

The bug occurs because the duplicate reference tracking code will also trigger on situations like your example above, where the same non-circular object is included more than once in the data. However, when that happens, the duplicate object gets replaced by a /**ref:n**/ reference marker, but the corresponding /**id:n**/ anchor does not get inserted in the object's previous occurrence.

The simple fix would be to make the feature not trigger on non-circular references at all. As far as I can tell at a glance, all that should take would be wrapping lines 198–231 of the snippet console code (in the latter half of function str(key, holder), after the map.push(value) line) inside a try block, and adding finally { map.pop() } after it. That way, your example structure would be serialized the way you'd presumably expect:

{
  "foo": {},
  "bar": {},
  "baz": {
    "x": {},
    "y": []
  },
  "wut": [
    {},
    []
  ]
}

A slightly fancier fix would be to keep the duplicate reference detection as it is (or maybe upgrade it into a real Map for better performance), but instead fix the output generation to insert the anchors properly even for non-circular shared sub-objects. With this option, you example data structure would look something like this in the console:

{
  "foo": { /**id:1**/ },
  "bar": /**ref:1**/,
  "baz": {
    "x": /**ref:1**/,
    "y": [ /**id:2**/ ]
  },
  "wut": [
    /**ref:1**/,
    /**ref:2**/
  ]
}

This would be a non-trivial change, since the current stringification code assumes that no new anchors will need to be added to objects that have been fully processed, but it would let the snippet console actually indicate which of several similar looking sub-objects are really the same object. As a bonus, it would also prevent pathologically nested data structures like the following from generating exponentially large output:

const a = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
const b = [ a, a, a, a, a, a, a, a, a, a ];
const c = [ b, b, b, b, b, b, b, b, b, b ];
const d = [ c, c, c, c, c, c, c, c, c, c ];
const e = [ d, d, d, d, d, d, d, d, d, d ];
const f = [ e, e, e, e, e, e, e, e, e, e ];

console.log(f);


Ps. As noted Cerbrus in the comments below, the current /**id:n**/ / /**ref:n**/ markers are kind of ugly and non-intuitive even when they're needed. At the risk of straying a bit from the topic of this thread, perhaps something like this might be more readable:

{
  "foo": _REF1 = {},
  "bar": _REF1,
  "baz": {
    "x": _REF1,
    "y": _REF2 = []
  },
  "wut": [
    _REF1,
    _REF2
  ]
}

or, for the example with actual circular references above:

_REF1 = {
  "foo": _REF2 = {
    "bar": _REF2,
    "baz": _REF1
  }
}

This alternative output format would at least have the advantage of being (almost) valid JavaScript code, and thus somewhat self-explanatory.

Of course, in either case (or even with the current code), you'll never see any of this ugliness unless the objects you're logging to the console actually contain the same sub-object more than once. As long as you only log simple JSON-like objects, you'll never even notice this feature, which is presumably also why this bug in it has not been reported before.

5
  • 1
    These anchors are nothing but noise when there's no circularity in the object. So I'd expect them not to exist when there's no circularity. There's absolutely nothing wrong with a long log. Obscuring the true structure of what's logged, on the other hand, is extremely counter-productive. Even with circular references, the output is a incomprehensible mess.
    – Cerbrus
    Commented Jan 3, 2018 at 7:49
  • 1
    @Cerbrus: You've got a point that the ref:n markers are kind ugly and unintuitive. That said, they're not just noise: the object obj created by x = {}; obj = {foo: x, bar: x} is fundamentally different from obj = {foo: {}, bar: {}}, since in the former case obj.foo and obj.bar are the same object and, in particular, modifying one will modify the other. That may be an uncommon situation, but when it does occur, I'd very much like the console to show it. Pretending that the two sub-objects are independent when they aren't would be "obscuring the true structure of what's logged". Commented Jan 3, 2018 at 8:28
  • 1
    It’s not pretending they’re different. It’s about logging what’s actually in there is a way that’s readable. If I’m logging a medium sized data structure I don’t want to have to puzzle to see if foo.bar.baz.attr exists. I want to see it logged. Adding the “this is a duplicate regerence” marker is great, but not if that means you’re hiding the actual data. A way to fix it properly is to overhaul the log output to work like browsers do: Generate a expandable tree, where each level you expand is dynamically added. No more circular reference issues, and more versatile log output.
    – Cerbrus
    Commented Jan 3, 2018 at 8:32
  • @Cerbrus: Would you find the alternative output format I just edited into my answer above any more readable? Commented Jan 3, 2018 at 8:41
  • Marginally, but yes. What's also important is that the references are numbered incrementally, instead of my example that logs 2 and 4. It still feels like a massive hack instead of a proper fix, though..
    – Cerbrus
    Commented Jan 3, 2018 at 8:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .