Bug: DevTools calls arbitrary generators which may be stateful

[gaearon]

function foo*() {
  yield 1;
  yield 2;
}

let gen = foo()

Currently if you put gen into state or props and then open this component in DevTools, it will consume that generator while trying to format it. So gen.next() will give you { done: true } next time you call it.

This happens here:

react/packages/react-devtools-shared/src/utils.js

Lines 616 to 623 in 60ba723

	case 'iterator':
	const name = data.constructor.name;
	if (showFormattedValue) {
	// TRICKY
	// Don't use [...spread] syntax for this purpose.
	// This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values.
	// Other types (e.g. typed arrays, Sets) will not spread correctly.
	const array = Array.from(data);

I think that maybe we should treat iterables differently if they return themselves as an iterator. Since that means they're likely stateful and it's not ok to iterate over them.

We detect iterables here (DevTools terminology is wrong btw, it should be iterable rather than iterator):

react/packages/react-devtools-shared/src/utils.js

Lines 438 to 439 in 60ba723

	} else if (typeof data[Symbol.iterator] === 'function') {
	return 'iterator';

I think maybe we could split this into iterable and opaque_iterable, and make sure none of the codepaths attempt to traverse opaque_iterable or pass it to something that would consume it (e.g. Array.from).

We could detect it based on data[Symbol.iterator]() === data — that clearly signals the iterable is its own iterator (which is the case for generators), and therefore it's not OK for DevTools to consume it.

Maybe some other heuristic could work. But overall, the goal is that Map and friends is still being iterated over, but an arbitrary generator is not.

[eps1lon]

This is similar to #19660 where the same line of code causes devtools to crash with infinite generators.

I wasn't able to reproduce that devtools calling stateful generators was an issue though I definitely expected it to be a problem.

[todortotev]

@gaearon I could give a shot on this!

[abelmark]

@gaearon I would love to give this a go.

[goanpixie]

@gaearon : I would like to address this bug

[eps1lon]

@todortotev Go for it 👍 Please let us know if you no longer intend to work on it.

[todortotev]

@todortotev Go for it 👍 Please let us know if you no longer intend to work on it.

On it!

[kambleaa007]

just let us know branch you are putting your efforts, more guys would like to contribute, for it 👍
we should return opaque_iterable for data[Symbol.iterator]() === data

[omarsy]

@eps1lon I agree with you both issues are related. if we choose to not extract generator. We’re not gonna have the issue anymore

[todortotev]

Just a note, I'm nearly done! Sorry for being slow it just was my first attempt!

[engprodigy]

@todortotev https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables This can help.

[bvaughn]

This should be resolved by #19831 once it lands.