refactor[ReactDebugHooks]: support parsing stack frames when sourcemaps are available

[hoxyq]

Unblocks #26446.

TL;DR:

• The main difference is isReactWrapper function implementation. Previously, we would just look at hook stack trace entry and check if functionName ends with the corresponding hook primitive name. This doesn't work with the same setup, but with sourcemaps also being present. We use Proxy for handling custom errors, here is the implementation of the Proxy for Dispatcher
  

  react/packages/react-debug-tools/src/ReactDebugHooks.js

  Lines 354 to 373 in 666a6bc

  	// create a proxy to throw a custom error
  	// in case future versions of React adds more hooks
  	const DispatcherProxyHandler = {
  	get(target: DispatcherType, prop: string) {
  	if (target.hasOwnProperty(prop)) {
  	return target[prop];
  	}
  	const error = new Error('Missing method in Dispatcher: ' + prop);
  	// Note: This error name needs to stay in sync with react-devtools-shared
  	// TODO: refactor this if we ever combine the devtools and debug tools packages
  	error.name = 'ReactDebugToolsUnsupportedHookError';
  	throw error;
  	},
  	};
  	// `Proxy` may not exist on some platforms
  	const DispatcherProxy =
  	typeof Proxy === 'undefined'
  	? Dispatcher
  	: new Proxy(Dispatcher, DispatcherProxyHandler);

For each supported hook, we have a stub, which saves the stack trace via new Error() call. Here is useState, for example:

react/packages/react-debug-tools/src/ReactDebugHooks.js

Line 142 in 666a6bc

hookLog.push({primitive: 'State', stackError: new Error(), value: state});

At runtime, current dispatcher can be this Proxy object - DispatcherProxy, this will modify the stack trace. Here is how the corresponding stack frame looks like without sourcemaps:

{
        columnNumber: 171,
        lineNumber: 16,
        fileName: '.../build/oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js',
        functionName: 'Proxy.useState',
        source: '    at Proxy.useState (.../react/build/oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js:16:171)'
}

When sourcemaps are present, this particular frame is different, it no longer mentions primitive hook name.

{
        columnNumber: 21,
        lineNumber: 114,
        fileName: '.../build/oss-stable/react-debug-tools/cjs/react-debug-tools.production.js',
        functionName: 'Proxy.Error',
        source: '    at Proxy.Error (.../build/oss-stable/react-debug-tools/cjs/react-debug-tools.production.js:114:21)'
}

We do this parsing to skip React's frames, in this implementation we are only looking for user-defined hooks. In order to make this logic sourcemaps independent, instead of looking at stack trace of the error, which is created at runtime (basically once hook is called), we are also looking at primitive hook's stacktraces, which are defined here:

react/packages/react-debug-tools/src/ReactDebugHooks.js

Lines 57 to 99 in 666a6bc

	function getPrimitiveStackCache(): Map<string, StackFrame[]> {
	if (primitiveStackCache !== null) {
	return primitiveStackCache;
	}
	// This initializes a cache of all primitive hooks so that the top
	// most stack frames added by calling the primitive hook can be removed.
	const cache = new Map<string, StackFrame[]>();
	let readHookLog;
	try {
	// Use all hooks here to add them to the hook log.
	Dispatcher.useContext(({_currentValue: null}: any));
	Dispatcher.useState(null);
	Dispatcher.useReducer((s: mixed, a: mixed) => s, null);
	Dispatcher.useRef(null);
	if (typeof Dispatcher.useCacheRefresh === 'function') {
	// This type check is for Flow only.
	Dispatcher.useCacheRefresh();
	}
	Dispatcher.useLayoutEffect(() => {});
	Dispatcher.useInsertionEffect(() => {});
	Dispatcher.useEffect(() => {});
	Dispatcher.useImperativeHandle(undefined, () => null);
	Dispatcher.useDebugValue(null);
	Dispatcher.useCallback(() => {});
	Dispatcher.useMemo(() => null);
	if (typeof Dispatcher.useMemoCache === 'function') {
	// This type check is for Flow only.
	Dispatcher.useMemoCache(0);
	}
	} finally {
	readHookLog = hookLog;
	hookLog = [];
	}
	for (let i = 0; i < readHookLog.length; i++) {
	const hook = readHookLog[i];
	cache.set(hook.primitive, ErrorStackParser.parse(hook.stackError));
	}
	primitiveStackCache = cache;
	return cache;
	}

Notice that we are using general Dispatcher here and not DispatcherProxy. Both with or without sourcemaps stack traces contain corresponding primitive hook name in the functionName.

Also in these changes:

• Added Flow typings for error-stack-parser via flow-typed, updated other parts of the code which were using this library accordingly.

[react-sizebot]

Comparing: 0c63487...a43f175

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	175.09 kB	175.09 kB	=	54.48 kB	54.48 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	177.21 kB	177.21 kB	=	55.16 kB	55.16 kB
facebook-www/ReactDOM-prod.classic.js	=	567.70 kB	567.70 kB	=	99.96 kB	99.96 kB
facebook-www/ReactDOM-prod.modern.js	=	551.56 kB	551.56 kB	=	97.06 kB	97.06 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+5.36%	22.69 kB	23.90 kB	+5.55%	6.18 kB	6.52 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+5.36%	22.69 kB	23.90 kB	+5.55%	6.18 kB	6.52 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+5.36%	22.69 kB	23.90 kB	+5.55%	6.18 kB	6.52 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+5.36%	22.69 kB	23.90 kB	+5.55%	6.18 kB	6.52 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+5.36%	22.69 kB	23.90 kB	+5.55%	6.18 kB	6.52 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+5.36%	22.69 kB	23.90 kB	+5.55%	6.18 kB	6.52 kB

Generated by 🚫 dangerJS against a43f175

[motiz88]

@hoxyq and I discussed this offline. I think we should unblock #26446 differently.

The source mapping behaviour that breaks the existing logic only happens in the test environment, which suggests that #26446 creates divergence between the test and deployed environments of React DevTools. Ergo, AFAICT, we don't have the right kind of test coverage to validate this change, and should instead be looking at ways to keep the tests from breaking post-#26446 without changing any DevTools logic (e.g. by disabling source map generation for react-debug-tools).

[markerikson]

@motiz88 anything you need from me to update #26446 ? I think I'm reading this more as "we should tweak the existing tests" or something along those lines, which suggests I don't need to alter the PR, but wanted to check.

[hoxyq]

@motiz88 anything you need from me to update #26446 ? I think I'm reading this more as "we should tweak the existing tests" or something along those lines, which suggests I don't need to alter the PR, but wanted to check.

We should continue to manually exclude react-debug-tools from having sourcemaps. The main point here is that even if we had them, they won't be included in React DevTools build with this artifact, so current tests will diverge from the real world use case.

For now lets merge your sourcemaps PR with manually excluding sourcemaps, which I will remove later when move react-debug-tools package to React DevTools' backend.