fix[describeClassComponentFrame]: invoke constructor with new keyword (#36455)

For JavaScript runtimes that do not have
[`Reflect`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect)
supported, we had a fall back that was calling the constructor with
overridden `this` context via
```
fn.apply(Fake.prototype);
```
In ES6, it is required to call constructor only with the `new` keyword,
otherwise the runtime is expected to throw a corresponding TypeError:
```
TypeError: Class constructor <> cannot be invoked without 'new'
```
We've observed this error in Hermes runtime, but this is applicable to
V8 or any other runtime. The only reason why V8 wasn't affected is
because it implemented Reflect APIs.
Instead of the incorrect call, we will fall back to calling `new fn()`,
but with a temporary patched prototype of the class, which would make a
trap out of the setter for `props` object. We use the same approach when
`Reflect` APIs are available, but instead of modifying the prototype, we
pass the fake context:
https://github.com/facebook/react/blob/d5736f098edee62c44f27b053e6e48f5fa443803/packages/shared/ReactComponentStackFrame.js#L129-L148
---
See tests implemented. Without the changes, the test would fail with the
`TypeError` mentioned above.

Author: hoxyq

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

@@ -129,8 +129,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

@@ -342,4 +342,41 @@ describe('ReactFragment', () => {
 __DEV__ ? componentStack(['SomethingThatErrors']) : null,
 ]);
 });
+
+it('captures class component stacks via the no-Reflect.construct fallback',async()=>{
+classFailingClassComponentextendsReact.Component{
+render(){
+thrownewError('uh oh');
+}
+}
+
+constroot=ReactNoop.createRoot({onCaughtError});
+
+constoriginalReflectConstruct=Reflect.construct;
+deleteReflect.construct;
+
+try{
+root.render(
+<CatchingBoundary>
+<FailingClassComponent/>
+</CatchingBoundary>,
+);
+awaitwaitForAll([]);
+}finally{
+Object.defineProperty(Reflect,'construct',{
+value: originalReflectConstruct,
+});
+}
+
+expect(rootCaughtErrors).toEqual([
+'uh oh',
+componentStack(['FailingClassComponent','CatchingBoundary']),
+__DEV__ ? componentStack(['FailingClassComponent']) : null,
+]);
+
+// The throwing trap should be reset, we use props object for it
+expect(
+Object.getOwnPropertyDescriptor(FailingClassComponent.prototype,'props'),
+).toBeUndefined();
+});
 });

packages/shared/ReactComponentStackFrame.js

@@ -152,8 +152,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

scripts/jest/setupTests.js

@@ -115,6 +115,13 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 returnformat.replace(/%s/g,()=>args[argIndex++]);
 };
 constOriginalError=global.Error;
+// Cache Reflect methods so the proxies keep working even if a test
+// temporarily deletes or overrides them (e.g. to exercise no-Reflect
+// fallback paths in the React source).
+constReflectApply=Reflect.apply;
+constReflectConstruct=Reflect.construct;
+constReflectGet=Reflect.get;
+constReflectSet=Reflect.set;
 // V8's Error.captureStackTrace (used in Jest) fails if the error object is
 // a Proxy, so we need to pass it the unproxied instance.
 constoriginalErrorInstances=newWeakMap();
