Improve "native" component stacks host component frames

[bvaughn]

React and React DevTools generate component stacks in the same format as native Error stacks. For user components (class and function components) this is done by intentionally causing the component's render method to throw an Error, and then stitching the error stack frames together:

react/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js

Lines 62 to 203 in 5fa4d79

	export function describeNativeComponentFrame(
	fn: Function,
	construct: boolean,
	currentDispatcherRef: CurrentDispatcherRef,
	): string {
	// If something asked for a stack inside a fake render, it should get ignored.
	if (!fn || reentry) {
	return '';
	}
	if (__DEV__) {
	const frame = componentFrameCache.get(fn);
	if (frame !== undefined) {
	return frame;
	}
	}
	let control;
	const previousPrepareStackTrace = Error.prepareStackTrace;
	// $FlowFixMe It does accept undefined.
	Error.prepareStackTrace = undefined;
	reentry = true;
	// Override the dispatcher so effects scheduled by this shallow render are thrown away.
	//
	// Note that unlike the code this was forked from (in ReactComponentStackFrame)
	// DevTools should override the dispatcher even when DevTools is compiled in production mode,
	// because the app itself may be in development mode and log errors/warnings.
	const previousDispatcher = currentDispatcherRef.current;
	currentDispatcherRef.current = null;
	disableLogs();
	try {
	// This should throw.
	if (construct) {
	// Something should be setting the props in the constructor.
	const Fake = function() {
	throw Error();
	};
	// $FlowFixMe
	Object.defineProperty(Fake.prototype, 'props', {
	set: function() {
	// We use a throwing setter instead of frozen or non-writable props
	// because that won't throw in a non-strict mode function.
	throw Error();
	},
	});
	if (typeof Reflect === 'object' && Reflect.construct) {
	// We construct a different control for this case to include any extra
	// frames added by the construct call.
	try {
	Reflect.construct(Fake, []);
	} catch (x) {
	control = x;
	}
	Reflect.construct(fn, [], Fake);
	} else {
	try {
	Fake.call();
	} catch (x) {
	control = x;
	}
	fn.call(Fake.prototype);
	}
	} else {
	try {
	throw Error();
	} catch (x) {
	control = x;
	}
	fn();
	}
	} catch (sample) {
	// This is inlined manually because closure doesn't do it for us.
	if (sample && control && typeof sample.stack === 'string') {
	// This extracts the first frame from the sample that isn't also in the control.
	// Skipping one frame that we assume is the frame that calls the two.
	const sampleLines = sample.stack.split('\n');
	const controlLines = control.stack.split('\n');
	let s = sampleLines.length - 1;
	let c = controlLines.length - 1;
	while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
	// We expect at least one stack frame to be shared.
	// Typically this will be the root most one. However, stack frames may be
	// cut off due to maximum stack limits. In this case, one maybe cut off
	// earlier than the other. We assume that the sample is longer or the same
	// and there for cut off earlier. So we should find the root most frame in
	// the sample somewhere in the control.
	c--;
	}
	for (; s >= 1 && c >= 0; s--, c--) {
	// Next we find the first one that isn't the same which should be the
	// frame that called our sample function and the control.
	if (sampleLines[s] !== controlLines[c]) {
	// In V8, the first line is describing the message but other VMs don't.
	// If we're about to return the first line, and the control is also on the same
	// line, that's a pretty good indicator that our sample threw at same line as
	// the control. I.e. before we entered the sample frame. So we ignore this result.
	// This can happen if you passed a class to function component, or non-function.
	if (s !== 1 || c !== 1) {
	do {
	s--;
	c--;
	// We may still have similar intermediate frames from the construct call.
	// The next one that isn't the same should be our match though.
	if (c < 0 || sampleLines[s] !== controlLines[c]) {
	// V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
	const frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
	if (__DEV__) {
	if (typeof fn === 'function') {
	componentFrameCache.set(fn, frame);
	}
	}
	// Return the line we found.
	return frame;
	}
	} while (s >= 1 && c >= 0);
	}
	break;
	}
	}
	}
	} finally {
	reentry = false;
	Error.prepareStackTrace = previousPrepareStackTrace;
	currentDispatcherRef.current = previousDispatcher;
	reenableLogs();
	}
	// Fallback to just using the name if we couldn't make it throw.
	const name = fn ? fn.displayName || fn.name : '';
	const syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
	if (__DEV__) {
	if (typeof fn === 'function') {
	componentFrameCache.set(fn, syntheticFrame);
	}
	}
	return syntheticFrame;
	}

This results in a component stack like this:

But for "host components" (e.g. HTMLDivElement or View) when we have no source location to show, we fall back to showing just "at div" or "at View".

We could probably more closely mirror what JavaScript engines do by appending a "location" like (native) or (unknown location) (as the v8 docs suggest) or (anonymous) as v8 seems to actually do in testing.

The trick would be matching the specific browser/engine's behavior for this. For example, running the following code in Chrome or Node...

JSON.stringify({}, () => console.log(new Error('')));

...will show the stack frame:

    at JSON.stringify (<anonymous>)

while Firefox will show:

Error: 
    <anonymous> file:///path/to/script:7

Improving this format so that host components more closely mirror native Error stacks will help simplify things like React Native's error parsing.