https://github.com/facebook/react/pull/13242#discussion_r204101288
i need to move this
// import type {Fiber} from 'react-reconciler/src/ReactFiber';
{
let frames = [];
// Add an extra top frame while an element is being validated
if (currentlyValidatingElement) {
const _name = getComponentName(currentlyValidatingElement.type);
const _source = currentlyValidatingElement._source;
frames.push({
fileName: _source && _source.fileName.replace(/^.*[\\\/]/, ''),
lineNumber: _source && _source.lineNumber,
name: _name,
});
}
// renderer (react-reconciler) injects currentFiber alongside getCurrentStack
if (ReactDebugCurrentFrame.currentFiber) {
let node = ReactDebugCurrentFrame.currentFiber;
do {
const owner = node._debugOwner;
const source = node._debugSource;
frames.push({
fileName: source && source.fileName.replace(/^.*[\\\/]/, ''),
lineNumber: source && source.lineNumber,
name: owner && getComponentName(owner.type),
});
node = node.return;
} while (node);
}
return frames;
};
from ReactDebugCurrentFrame to somewhere inside the reconciler.
i did it for react-reconciler, but now the server renderer i am not sure about.
i did my best for server renderer but it is completely untested. what does stack frames even output to in this context? there is no r-e-o.
also the testing strategy for dom renderer is weird.
describe('ReactStackFrameWarnings', () => {
beforeEach(() => {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
React = require('react');
ReactNoop = require('react-noop-renderer');
});
it('calls console.reactStack with warning frames if available', () => {
function Foo() {
return <div class="bar" />;
}
console.reactStack = () => {}
spyOnDevAndProd(console, 'reactStack');
ReactNoop.render(<Foo />);
expect(console.reactStack).toHaveBeenCalledTimes(1); // doesnt work yet
// expect(ReactNoop.flush).toWarnDev(
// 'Warning: Stateless function components cannot be given refs. ' +
// 'Attempts to access this ref will fail.\n\nCheck the render method ' +
// 'of `Foo`.\n' +
// ' in FunctionalComponent (at **)\n' +
// ' in div (at **)\n' +
// ' in Foo (at **)',
// );
// expect(console.reactStack.calls.argsFor(0)[0].message).toEqual(
// ['mock frames', 'here', 'tbd'],
// );
});
});
but console.reactStack is not being called so something is wrong.