@@ -131,42 +138,37 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 constproxy=newProxy(error,{
 set(target,key,value,receiver){
 if(key==='message'){
-returnReflect.set(
-target,
-key,
-decodeErrorMessage(value),
-receiver
-);
+returnReflectSet(target,key,decodeErrorMessage(value),receiver);
 }
-returnReflect.set(target,key,value,receiver);
+returnReflectSet(target,key,value,receiver);
 },
 get(target,key,receiver){
 if(key==='stack'){
 // https://github.com/nodejs/node/issues/60862
-returnReflect.get(target,key);
+returnReflectGet(target,key);
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 originalErrorInstances.set(proxy,error);
 returnproxy;
 };
 constErrorProxy=newProxy(OriginalError,{
 apply(target,thisArg,argumentsList){
-consterror=Reflect.apply(target,thisArg,argumentsList);
+consterror=ReflectApply(target,thisArg,argumentsList);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 construct(target,argumentsList,newTarget){
-consterror=Reflect.construct(target,argumentsList,newTarget);
+consterror=ReflectConstruct(target,argumentsList,newTarget);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 get(target,key,receiver){
 if(key==='captureStackTrace'){
 returncaptureStackTrace;
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 ErrorProxy.OriginalError=OriginalError;

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

@@ -129,8 +129,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

@@ -342,4 +342,41 @@ describe('ReactFragment', () => {
 __DEV__ ? componentStack(['SomethingThatErrors']) : null,
 ]);
 });
+
+it('captures class component stacks via the no-Reflect.construct fallback',async()=>{
+classFailingClassComponentextendsReact.Component{
+render(){
+thrownewError('uh oh');
+}
+}
+
+constroot=ReactNoop.createRoot({onCaughtError});
+
+constoriginalReflectConstruct=Reflect.construct;
+deleteReflect.construct;
+
+try{
+root.render(
+<CatchingBoundary>
+<FailingClassComponent/>
+</CatchingBoundary>,
+);
+awaitwaitForAll([]);
+}finally{
+Object.defineProperty(Reflect,'construct',{
+value: originalReflectConstruct,
+});
+}
+
+expect(rootCaughtErrors).toEqual([
+'uh oh',
+componentStack(['FailingClassComponent','CatchingBoundary']),
+__DEV__ ? componentStack(['FailingClassComponent']) : null,
+]);
+
+// The throwing trap should be reset, we use props object for it
+expect(
+Object.getOwnPropertyDescriptor(FailingClassComponent.prototype,'props'),
+).toBeUndefined();
+});
 });

packages/shared/ReactComponentStackFrame.js

@@ -152,8 +152,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

scripts/jest/setupTests.js

@@ -115,6 +115,13 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 returnformat.replace(/%s/g,()=>args[argIndex++]);
 };
 constOriginalError=global.Error;
+// Cache Reflect methods so the proxies keep working even if a test
+// temporarily deletes or overrides them (e.g. to exercise no-Reflect
+// fallback paths in the React source).
+constReflectApply=Reflect.apply;
+constReflectConstruct=Reflect.construct;
+constReflectGet=Reflect.get;
+constReflectSet=Reflect.set;
 // V8's Error.captureStackTrace (used in Jest) fails if the error object is
 // a Proxy, so we need to pass it the unproxied instance.
 constoriginalErrorInstances=newWeakMap();
@@ -131,42 +138,37 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 constproxy=newProxy(error,{
 set(target,key,value,receiver){
 if(key==='message'){
-returnReflect.set(
-target,
-key,
-decodeErrorMessage(value),
-receiver
-);
+returnReflectSet(target,key,decodeErrorMessage(value),receiver);
 }
-returnReflect.set(target,key,value,receiver);
+returnReflectSet(target,key,value,receiver);
 },
 get(target,key,receiver){
 if(key==='stack'){
 // https://github.com/nodejs/node/issues/60862
-returnReflect.get(target,key);
+returnReflectGet(target,key);
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 originalErrorInstances.set(proxy,error);
 returnproxy;
 };
 constErrorProxy=newProxy(OriginalError,{
 apply(target,thisArg,argumentsList){
-consterror=Reflect.apply(target,thisArg,argumentsList);
+consterror=ReflectApply(target,thisArg,argumentsList);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 construct(target,argumentsList,newTarget){
-consterror=Reflect.construct(target,argumentsList,newTarget);
+consterror=ReflectConstruct(target,argumentsList,newTarget);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 get(target,key,receiver){
 if(key==='captureStackTrace'){
 returncaptureStackTrace;
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 ErrorProxy.OriginalError=OriginalError;

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

@@ -129,8 +129,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

@@ -342,4 +342,41 @@ describe('ReactFragment', () => {
 __DEV__ ? componentStack(['SomethingThatErrors']) : null,
 ]);
 });
+
+it('captures class component stacks via the no-Reflect.construct fallback',async()=>{
+classFailingClassComponentextendsReact.Component{
+render(){
+thrownewError('uh oh');
+}
+}
+
+constroot=ReactNoop.createRoot({onCaughtError});
+
+constoriginalReflectConstruct=Reflect.construct;
+deleteReflect.construct;
+
+try{
+root.render(
+<CatchingBoundary>
+<FailingClassComponent/>
+</CatchingBoundary>,
+);
+awaitwaitForAll([]);
+}finally{
+Object.defineProperty(Reflect,'construct',{
+value: originalReflectConstruct,
+});
+}
+
+expect(rootCaughtErrors).toEqual([
+'uh oh',
+componentStack(['FailingClassComponent','CatchingBoundary']),
+__DEV__ ? componentStack(['FailingClassComponent']) : null,
+]);
+
+// The throwing trap should be reset, we use props object for it
+expect(
+Object.getOwnPropertyDescriptor(FailingClassComponent.prototype,'props'),
+).toBeUndefined();
+});
 });

packages/shared/ReactComponentStackFrame.js

@@ -152,8 +152,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

scripts/jest/setupTests.js

@@ -115,6 +115,13 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 returnformat.replace(/%s/g,()=>args[argIndex++]);
 };
 constOriginalError=global.Error;
+// Cache Reflect methods so the proxies keep working even if a test
+// temporarily deletes or overrides them (e.g. to exercise no-Reflect
+// fallback paths in the React source).
+constReflectApply=Reflect.apply;
+constReflectConstruct=Reflect.construct;
+constReflectGet=Reflect.get;
+constReflectSet=Reflect.set;
 // V8's Error.captureStackTrace (used in Jest) fails if the error object is
 // a Proxy, so we need to pass it the unproxied instance.
 constoriginalErrorInstances=newWeakMap();
@@ -131,42 +138,37 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 constproxy=newProxy(error,{
 set(target,key,value,receiver){
 if(key==='message'){
-returnReflect.set(
-target,
-key,
-decodeErrorMessage(value),
-receiver
-);
+returnReflectSet(target,key,decodeErrorMessage(value),receiver);
 }
-returnReflect.set(target,key,value,receiver);
+returnReflectSet(target,key,value,receiver);
 },
 get(target,key,receiver){
 if(key==='stack'){
 // https://github.com/nodejs/node/issues/60862
-returnReflect.get(target,key);
+returnReflectGet(target,key);
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 originalErrorInstances.set(proxy,error);
 returnproxy;
 };
 constErrorProxy=newProxy(OriginalError,{
 apply(target,thisArg,argumentsList){
-consterror=Reflect.apply(target,thisArg,argumentsList);
+consterror=ReflectApply(target,thisArg,argumentsList);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 construct(target,argumentsList,newTarget){
-consterror=Reflect.construct(target,argumentsList,newTarget);
+consterror=ReflectConstruct(target,argumentsList,newTarget);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 get(target,key,receiver){
 if(key==='captureStackTrace'){
 returncaptureStackTrace;
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 ErrorProxy.OriginalError=OriginalError;

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

@@ -129,8 +129,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

@@ -342,4 +342,41 @@ describe('ReactFragment', () => {
 __DEV__ ? componentStack(['SomethingThatErrors']) : null,
 ]);
 });
+
+it('captures class component stacks via the no-Reflect.construct fallback',async()=>{
+classFailingClassComponentextendsReact.Component{
+render(){
+thrownewError('uh oh');
+}
+}
+
+constroot=ReactNoop.createRoot({onCaughtError});
+
+constoriginalReflectConstruct=Reflect.construct;
+deleteReflect.construct;
+
+try{
+root.render(
+<CatchingBoundary>
+<FailingClassComponent/>
+</CatchingBoundary>,
+);
+awaitwaitForAll([]);
+}finally{
+Object.defineProperty(Reflect,'construct',{
+value: originalReflectConstruct,
+});
+}
+
+expect(rootCaughtErrors).toEqual([
+'uh oh',
+componentStack(['FailingClassComponent','CatchingBoundary']),
+__DEV__ ? componentStack(['FailingClassComponent']) : null,
+]);
+
+// The throwing trap should be reset, we use props object for it
+expect(
+Object.getOwnPropertyDescriptor(FailingClassComponent.prototype,'props'),
+).toBeUndefined();
+});
 });

packages/shared/ReactComponentStackFrame.js

@@ -152,8 +152,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

scripts/jest/setupTests.js

@@ -115,6 +115,13 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 returnformat.replace(/%s/g,()=>args[argIndex++]);
 };
 constOriginalError=global.Error;
+// Cache Reflect methods so the proxies keep working even if a test
+// temporarily deletes or overrides them (e.g. to exercise no-Reflect
+// fallback paths in the React source).
+constReflectApply=Reflect.apply;
+constReflectConstruct=Reflect.construct;
+constReflectGet=Reflect.get;
+constReflectSet=Reflect.set;
 // V8's Error.captureStackTrace (used in Jest) fails if the error object is
 // a Proxy, so we need to pass it the unproxied instance.
 constoriginalErrorInstances=newWeakMap();
@@ -131,42 +138,37 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 constproxy=newProxy(error,{
 set(target,key,value,receiver){
 if(key==='message'){
-returnReflect.set(
-target,
-key,
-decodeErrorMessage(value),
-receiver
-);
+returnReflectSet(target,key,decodeErrorMessage(value),receiver);
 }
-returnReflect.set(target,key,value,receiver);
+returnReflectSet(target,key,value,receiver);
 },
 get(target,key,receiver){
 if(key==='stack'){
 // https://github.com/nodejs/node/issues/60862
-returnReflect.get(target,key);
+returnReflectGet(target,key);
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 originalErrorInstances.set(proxy,error);
 returnproxy;
 };
 constErrorProxy=newProxy(OriginalError,{
 apply(target,thisArg,argumentsList){
-consterror=Reflect.apply(target,thisArg,argumentsList);
+consterror=ReflectApply(target,thisArg,argumentsList);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 construct(target,argumentsList,newTarget){
-consterror=Reflect.construct(target,argumentsList,newTarget);
+consterror=ReflectConstruct(target,argumentsList,newTarget);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 get(target,key,receiver){
 if(key==='captureStackTrace'){
 returncaptureStackTrace;
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 ErrorProxy.OriginalError=OriginalError;

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

@@ -129,8 +129,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

@@ -342,4 +342,41 @@ describe('ReactFragment', () => {
 __DEV__ ? componentStack(['SomethingThatErrors']) : null,
 ]);
 });
+
+it('captures class component stacks via the no-Reflect.construct fallback',async()=>{
+classFailingClassComponentextendsReact.Component{
+render(){
+thrownewError('uh oh');
+}
+}
+
+constroot=ReactNoop.createRoot({onCaughtError});
+
+constoriginalReflectConstruct=Reflect.construct;
+deleteReflect.construct;
+
+try{
+root.render(
+<CatchingBoundary>
+<FailingClassComponent/>
+</CatchingBoundary>,
+);
+awaitwaitForAll([]);
+}finally{
+Object.defineProperty(Reflect,'construct',{
+value: originalReflectConstruct,
+});
+}
+
+expect(rootCaughtErrors).toEqual([
+'uh oh',
+componentStack(['FailingClassComponent','CatchingBoundary']),
+__DEV__ ? componentStack(['FailingClassComponent']) : null,
+]);
+
+// The throwing trap should be reset, we use props object for it
+expect(
+Object.getOwnPropertyDescriptor(FailingClassComponent.prototype,'props'),
+).toBeUndefined();
+});
 });

packages/shared/ReactComponentStackFrame.js

@@ -152,8 +152,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

scripts/jest/setupTests.js

@@ -115,6 +115,13 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 returnformat.replace(/%s/g,()=>args[argIndex++]);
 };
 constOriginalError=global.Error;
+// Cache Reflect methods so the proxies keep working even if a test
+// temporarily deletes or overrides them (e.g. to exercise no-Reflect
+// fallback paths in the React source).
+constReflectApply=Reflect.apply;
+constReflectConstruct=Reflect.construct;
+constReflectGet=Reflect.get;
+constReflectSet=Reflect.set;
 // V8's Error.captureStackTrace (used in Jest) fails if the error object is
 // a Proxy, so we need to pass it the unproxied instance.
 constoriginalErrorInstances=newWeakMap();
@@ -131,42 +138,37 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 constproxy=newProxy(error,{
 set(target,key,value,receiver){
 if(key==='message'){
-returnReflect.set(
-target,
-key,
-decodeErrorMessage(value),
-receiver
-);
+returnReflectSet(target,key,decodeErrorMessage(value),receiver);
 }
-returnReflect.set(target,key,value,receiver);
+returnReflectSet(target,key,value,receiver);
 },
 get(target,key,receiver){
 if(key==='stack'){
 // https://github.com/nodejs/node/issues/60862
-returnReflect.get(target,key);
+returnReflectGet(target,key);
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 originalErrorInstances.set(proxy,error);
 returnproxy;
 };
 constErrorProxy=newProxy(OriginalError,{
 apply(target,thisArg,argumentsList){
-consterror=Reflect.apply(target,thisArg,argumentsList);
+consterror=ReflectApply(target,thisArg,argumentsList);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 construct(target,argumentsList,newTarget){
-consterror=Reflect.construct(target,argumentsList,newTarget);
+consterror=ReflectConstruct(target,argumentsList,newTarget);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 get(target,key,receiver){
 if(key==='captureStackTrace'){
 returncaptureStackTrace;
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 ErrorProxy.OriginalError=OriginalError;

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

@@ -129,8 +129,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

@@ -342,4 +342,41 @@ describe('ReactFragment', () => {
 __DEV__ ? componentStack(['SomethingThatErrors']) : null,
 ]);
 });
+
+it('captures class component stacks via the no-Reflect.construct fallback',async()=>{
+classFailingClassComponentextendsReact.Component{
+render(){
+thrownewError('uh oh');
+}
+}
+
+constroot=ReactNoop.createRoot({onCaughtError});
+
+constoriginalReflectConstruct=Reflect.construct;
+deleteReflect.construct;
+
+try{
+root.render(
+<CatchingBoundary>
+<FailingClassComponent/>
+</CatchingBoundary>,
+);
+awaitwaitForAll([]);
+}finally{
+Object.defineProperty(Reflect,'construct',{
+value: originalReflectConstruct,
+});
+}
+
+expect(rootCaughtErrors).toEqual([
+'uh oh',
+componentStack(['FailingClassComponent','CatchingBoundary']),
+__DEV__ ? componentStack(['FailingClassComponent']) : null,
+]);
+
+// The throwing trap should be reset, we use props object for it
+expect(
+Object.getOwnPropertyDescriptor(FailingClassComponent.prototype,'props'),
+).toBeUndefined();
+});
 });

packages/shared/ReactComponentStackFrame.js

@@ -152,8 +152,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

scripts/jest/setupTests.js

@@ -115,6 +115,13 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 returnformat.replace(/%s/g,()=>args[argIndex++]);
 };
 constOriginalError=global.Error;
+// Cache Reflect methods so the proxies keep working even if a test
+// temporarily deletes or overrides them (e.g. to exercise no-Reflect
+// fallback paths in the React source).
+constReflectApply=Reflect.apply;
+constReflectConstruct=Reflect.construct;
+constReflectGet=Reflect.get;
+constReflectSet=Reflect.set;
 // V8's Error.captureStackTrace (used in Jest) fails if the error object is
 // a Proxy, so we need to pass it the unproxied instance.
 constoriginalErrorInstances=newWeakMap();
@@ -131,42 +138,37 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 constproxy=newProxy(error,{
 set(target,key,value,receiver){
 if(key==='message'){
-returnReflect.set(
-target,
-key,
-decodeErrorMessage(value),
-receiver
-);
+returnReflectSet(target,key,decodeErrorMessage(value),receiver);
 }
-returnReflect.set(target,key,value,receiver);
+returnReflectSet(target,key,value,receiver);
 },
 get(target,key,receiver){
 if(key==='stack'){
 // https://github.com/nodejs/node/issues/60862
-returnReflect.get(target,key);
+returnReflectGet(target,key);
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 originalErrorInstances.set(proxy,error);
 returnproxy;
 };
 constErrorProxy=newProxy(OriginalError,{
 apply(target,thisArg,argumentsList){
-consterror=Reflect.apply(target,thisArg,argumentsList);
+consterror=ReflectApply(target,thisArg,argumentsList);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 construct(target,argumentsList,newTarget){
-consterror=Reflect.construct(target,argumentsList,newTarget);
+consterror=ReflectConstruct(target,argumentsList,newTarget);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 get(target,key,receiver){
 if(key==='captureStackTrace'){
 returncaptureStackTrace;
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 ErrorProxy.OriginalError=OriginalError;

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

@@ -129,8 +129,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

@@ -342,4 +342,41 @@ describe('ReactFragment', () => {
 __DEV__ ? componentStack(['SomethingThatErrors']) : null,
 ]);
 });
+
+it('captures class component stacks via the no-Reflect.construct fallback',async()=>{
+classFailingClassComponentextendsReact.Component{
+render(){
+thrownewError('uh oh');
+}
+}
+
+constroot=ReactNoop.createRoot({onCaughtError});
+
+constoriginalReflectConstruct=Reflect.construct;
+deleteReflect.construct;
+
+try{
+root.render(
+<CatchingBoundary>
+<FailingClassComponent/>
+</CatchingBoundary>,
+);
+awaitwaitForAll([]);
+}finally{
+Object.defineProperty(Reflect,'construct',{
+value: originalReflectConstruct,
+});
+}
+
+expect(rootCaughtErrors).toEqual([
+'uh oh',
+componentStack(['FailingClassComponent','CatchingBoundary']),
+__DEV__ ? componentStack(['FailingClassComponent']) : null,
+]);
+
+// The throwing trap should be reset, we use props object for it
+expect(
+Object.getOwnPropertyDescriptor(FailingClassComponent.prototype,'props'),
+).toBeUndefined();
+});
 });

packages/shared/ReactComponentStackFrame.js

@@ -152,8 +152,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

scripts/jest/setupTests.js

@@ -115,6 +115,13 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 returnformat.replace(/%s/g,()=>args[argIndex++]);
 };
 constOriginalError=global.Error;
+// Cache Reflect methods so the proxies keep working even if a test
+// temporarily deletes or overrides them (e.g. to exercise no-Reflect
+// fallback paths in the React source).
+constReflectApply=Reflect.apply;
+constReflectConstruct=Reflect.construct;
+constReflectGet=Reflect.get;
+constReflectSet=Reflect.set;
 // V8's Error.captureStackTrace (used in Jest) fails if the error object is
 // a Proxy, so we need to pass it the unproxied instance.
 constoriginalErrorInstances=newWeakMap();
@@ -131,42 +138,37 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 constproxy=newProxy(error,{
 set(target,key,value,receiver){
 if(key==='message'){
-returnReflect.set(
-target,
-key,
-decodeErrorMessage(value),
-receiver
-);
+returnReflectSet(target,key,decodeErrorMessage(value),receiver);
 }
-returnReflect.set(target,key,value,receiver);
+returnReflectSet(target,key,value,receiver);
 },
 get(target,key,receiver){
 if(key==='stack'){
 // https://github.com/nodejs/node/issues/60862
-returnReflect.get(target,key);
+returnReflectGet(target,key);
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 originalErrorInstances.set(proxy,error);
 returnproxy;
 };
 constErrorProxy=newProxy(OriginalError,{
 apply(target,thisArg,argumentsList){
-consterror=Reflect.apply(target,thisArg,argumentsList);
+consterror=ReflectApply(target,thisArg,argumentsList);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 construct(target,argumentsList,newTarget){
-consterror=Reflect.construct(target,argumentsList,newTarget);
+consterror=ReflectConstruct(target,argumentsList,newTarget);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 get(target,key,receiver){
 if(key==='captureStackTrace'){
 returncaptureStackTrace;
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 ErrorProxy.OriginalError=OriginalError;

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

@@ -129,8 +129,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

@@ -342,4 +342,41 @@ describe('ReactFragment', () => {
 __DEV__ ? componentStack(['SomethingThatErrors']) : null,
 ]);
 });
+
+it('captures class component stacks via the no-Reflect.construct fallback',async()=>{
+classFailingClassComponentextendsReact.Component{
+render(){
+thrownewError('uh oh');
+}
+}
+
+constroot=ReactNoop.createRoot({onCaughtError});
+
+constoriginalReflectConstruct=Reflect.construct;
+deleteReflect.construct;
+
+try{
+root.render(
+<CatchingBoundary>
+<FailingClassComponent/>
+</CatchingBoundary>,
+);
+awaitwaitForAll([]);
+}finally{
+Object.defineProperty(Reflect,'construct',{
+value: originalReflectConstruct,
+});
+}
+
+expect(rootCaughtErrors).toEqual([
+'uh oh',
+componentStack(['FailingClassComponent','CatchingBoundary']),
+__DEV__ ? componentStack(['FailingClassComponent']) : null,
+]);
+
+// The throwing trap should be reset, we use props object for it
+expect(
+Object.getOwnPropertyDescriptor(FailingClassComponent.prototype,'props'),
+).toBeUndefined();
+});
 });

packages/shared/ReactComponentStackFrame.js

@@ -152,8 +152,33 @@ export function describeNativeComponentFrame(
 }catch(x){
 control=x;
 }
-// $FlowFixMe[prop-missing] found when upgrading Flow
-fn.call(Fake.prototype);
+
+letprototypeModified=false;
+letprevProps;
+try{
+prevProps=Object.getOwnPropertyDescriptor(
+fn.prototype,
+'props',
+);
+Object.defineProperty(fn.prototype,'props',{
+configurable: true,
+set(){
+throwError();
+},
+});
+prototypeModified=true;
+
+// eslint-disable-next-line no-new
+newfn();
+}finally{
+if(prototypeModified){
+if(prevProps!==undefined){
+Object.defineProperty(fn.prototype,'props',prevProps);
+}else{
+deletefn.prototype.props;
+}
+}
+}
 }
 }else{
 try{

scripts/jest/setupTests.js

@@ -115,6 +115,13 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 returnformat.replace(/%s/g,()=>args[argIndex++]);
 };
 constOriginalError=global.Error;
+// Cache Reflect methods so the proxies keep working even if a test
+// temporarily deletes or overrides them (e.g. to exercise no-Reflect
+// fallback paths in the React source).
+constReflectApply=Reflect.apply;
+constReflectConstruct=Reflect.construct;
+constReflectGet=Reflect.get;
+constReflectSet=Reflect.set;
 // V8's Error.captureStackTrace (used in Jest) fails if the error object is
 // a Proxy, so we need to pass it the unproxied instance.
 constoriginalErrorInstances=newWeakMap();
@@ -131,42 +138,37 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
 constproxy=newProxy(error,{
 set(target,key,value,receiver){
 if(key==='message'){
-returnReflect.set(
-target,
-key,
-decodeErrorMessage(value),
-receiver
-);
+returnReflectSet(target,key,decodeErrorMessage(value),receiver);
 }
-returnReflect.set(target,key,value,receiver);
+returnReflectSet(target,key,value,receiver);
 },
 get(target,key,receiver){
 if(key==='stack'){
 // https://github.com/nodejs/node/issues/60862
-returnReflect.get(target,key);
+returnReflectGet(target,key);
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 originalErrorInstances.set(proxy,error);
 returnproxy;
 };
 constErrorProxy=newProxy(OriginalError,{
 apply(target,thisArg,argumentsList){
-consterror=Reflect.apply(target,thisArg,argumentsList);
+consterror=ReflectApply(target,thisArg,argumentsList);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 construct(target,argumentsList,newTarget){
-consterror=Reflect.construct(target,argumentsList,newTarget);
+consterror=ReflectConstruct(target,argumentsList,newTarget);
 error.message=decodeErrorMessage(error.message);
 returnproxyErrorInstance(error);
 },
 get(target,key,receiver){
 if(key==='captureStackTrace'){
 returncaptureStackTrace;
 }
-returnReflect.get(target,key,receiver);
+returnReflectGet(target,key,receiver);
 },
 });
 ErrorProxy.OriginalError=OriginalError;