[Fizz] Push a stalled use() to the ownerStack/debugTask (#35226)

Author: eps1lon

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -108,6 +108,28 @@ describe('ReactFlightDOMNode', () => {
 );
 }
 
+/**
+ * Removes all stackframes not pointing into this file
+ */
+functionignoreListStack(str){
+if(!str){
+returnstr;
+}
+
+letignoreListedStack='';
+constlines=str.split('\n');
+
+// eslint-disable-next-line no-for-of-loops/no-for-of-loops
+for(constlineoflines){
+if(line.indexOf(__filename)===-1){
+}else{
+ignoreListedStack+='\n'+line.replace(__dirname,'.');
+}
+}
+
+returnignoreListedStack;
+}
+
 functionreadResult(stream){
 returnnewPromise((resolve,reject)=>{
 letbuffer='';
@@ -784,6 +806,165 @@ describe('ReactFlightDOMNode', () => {
 }
 });
 
+// @gate enableHalt
+it('includes source locations in component and owner stacks for halted Client components',async()=>{
+functionSharedComponent({p1, p2, p3}){
+use(p1);
+use(p2);
+use(p3);
+return<div>Hello, Dave!</div>;
+}
+constClientComponentOnTheServer=clientExports(SharedComponent);
+constClientComponentOnTheClient=clientExports(
+SharedComponent,
+123,
+'path/to/chunk.js',
+);
+
+letresolvePendingPromise;
+functionServerComponent(){
+constp1=Promise.resolve();
+constp2=newPromise(resolve=>{
+resolvePendingPromise=value=>{
+p2.status='fulfilled';
+p2.value=value;
+resolve(value);
+};
+});
+constp3=newPromise(()=>{});
+returnReactServer.createElement(ClientComponentOnTheClient,{
+p1: p1,
+p2: p2,
+p3: p3,
+});
+}
+
+functionApp(){
+returnReactServer.createElement(
+'html',
+null,
+ReactServer.createElement(
+'body',
+null,
+ReactServer.createElement(
+ReactServer.Suspense,
+{fallback: 'Loading...'},
+ReactServer.createElement(ServerComponent,null),
+),
+),
+);
+}
+
+consterrors=[];
+constrscStream=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(
+ReactServer.createElement(App,null),
+webpackMap,
+),
+);
+
+constreadable=newStream.PassThrough(streamOptions);
+rscStream.pipe(readable);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constserverConsumerManifest={
+moduleMap: {
+[webpackMap[ClientComponentOnTheClient.$$id].id]: {
+'*': webpackMap[ClientComponentOnTheServer.$$id],
+},
+},
+moduleLoading: webpackModuleLoading,
+};
+
+expect(errors).toEqual([]);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constresponse=ReactServerDOMClient.createFromNodeStream(
+readable,
+serverConsumerManifest,
+);
+
+letcomponentStack;
+letownerStack;
+
+constclientAbortController=newAbortController();
+
+constfizzPrerenderStreamResult=ReactDOMFizzStatic.prerender(
+React.createElement(ClientRoot,{response}),
+{
+signal: clientAbortController.signal,
+onError(error,errorInfo){
+componentStack=errorInfo.componentStack;
+ownerStack=React.captureOwnerStack
+ ? React.captureOwnerStack()
+ : null;
+},
+},
+);
+
+resolvePendingPromise('custom-instrum-resolve');
+awaitserverAct(
+async()=>
+newPromise(resolve=>{
+setImmediate(()=>{
+clientAbortController.abort();
+resolve();
+});
+}),
+);
+
+constfizzPrerenderStream=awaitfizzPrerenderStreamResult;
+constprerenderHTML=awaitreadWebResult(fizzPrerenderStream.prelude);
+
+expect(prerenderHTML).toContain('Loading...');
+
+if(__DEV__){
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in ServerComponent'+
+(gate(flags=>flags.enableAsyncDebugInfo) ? ' (at **)' : '')+
+'\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in App (at **)\n'+
+' in ClientRoot (at **)',
+);
+}else{
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in ClientRoot (at **)',
+);
+}
+
+if(__DEV__){
+expect(ignoreListStack(ownerStack)).toBe(
+// eslint-disable-next-line react-internal/safe-string-coercion
+''+
+// The concrete location may change as this test is updated.
+// Just make sure they still point at React.use(p2)
+(gate(flags=>flags.enableAsyncDebugInfo)
+ ? '\n at SharedComponent (./ReactFlightDOMNode-test.js:813:7)'
+ : '')+
+'\n at ServerComponent (file://./ReactFlightDOMNode-test.js:835:26)'+
+'\n at App (file://./ReactFlightDOMNode-test.js:852:25)',
+);
+}else{
+expect(ownerStack).toBeNull();
+}
+});
+
 // @gate enableHalt
 it('includes deeper location for aborted stacks',async()=>{
 asyncfunctiongetData(){
@@ -1364,12 +1545,12 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in Dynamic'+
 (gate(flags=>flags.enableAsyncDebugInfo)
- ? ' (file://ReactFlightDOMNode-test.js:1238:27)\n'
+ ? ' (file://ReactFlightDOMNode-test.js:1419:27)\n'
  : '\n')+
 ' in body\n'+
 ' in html\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)\n'+
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }else{
 expect(
@@ -1378,7 +1559,7 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in body\n'+
 ' in html\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }
 
@@ -1388,16 +1569,16 @@ describe('ReactFlightDOMNode', () => {
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 '\n'+
-' in Dynamic (file://ReactFlightDOMNode-test.js:1238:27)\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in Dynamic (file://ReactFlightDOMNode-test.js:1419:27)\n'+
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }else{
 expect(
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 ''+
 '\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }
 }else{

packages/react-server/src/ReactFizzServer.js

@@ -190,7 +190,14 @@ import assign from 'shared/assign';
 importnoopfrom'shared/noop';
 importgetComponentNameFromTypefrom'shared/getComponentNameFromType';
 importisArrayfrom'shared/isArray';
-import{SuspenseException,getSuspendedThenable}from'./ReactFizzThenable';
+import{
+SuspenseException,
+getSuspendedThenable,
+ensureSuspendableThenableStateDEV,
+getSuspendedCallSiteStackDEV,
+getSuspendedCallSiteDebugTaskDEV,
+setCaptureSuspendedCallSiteDEV,
+}from'./ReactFizzThenable';
 
 // Linked list representing the identity of a component given the component/tag name and key.
 // The name might be minified but we assume that it's going to be the same generated name. Typically
@@ -355,6 +362,7 @@ const OPEN = 11;
 constABORTING=12;
 constCLOSING=13;
 constCLOSED=14;
+constSTALLED_DEV=15;
 
 exportopaquetypeRequest={
 destination: null|Destination,
@@ -363,7 +371,7 @@ export opaque type Request = {
 +renderState: RenderState,
 +rootFormatContext: FormatContext,
 +progressiveChunkSize: number,
-status: 10|11|12|13|14,
+status: 10|11|12|13|14|15,
 fatalError: mixed,
 nextSegmentId: number,
 allPendingTasks: number,// when it reaches zero, we can close the connection.
@@ -1023,6 +1031,89 @@ function pushHaltedAwaitOnComponentStack(
 }
 }
 
+// performWork + retryTask without mutation
+functionrerenderStalledTask(request: Request,task: Task): void{
+constprevStatus=request.status;
+request.status=STALLED_DEV;
+
+constprevContext=getActiveContext();
+constprevDispatcher=ReactSharedInternals.H;
+ReactSharedInternals.H=HooksDispatcher;
+constprevAsyncDispatcher=ReactSharedInternals.A;
+ReactSharedInternals.A=DefaultAsyncDispatcher;
+
+constprevRequest=currentRequest;
+currentRequest=request;
+
+constprevGetCurrentStackImpl=ReactSharedInternals.getCurrentStack;
+ReactSharedInternals.getCurrentStack=getCurrentStackInDEV;
+
+constprevResumableState=currentResumableState;
+setCurrentResumableState(request.resumableState);
+switchContext(task.context);
+constprevTaskInDEV=currentTaskInDEV;
+setCurrentTaskInDEV(task);
+try{
+retryNode(request,task);
+}catch(x){
+// Suspended again.
+resetHooksState();
+}finally{
+setCurrentTaskInDEV(prevTaskInDEV);
+setCurrentResumableState(prevResumableState);
+
+ReactSharedInternals.H =prevDispatcher;
+ReactSharedInternals.A=prevAsyncDispatcher;
+
+ReactSharedInternals.getCurrentStack=prevGetCurrentStackImpl;
+if(prevDispatcher===HooksDispatcher){
+// This means that we were in a reentrant work loop. This could happen
+// in a renderer that supports synchronous work like renderToString,
+// when it's called from within another renderer.
+// Normally we don't bother switching the contexts to their root/default
+// values when leaving because we'll likely need the same or similar
+// context again. However, when we're inside a synchronous loop like this
+// we'll to restore the context to what it was before returning.
+switchContext(prevContext);
+}
+ currentRequest =prevRequest;
+request.status=prevStatus;
+}
+}
+
+functionpushSuspendedCallSiteOnComponentStack(
+request: Request,
+task: Task,
+): void{
+ setCaptureSuspendedCallSiteDEV(true);
+constrestoreThenableState=ensureSuspendableThenableStateDEV(
+// refined at the callsite
+((task.thenableState: any): ThenableState),
+);
+try{
+rerenderStalledTask(request,task);
+}finally{
+restoreThenableState();
+ setCaptureSuspendedCallSiteDEV(false);
+}
+
+const suspendCallSiteStack =getSuspendedCallSiteStackDEV();
+constsuspendCallSiteDebugTask=getSuspendedCallSiteDebugTaskDEV();
+
+if(suspendCallSiteStack!==null){
+const ownerStack =task.componentStack;
+task.componentStack={
+// The owner of the suspended call site would be the owner of this task.
+// We need the task itself otherwise we'd miss a frame.
+owner: ownerStack,
+parent: suspendCallSiteStack.parent,
+stack: suspendCallSiteStack.stack,
+type: suspendCallSiteStack.type,
+};
+}
+task.debugTask=suspendCallSiteDebugTask;
+}
+
 functionpushServerComponentStack(
 task: Task,
 debugInfo: void|null|ReactDebugInfo,
@@ -2723,7 +2814,12 @@ function renderLazyComponent(
 constinit=lazyComponent._init;
 Component=init(payload);
 }
-if(request.status===ABORTING){
+if(
+request.status===ABORTING&&
+// We're going to discard this render anyway.
+// We just need to reach the point where we suspended in dev.
+(!__DEV__||request.status!==STALLED_DEV)
+){
 // eslint-disable-next-line no-throw-literal
 thrownull;
 }
@@ -4535,12 +4631,9 @@ function abortTask(task: Task, request: Request, error: mixed): void {
 debugInfo=node._debugInfo;
 }
 pushHaltedAwaitOnComponentStack(task,debugInfo);
-/*
 if(task.thenableState!==null){
- // TODO: If we were stalled inside use() of a Client Component then we should
- // rerender to get the stack trace from the use() call.
+pushSuspendedCallSiteOnComponentStack(request,task);
 }
- */
 }
 }
 

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -108,6 +108,28 @@ describe('ReactFlightDOMNode', () => {
 );
 }
 
+/**
+ * Removes all stackframes not pointing into this file
+ */
+functionignoreListStack(str){
+if(!str){
+returnstr;
+}
+
+letignoreListedStack='';
+constlines=str.split('\n');
+
+// eslint-disable-next-line no-for-of-loops/no-for-of-loops
+for(constlineoflines){
+if(line.indexOf(__filename)===-1){
+}else{
+ignoreListedStack+='\n'+line.replace(__dirname,'.');
+}
+}
+
+returnignoreListedStack;
+}
+
 functionreadResult(stream){
 returnnewPromise((resolve,reject)=>{
 letbuffer='';
@@ -784,6 +806,165 @@ describe('ReactFlightDOMNode', () => {
 }
 });
 
+// @gate enableHalt
+it('includes source locations in component and owner stacks for halted Client components',async()=>{
+functionSharedComponent({p1, p2, p3}){
+use(p1);
+use(p2);
+use(p3);
+return<div>Hello, Dave!</div>;
+}
+constClientComponentOnTheServer=clientExports(SharedComponent);
+constClientComponentOnTheClient=clientExports(
+SharedComponent,
+123,
+'path/to/chunk.js',
+);
+
+letresolvePendingPromise;
+functionServerComponent(){
+constp1=Promise.resolve();
+constp2=newPromise(resolve=>{
+resolvePendingPromise=value=>{
+p2.status='fulfilled';
+p2.value=value;
+resolve(value);
+};
+});
+constp3=newPromise(()=>{});
+returnReactServer.createElement(ClientComponentOnTheClient,{
+p1: p1,
+p2: p2,
+p3: p3,
+});
+}
+
+functionApp(){
+returnReactServer.createElement(
+'html',
+null,
+ReactServer.createElement(
+'body',
+null,
+ReactServer.createElement(
+ReactServer.Suspense,
+{fallback: 'Loading...'},
+ReactServer.createElement(ServerComponent,null),
+),
+),
+);
+}
+
+consterrors=[];
+constrscStream=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(
+ReactServer.createElement(App,null),
+webpackMap,
+),
+);
+
+constreadable=newStream.PassThrough(streamOptions);
+rscStream.pipe(readable);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constserverConsumerManifest={
+moduleMap: {
+[webpackMap[ClientComponentOnTheClient.$$id].id]: {
+'*': webpackMap[ClientComponentOnTheServer.$$id],
+},
+},
+moduleLoading: webpackModuleLoading,
+};
+
+expect(errors).toEqual([]);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constresponse=ReactServerDOMClient.createFromNodeStream(
+readable,
+serverConsumerManifest,
+);
+
+letcomponentStack;
+letownerStack;
+
+constclientAbortController=newAbortController();
+
+constfizzPrerenderStreamResult=ReactDOMFizzStatic.prerender(
+React.createElement(ClientRoot,{response}),
+{
+signal: clientAbortController.signal,
+onError(error,errorInfo){
+componentStack=errorInfo.componentStack;
+ownerStack=React.captureOwnerStack
+ ? React.captureOwnerStack()
+ : null;
+},
+},
+);
+
+resolvePendingPromise('custom-instrum-resolve');
+awaitserverAct(
+async()=>
+newPromise(resolve=>{
+setImmediate(()=>{
+clientAbortController.abort();
+resolve();
+});
+}),
+);
+
+constfizzPrerenderStream=awaitfizzPrerenderStreamResult;
+constprerenderHTML=awaitreadWebResult(fizzPrerenderStream.prelude);
+
+expect(prerenderHTML).toContain('Loading...');
+
+if(__DEV__){
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in ServerComponent'+
+(gate(flags=>flags.enableAsyncDebugInfo) ? ' (at **)' : '')+
+'\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in App (at **)\n'+
+' in ClientRoot (at **)',
+);
+}else{
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in ClientRoot (at **)',
+);
+}
+
+if(__DEV__){
+expect(ignoreListStack(ownerStack)).toBe(
+// eslint-disable-next-line react-internal/safe-string-coercion
+''+
+// The concrete location may change as this test is updated.
+// Just make sure they still point at React.use(p2)
+(gate(flags=>flags.enableAsyncDebugInfo)
+ ? '\n at SharedComponent (./ReactFlightDOMNode-test.js:813:7)'
+ : '')+
+'\n at ServerComponent (file://./ReactFlightDOMNode-test.js:835:26)'+
+'\n at App (file://./ReactFlightDOMNode-test.js:852:25)',
+);
+}else{
+expect(ownerStack).toBeNull();
+}
+});
+
 // @gate enableHalt
 it('includes deeper location for aborted stacks',async()=>{
 asyncfunctiongetData(){
@@ -1364,12 +1545,12 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in Dynamic'+
 (gate(flags=>flags.enableAsyncDebugInfo)
- ? ' (file://ReactFlightDOMNode-test.js:1238:27)\n'
+ ? ' (file://ReactFlightDOMNode-test.js:1419:27)\n'
  : '\n')+
 ' in body\n'+
 ' in html\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)\n'+
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }else{
 expect(
@@ -1378,7 +1559,7 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in body\n'+
 ' in html\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }
 
@@ -1388,16 +1569,16 @@ describe('ReactFlightDOMNode', () => {
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 '\n'+
-' in Dynamic (file://ReactFlightDOMNode-test.js:1238:27)\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in Dynamic (file://ReactFlightDOMNode-test.js:1419:27)\n'+
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }else{
 expect(
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 ''+
 '\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }
 }else{

packages/react-server/src/ReactFizzServer.js

@@ -190,7 +190,14 @@ import assign from 'shared/assign';
 importnoopfrom'shared/noop';
 importgetComponentNameFromTypefrom'shared/getComponentNameFromType';
 importisArrayfrom'shared/isArray';
-import{SuspenseException,getSuspendedThenable}from'./ReactFizzThenable';
+import{
+SuspenseException,
+getSuspendedThenable,
+ensureSuspendableThenableStateDEV,
+getSuspendedCallSiteStackDEV,
+getSuspendedCallSiteDebugTaskDEV,
+setCaptureSuspendedCallSiteDEV,
+}from'./ReactFizzThenable';
 
 // Linked list representing the identity of a component given the component/tag name and key.
 // The name might be minified but we assume that it's going to be the same generated name. Typically
@@ -355,6 +362,7 @@ const OPEN = 11;
 constABORTING=12;
 constCLOSING=13;
 constCLOSED=14;
+constSTALLED_DEV=15;
 
 exportopaquetypeRequest={
 destination: null|Destination,
@@ -363,7 +371,7 @@ export opaque type Request = {
 +renderState: RenderState,
 +rootFormatContext: FormatContext,
 +progressiveChunkSize: number,
-status: 10|11|12|13|14,
+status: 10|11|12|13|14|15,
 fatalError: mixed,
 nextSegmentId: number,
 allPendingTasks: number,// when it reaches zero, we can close the connection.
@@ -1023,6 +1031,89 @@ function pushHaltedAwaitOnComponentStack(
 }
 }
 
+// performWork + retryTask without mutation
+functionrerenderStalledTask(request: Request,task: Task): void{
+constprevStatus=request.status;
+request.status=STALLED_DEV;
+
+constprevContext=getActiveContext();
+constprevDispatcher=ReactSharedInternals.H;
+ReactSharedInternals.H=HooksDispatcher;
+constprevAsyncDispatcher=ReactSharedInternals.A;
+ReactSharedInternals.A=DefaultAsyncDispatcher;
+
+constprevRequest=currentRequest;
+currentRequest=request;
+
+constprevGetCurrentStackImpl=ReactSharedInternals.getCurrentStack;
+ReactSharedInternals.getCurrentStack=getCurrentStackInDEV;
+
+constprevResumableState=currentResumableState;
+setCurrentResumableState(request.resumableState);
+switchContext(task.context);
+constprevTaskInDEV=currentTaskInDEV;
+setCurrentTaskInDEV(task);
+try{
+retryNode(request,task);
+}catch(x){
+// Suspended again.
+resetHooksState();
+}finally{
+setCurrentTaskInDEV(prevTaskInDEV);
+setCurrentResumableState(prevResumableState);
+
+ReactSharedInternals.H =prevDispatcher;
+ReactSharedInternals.A=prevAsyncDispatcher;
+
+ReactSharedInternals.getCurrentStack=prevGetCurrentStackImpl;
+if(prevDispatcher===HooksDispatcher){
+// This means that we were in a reentrant work loop. This could happen
+// in a renderer that supports synchronous work like renderToString,
+// when it's called from within another renderer.
+// Normally we don't bother switching the contexts to their root/default
+// values when leaving because we'll likely need the same or similar
+// context again. However, when we're inside a synchronous loop like this
+// we'll to restore the context to what it was before returning.
+switchContext(prevContext);
+}
+ currentRequest =prevRequest;
+request.status=prevStatus;
+}
+}
+
+functionpushSuspendedCallSiteOnComponentStack(
+request: Request,
+task: Task,
+): void{
+ setCaptureSuspendedCallSiteDEV(true);
+constrestoreThenableState=ensureSuspendableThenableStateDEV(
+// refined at the callsite
+((task.thenableState: any): ThenableState),
+);
+try{
+rerenderStalledTask(request,task);
+}finally{
+restoreThenableState();
+ setCaptureSuspendedCallSiteDEV(false);
+}
+
+const suspendCallSiteStack =getSuspendedCallSiteStackDEV();
+constsuspendCallSiteDebugTask=getSuspendedCallSiteDebugTaskDEV();
+
+if(suspendCallSiteStack!==null){
+const ownerStack =task.componentStack;
+task.componentStack={
+// The owner of the suspended call site would be the owner of this task.
+// We need the task itself otherwise we'd miss a frame.
+owner: ownerStack,
+parent: suspendCallSiteStack.parent,
+stack: suspendCallSiteStack.stack,
+type: suspendCallSiteStack.type,
+};
+}
+task.debugTask=suspendCallSiteDebugTask;
+}
+
 functionpushServerComponentStack(
 task: Task,
 debugInfo: void|null|ReactDebugInfo,
@@ -2723,7 +2814,12 @@ function renderLazyComponent(
 constinit=lazyComponent._init;
 Component=init(payload);
 }
-if(request.status===ABORTING){
+if(
+request.status===ABORTING&&
+// We're going to discard this render anyway.
+// We just need to reach the point where we suspended in dev.
+(!__DEV__||request.status!==STALLED_DEV)
+){
 // eslint-disable-next-line no-throw-literal
 thrownull;
 }
@@ -4535,12 +4631,9 @@ function abortTask(task: Task, request: Request, error: mixed): void {
 debugInfo=node._debugInfo;
 }
 pushHaltedAwaitOnComponentStack(task,debugInfo);
-/*
 if(task.thenableState!==null){
- // TODO: If we were stalled inside use() of a Client Component then we should
- // rerender to get the stack trace from the use() call.
+pushSuspendedCallSiteOnComponentStack(request,task);
 }
- */
 }
 }
 

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -108,6 +108,28 @@ describe('ReactFlightDOMNode', () => {
 );
 }
 
+/**
+ * Removes all stackframes not pointing into this file
+ */
+functionignoreListStack(str){
+if(!str){
+returnstr;
+}
+
+letignoreListedStack='';
+constlines=str.split('\n');
+
+// eslint-disable-next-line no-for-of-loops/no-for-of-loops
+for(constlineoflines){
+if(line.indexOf(__filename)===-1){
+}else{
+ignoreListedStack+='\n'+line.replace(__dirname,'.');
+}
+}
+
+returnignoreListedStack;
+}
+
 functionreadResult(stream){
 returnnewPromise((resolve,reject)=>{
 letbuffer='';
@@ -784,6 +806,165 @@ describe('ReactFlightDOMNode', () => {
 }
 });
 
+// @gate enableHalt
+it('includes source locations in component and owner stacks for halted Client components',async()=>{
+functionSharedComponent({p1, p2, p3}){
+use(p1);
+use(p2);
+use(p3);
+return<div>Hello, Dave!</div>;
+}
+constClientComponentOnTheServer=clientExports(SharedComponent);
+constClientComponentOnTheClient=clientExports(
+SharedComponent,
+123,
+'path/to/chunk.js',
+);
+
+letresolvePendingPromise;
+functionServerComponent(){
+constp1=Promise.resolve();
+constp2=newPromise(resolve=>{
+resolvePendingPromise=value=>{
+p2.status='fulfilled';
+p2.value=value;
+resolve(value);
+};
+});
+constp3=newPromise(()=>{});
+returnReactServer.createElement(ClientComponentOnTheClient,{
+p1: p1,
+p2: p2,
+p3: p3,
+});
+}
+
+functionApp(){
+returnReactServer.createElement(
+'html',
+null,
+ReactServer.createElement(
+'body',
+null,
+ReactServer.createElement(
+ReactServer.Suspense,
+{fallback: 'Loading...'},
+ReactServer.createElement(ServerComponent,null),
+),
+),
+);
+}
+
+consterrors=[];
+constrscStream=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(
+ReactServer.createElement(App,null),
+webpackMap,
+),
+);
+
+constreadable=newStream.PassThrough(streamOptions);
+rscStream.pipe(readable);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constserverConsumerManifest={
+moduleMap: {
+[webpackMap[ClientComponentOnTheClient.$$id].id]: {
+'*': webpackMap[ClientComponentOnTheServer.$$id],
+},
+},
+moduleLoading: webpackModuleLoading,
+};
+
+expect(errors).toEqual([]);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constresponse=ReactServerDOMClient.createFromNodeStream(
+readable,
+serverConsumerManifest,
+);
+
+letcomponentStack;
+letownerStack;
+
+constclientAbortController=newAbortController();
+
+constfizzPrerenderStreamResult=ReactDOMFizzStatic.prerender(
+React.createElement(ClientRoot,{response}),
+{
+signal: clientAbortController.signal,
+onError(error,errorInfo){
+componentStack=errorInfo.componentStack;
+ownerStack=React.captureOwnerStack
+ ? React.captureOwnerStack()
+ : null;
+},
+},
+);
+
+resolvePendingPromise('custom-instrum-resolve');
+awaitserverAct(
+async()=>
+newPromise(resolve=>{
+setImmediate(()=>{
+clientAbortController.abort();
+resolve();
+});
+}),
+);
+
+constfizzPrerenderStream=awaitfizzPrerenderStreamResult;
+constprerenderHTML=awaitreadWebResult(fizzPrerenderStream.prelude);
+
+expect(prerenderHTML).toContain('Loading...');
+
+if(__DEV__){
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in ServerComponent'+
+(gate(flags=>flags.enableAsyncDebugInfo) ? ' (at **)' : '')+
+'\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in App (at **)\n'+
+' in ClientRoot (at **)',
+);
+}else{
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in ClientRoot (at **)',
+);
+}
+
+if(__DEV__){
+expect(ignoreListStack(ownerStack)).toBe(
+// eslint-disable-next-line react-internal/safe-string-coercion
+''+
+// The concrete location may change as this test is updated.
+// Just make sure they still point at React.use(p2)
+(gate(flags=>flags.enableAsyncDebugInfo)
+ ? '\n at SharedComponent (./ReactFlightDOMNode-test.js:813:7)'
+ : '')+
+'\n at ServerComponent (file://./ReactFlightDOMNode-test.js:835:26)'+
+'\n at App (file://./ReactFlightDOMNode-test.js:852:25)',
+);
+}else{
+expect(ownerStack).toBeNull();
+}
+});
+
 // @gate enableHalt
 it('includes deeper location for aborted stacks',async()=>{
 asyncfunctiongetData(){
@@ -1364,12 +1545,12 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in Dynamic'+
 (gate(flags=>flags.enableAsyncDebugInfo)
- ? ' (file://ReactFlightDOMNode-test.js:1238:27)\n'
+ ? ' (file://ReactFlightDOMNode-test.js:1419:27)\n'
  : '\n')+
 ' in body\n'+
 ' in html\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)\n'+
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }else{
 expect(
@@ -1378,7 +1559,7 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in body\n'+
 ' in html\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }
 
@@ -1388,16 +1569,16 @@ describe('ReactFlightDOMNode', () => {
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 '\n'+
-' in Dynamic (file://ReactFlightDOMNode-test.js:1238:27)\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in Dynamic (file://ReactFlightDOMNode-test.js:1419:27)\n'+
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }else{
 expect(
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 ''+
 '\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }
 }else{

packages/react-server/src/ReactFizzServer.js

@@ -190,7 +190,14 @@ import assign from 'shared/assign';
 importnoopfrom'shared/noop';
 importgetComponentNameFromTypefrom'shared/getComponentNameFromType';
 importisArrayfrom'shared/isArray';
-import{SuspenseException,getSuspendedThenable}from'./ReactFizzThenable';
+import{
+SuspenseException,
+getSuspendedThenable,
+ensureSuspendableThenableStateDEV,
+getSuspendedCallSiteStackDEV,
+getSuspendedCallSiteDebugTaskDEV,
+setCaptureSuspendedCallSiteDEV,
+}from'./ReactFizzThenable';
 
 // Linked list representing the identity of a component given the component/tag name and key.
 // The name might be minified but we assume that it's going to be the same generated name. Typically
@@ -355,6 +362,7 @@ const OPEN = 11;
 constABORTING=12;
 constCLOSING=13;
 constCLOSED=14;
+constSTALLED_DEV=15;
 
 exportopaquetypeRequest={
 destination: null|Destination,
@@ -363,7 +371,7 @@ export opaque type Request = {
 +renderState: RenderState,
 +rootFormatContext: FormatContext,
 +progressiveChunkSize: number,
-status: 10|11|12|13|14,
+status: 10|11|12|13|14|15,
 fatalError: mixed,
 nextSegmentId: number,
 allPendingTasks: number,// when it reaches zero, we can close the connection.
@@ -1023,6 +1031,89 @@ function pushHaltedAwaitOnComponentStack(
 }
 }
 
+// performWork + retryTask without mutation
+functionrerenderStalledTask(request: Request,task: Task): void{
+constprevStatus=request.status;
+request.status=STALLED_DEV;
+
+constprevContext=getActiveContext();
+constprevDispatcher=ReactSharedInternals.H;
+ReactSharedInternals.H=HooksDispatcher;
+constprevAsyncDispatcher=ReactSharedInternals.A;
+ReactSharedInternals.A=DefaultAsyncDispatcher;
+
+constprevRequest=currentRequest;
+currentRequest=request;
+
+constprevGetCurrentStackImpl=ReactSharedInternals.getCurrentStack;
+ReactSharedInternals.getCurrentStack=getCurrentStackInDEV;
+
+constprevResumableState=currentResumableState;
+setCurrentResumableState(request.resumableState);
+switchContext(task.context);
+constprevTaskInDEV=currentTaskInDEV;
+setCurrentTaskInDEV(task);
+try{
+retryNode(request,task);
+}catch(x){
+// Suspended again.
+resetHooksState();
+}finally{
+setCurrentTaskInDEV(prevTaskInDEV);
+setCurrentResumableState(prevResumableState);
+
+ReactSharedInternals.H =prevDispatcher;
+ReactSharedInternals.A=prevAsyncDispatcher;
+
+ReactSharedInternals.getCurrentStack=prevGetCurrentStackImpl;
+if(prevDispatcher===HooksDispatcher){
+// This means that we were in a reentrant work loop. This could happen
+// in a renderer that supports synchronous work like renderToString,
+// when it's called from within another renderer.
+// Normally we don't bother switching the contexts to their root/default
+// values when leaving because we'll likely need the same or similar
+// context again. However, when we're inside a synchronous loop like this
+// we'll to restore the context to what it was before returning.
+switchContext(prevContext);
+}
+ currentRequest =prevRequest;
+request.status=prevStatus;
+}
+}
+
+functionpushSuspendedCallSiteOnComponentStack(
+request: Request,
+task: Task,
+): void{
+ setCaptureSuspendedCallSiteDEV(true);
+constrestoreThenableState=ensureSuspendableThenableStateDEV(
+// refined at the callsite
+((task.thenableState: any): ThenableState),
+);
+try{
+rerenderStalledTask(request,task);
+}finally{
+restoreThenableState();
+ setCaptureSuspendedCallSiteDEV(false);
+}
+
+const suspendCallSiteStack =getSuspendedCallSiteStackDEV();
+constsuspendCallSiteDebugTask=getSuspendedCallSiteDebugTaskDEV();
+
+if(suspendCallSiteStack!==null){
+const ownerStack =task.componentStack;
+task.componentStack={
+// The owner of the suspended call site would be the owner of this task.
+// We need the task itself otherwise we'd miss a frame.
+owner: ownerStack,
+parent: suspendCallSiteStack.parent,
+stack: suspendCallSiteStack.stack,
+type: suspendCallSiteStack.type,
+};
+}
+task.debugTask=suspendCallSiteDebugTask;
+}
+
 functionpushServerComponentStack(
 task: Task,
 debugInfo: void|null|ReactDebugInfo,
@@ -2723,7 +2814,12 @@ function renderLazyComponent(
 constinit=lazyComponent._init;
 Component=init(payload);
 }
-if(request.status===ABORTING){
+if(
+request.status===ABORTING&&
+// We're going to discard this render anyway.
+// We just need to reach the point where we suspended in dev.
+(!__DEV__||request.status!==STALLED_DEV)
+){
 // eslint-disable-next-line no-throw-literal
 thrownull;
 }
@@ -4535,12 +4631,9 @@ function abortTask(task: Task, request: Request, error: mixed): void {
 debugInfo=node._debugInfo;
 }
 pushHaltedAwaitOnComponentStack(task,debugInfo);
-/*
 if(task.thenableState!==null){
- // TODO: If we were stalled inside use() of a Client Component then we should
- // rerender to get the stack trace from the use() call.
+pushSuspendedCallSiteOnComponentStack(request,task);
 }
- */
 }
 }
 

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -108,6 +108,28 @@ describe('ReactFlightDOMNode', () => {
 );
 }
 
+/**
+ * Removes all stackframes not pointing into this file
+ */
+functionignoreListStack(str){
+if(!str){
+returnstr;
+}
+
+letignoreListedStack='';
+constlines=str.split('\n');
+
+// eslint-disable-next-line no-for-of-loops/no-for-of-loops
+for(constlineoflines){
+if(line.indexOf(__filename)===-1){
+}else{
+ignoreListedStack+='\n'+line.replace(__dirname,'.');
+}
+}
+
+returnignoreListedStack;
+}
+
 functionreadResult(stream){
 returnnewPromise((resolve,reject)=>{
 letbuffer='';
@@ -784,6 +806,165 @@ describe('ReactFlightDOMNode', () => {
 }
 });
 
+// @gate enableHalt
+it('includes source locations in component and owner stacks for halted Client components',async()=>{
+functionSharedComponent({p1, p2, p3}){
+use(p1);
+use(p2);
+use(p3);
+return<div>Hello, Dave!</div>;
+}
+constClientComponentOnTheServer=clientExports(SharedComponent);
+constClientComponentOnTheClient=clientExports(
+SharedComponent,
+123,
+'path/to/chunk.js',
+);
+
+letresolvePendingPromise;
+functionServerComponent(){
+constp1=Promise.resolve();
+constp2=newPromise(resolve=>{
+resolvePendingPromise=value=>{
+p2.status='fulfilled';
+p2.value=value;
+resolve(value);
+};
+});
+constp3=newPromise(()=>{});
+returnReactServer.createElement(ClientComponentOnTheClient,{
+p1: p1,
+p2: p2,
+p3: p3,
+});
+}
+
+functionApp(){
+returnReactServer.createElement(
+'html',
+null,
+ReactServer.createElement(
+'body',
+null,
+ReactServer.createElement(
+ReactServer.Suspense,
+{fallback: 'Loading...'},
+ReactServer.createElement(ServerComponent,null),
+),
+),
+);
+}
+
+consterrors=[];
+constrscStream=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(
+ReactServer.createElement(App,null),
+webpackMap,
+),
+);
+
+constreadable=newStream.PassThrough(streamOptions);
+rscStream.pipe(readable);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constserverConsumerManifest={
+moduleMap: {
+[webpackMap[ClientComponentOnTheClient.$$id].id]: {
+'*': webpackMap[ClientComponentOnTheServer.$$id],
+},
+},
+moduleLoading: webpackModuleLoading,
+};
+
+expect(errors).toEqual([]);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constresponse=ReactServerDOMClient.createFromNodeStream(
+readable,
+serverConsumerManifest,
+);
+
+letcomponentStack;
+letownerStack;
+
+constclientAbortController=newAbortController();
+
+constfizzPrerenderStreamResult=ReactDOMFizzStatic.prerender(
+React.createElement(ClientRoot,{response}),
+{
+signal: clientAbortController.signal,
+onError(error,errorInfo){
+componentStack=errorInfo.componentStack;
+ownerStack=React.captureOwnerStack
+ ? React.captureOwnerStack()
+ : null;
+},
+},
+);
+
+resolvePendingPromise('custom-instrum-resolve');
+awaitserverAct(
+async()=>
+newPromise(resolve=>{
+setImmediate(()=>{
+clientAbortController.abort();
+resolve();
+});
+}),
+);
+
+constfizzPrerenderStream=awaitfizzPrerenderStreamResult;
+constprerenderHTML=awaitreadWebResult(fizzPrerenderStream.prelude);
+
+expect(prerenderHTML).toContain('Loading...');
+
+if(__DEV__){
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in ServerComponent'+
+(gate(flags=>flags.enableAsyncDebugInfo) ? ' (at **)' : '')+
+'\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in App (at **)\n'+
+' in ClientRoot (at **)',
+);
+}else{
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in ClientRoot (at **)',
+);
+}
+
+if(__DEV__){
+expect(ignoreListStack(ownerStack)).toBe(
+// eslint-disable-next-line react-internal/safe-string-coercion
+''+
+// The concrete location may change as this test is updated.
+// Just make sure they still point at React.use(p2)
+(gate(flags=>flags.enableAsyncDebugInfo)
+ ? '\n at SharedComponent (./ReactFlightDOMNode-test.js:813:7)'
+ : '')+
+'\n at ServerComponent (file://./ReactFlightDOMNode-test.js:835:26)'+
+'\n at App (file://./ReactFlightDOMNode-test.js:852:25)',
+);
+}else{
+expect(ownerStack).toBeNull();
+}
+});
+
 // @gate enableHalt
 it('includes deeper location for aborted stacks',async()=>{
 asyncfunctiongetData(){
@@ -1364,12 +1545,12 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in Dynamic'+
 (gate(flags=>flags.enableAsyncDebugInfo)
- ? ' (file://ReactFlightDOMNode-test.js:1238:27)\n'
+ ? ' (file://ReactFlightDOMNode-test.js:1419:27)\n'
  : '\n')+
 ' in body\n'+
 ' in html\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)\n'+
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }else{
 expect(
@@ -1378,7 +1559,7 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in body\n'+
 ' in html\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }
 
@@ -1388,16 +1569,16 @@ describe('ReactFlightDOMNode', () => {
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 '\n'+
-' in Dynamic (file://ReactFlightDOMNode-test.js:1238:27)\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in Dynamic (file://ReactFlightDOMNode-test.js:1419:27)\n'+
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }else{
 expect(
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 ''+
 '\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }
 }else{

packages/react-server/src/ReactFizzServer.js

@@ -190,7 +190,14 @@ import assign from 'shared/assign';
 importnoopfrom'shared/noop';
 importgetComponentNameFromTypefrom'shared/getComponentNameFromType';
 importisArrayfrom'shared/isArray';
-import{SuspenseException,getSuspendedThenable}from'./ReactFizzThenable';
+import{
+SuspenseException,
+getSuspendedThenable,
+ensureSuspendableThenableStateDEV,
+getSuspendedCallSiteStackDEV,
+getSuspendedCallSiteDebugTaskDEV,
+setCaptureSuspendedCallSiteDEV,
+}from'./ReactFizzThenable';
 
 // Linked list representing the identity of a component given the component/tag name and key.
 // The name might be minified but we assume that it's going to be the same generated name. Typically
@@ -355,6 +362,7 @@ const OPEN = 11;
 constABORTING=12;
 constCLOSING=13;
 constCLOSED=14;
+constSTALLED_DEV=15;
 
 exportopaquetypeRequest={
 destination: null|Destination,
@@ -363,7 +371,7 @@ export opaque type Request = {
 +renderState: RenderState,
 +rootFormatContext: FormatContext,
 +progressiveChunkSize: number,
-status: 10|11|12|13|14,
+status: 10|11|12|13|14|15,
 fatalError: mixed,
 nextSegmentId: number,
 allPendingTasks: number,// when it reaches zero, we can close the connection.
@@ -1023,6 +1031,89 @@ function pushHaltedAwaitOnComponentStack(
 }
 }
 
+// performWork + retryTask without mutation
+functionrerenderStalledTask(request: Request,task: Task): void{
+constprevStatus=request.status;
+request.status=STALLED_DEV;
+
+constprevContext=getActiveContext();
+constprevDispatcher=ReactSharedInternals.H;
+ReactSharedInternals.H=HooksDispatcher;
+constprevAsyncDispatcher=ReactSharedInternals.A;
+ReactSharedInternals.A=DefaultAsyncDispatcher;
+
+constprevRequest=currentRequest;
+currentRequest=request;
+
+constprevGetCurrentStackImpl=ReactSharedInternals.getCurrentStack;
+ReactSharedInternals.getCurrentStack=getCurrentStackInDEV;
+
+constprevResumableState=currentResumableState;
+setCurrentResumableState(request.resumableState);
+switchContext(task.context);
+constprevTaskInDEV=currentTaskInDEV;
+setCurrentTaskInDEV(task);
+try{
+retryNode(request,task);
+}catch(x){
+// Suspended again.
+resetHooksState();
+}finally{
+setCurrentTaskInDEV(prevTaskInDEV);
+setCurrentResumableState(prevResumableState);
+
+ReactSharedInternals.H =prevDispatcher;
+ReactSharedInternals.A=prevAsyncDispatcher;
+
+ReactSharedInternals.getCurrentStack=prevGetCurrentStackImpl;
+if(prevDispatcher===HooksDispatcher){
+// This means that we were in a reentrant work loop. This could happen
+// in a renderer that supports synchronous work like renderToString,
+// when it's called from within another renderer.
+// Normally we don't bother switching the contexts to their root/default
+// values when leaving because we'll likely need the same or similar
+// context again. However, when we're inside a synchronous loop like this
+// we'll to restore the context to what it was before returning.
+switchContext(prevContext);
+}
+ currentRequest =prevRequest;
+request.status=prevStatus;
+}
+}
+
+functionpushSuspendedCallSiteOnComponentStack(
+request: Request,
+task: Task,
+): void{
+ setCaptureSuspendedCallSiteDEV(true);
+constrestoreThenableState=ensureSuspendableThenableStateDEV(
+// refined at the callsite
+((task.thenableState: any): ThenableState),
+);
+try{
+rerenderStalledTask(request,task);
+}finally{
+restoreThenableState();
+ setCaptureSuspendedCallSiteDEV(false);
+}
+
+const suspendCallSiteStack =getSuspendedCallSiteStackDEV();
+constsuspendCallSiteDebugTask=getSuspendedCallSiteDebugTaskDEV();
+
+if(suspendCallSiteStack!==null){
+const ownerStack =task.componentStack;
+task.componentStack={
+// The owner of the suspended call site would be the owner of this task.
+// We need the task itself otherwise we'd miss a frame.
+owner: ownerStack,
+parent: suspendCallSiteStack.parent,
+stack: suspendCallSiteStack.stack,
+type: suspendCallSiteStack.type,
+};
+}
+task.debugTask=suspendCallSiteDebugTask;
+}
+
 functionpushServerComponentStack(
 task: Task,
 debugInfo: void|null|ReactDebugInfo,
@@ -2723,7 +2814,12 @@ function renderLazyComponent(
 constinit=lazyComponent._init;
 Component=init(payload);
 }
-if(request.status===ABORTING){
+if(
+request.status===ABORTING&&
+// We're going to discard this render anyway.
+// We just need to reach the point where we suspended in dev.
+(!__DEV__||request.status!==STALLED_DEV)
+){
 // eslint-disable-next-line no-throw-literal
 thrownull;
 }
@@ -4535,12 +4631,9 @@ function abortTask(task: Task, request: Request, error: mixed): void {
 debugInfo=node._debugInfo;
 }
 pushHaltedAwaitOnComponentStack(task,debugInfo);
-/*
 if(task.thenableState!==null){
- // TODO: If we were stalled inside use() of a Client Component then we should
- // rerender to get the stack trace from the use() call.
+pushSuspendedCallSiteOnComponentStack(request,task);
 }
- */
 }
 }
 

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -108,6 +108,28 @@ describe('ReactFlightDOMNode', () => {
 );
 }
 
+/**
+ * Removes all stackframes not pointing into this file
+ */
+functionignoreListStack(str){
+if(!str){
+returnstr;
+}
+
+letignoreListedStack='';
+constlines=str.split('\n');
+
+// eslint-disable-next-line no-for-of-loops/no-for-of-loops
+for(constlineoflines){
+if(line.indexOf(__filename)===-1){
+}else{
+ignoreListedStack+='\n'+line.replace(__dirname,'.');
+}
+}
+
+returnignoreListedStack;
+}
+
 functionreadResult(stream){
 returnnewPromise((resolve,reject)=>{
 letbuffer='';
@@ -784,6 +806,165 @@ describe('ReactFlightDOMNode', () => {
 }
 });
 
+// @gate enableHalt
+it('includes source locations in component and owner stacks for halted Client components',async()=>{
+functionSharedComponent({p1, p2, p3}){
+use(p1);
+use(p2);
+use(p3);
+return<div>Hello, Dave!</div>;
+}
+constClientComponentOnTheServer=clientExports(SharedComponent);
+constClientComponentOnTheClient=clientExports(
+SharedComponent,
+123,
+'path/to/chunk.js',
+);
+
+letresolvePendingPromise;
+functionServerComponent(){
+constp1=Promise.resolve();
+constp2=newPromise(resolve=>{
+resolvePendingPromise=value=>{
+p2.status='fulfilled';
+p2.value=value;
+resolve(value);
+};
+});
+constp3=newPromise(()=>{});
+returnReactServer.createElement(ClientComponentOnTheClient,{
+p1: p1,
+p2: p2,
+p3: p3,
+});
+}
+
+functionApp(){
+returnReactServer.createElement(
+'html',
+null,
+ReactServer.createElement(
+'body',
+null,
+ReactServer.createElement(
+ReactServer.Suspense,
+{fallback: 'Loading...'},
+ReactServer.createElement(ServerComponent,null),
+),
+),
+);
+}
+
+consterrors=[];
+constrscStream=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(
+ReactServer.createElement(App,null),
+webpackMap,
+),
+);
+
+constreadable=newStream.PassThrough(streamOptions);
+rscStream.pipe(readable);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constserverConsumerManifest={
+moduleMap: {
+[webpackMap[ClientComponentOnTheClient.$$id].id]: {
+'*': webpackMap[ClientComponentOnTheServer.$$id],
+},
+},
+moduleLoading: webpackModuleLoading,
+};
+
+expect(errors).toEqual([]);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constresponse=ReactServerDOMClient.createFromNodeStream(
+readable,
+serverConsumerManifest,
+);
+
+letcomponentStack;
+letownerStack;
+
+constclientAbortController=newAbortController();
+
+constfizzPrerenderStreamResult=ReactDOMFizzStatic.prerender(
+React.createElement(ClientRoot,{response}),
+{
+signal: clientAbortController.signal,
+onError(error,errorInfo){
+componentStack=errorInfo.componentStack;
+ownerStack=React.captureOwnerStack
+ ? React.captureOwnerStack()
+ : null;
+},
+},
+);
+
+resolvePendingPromise('custom-instrum-resolve');
+awaitserverAct(
+async()=>
+newPromise(resolve=>{
+setImmediate(()=>{
+clientAbortController.abort();
+resolve();
+});
+}),
+);
+
+constfizzPrerenderStream=awaitfizzPrerenderStreamResult;
+constprerenderHTML=awaitreadWebResult(fizzPrerenderStream.prelude);
+
+expect(prerenderHTML).toContain('Loading...');
+
+if(__DEV__){
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in ServerComponent'+
+(gate(flags=>flags.enableAsyncDebugInfo) ? ' (at **)' : '')+
+'\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in App (at **)\n'+
+' in ClientRoot (at **)',
+);
+}else{
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in ClientRoot (at **)',
+);
+}
+
+if(__DEV__){
+expect(ignoreListStack(ownerStack)).toBe(
+// eslint-disable-next-line react-internal/safe-string-coercion
+''+
+// The concrete location may change as this test is updated.
+// Just make sure they still point at React.use(p2)
+(gate(flags=>flags.enableAsyncDebugInfo)
+ ? '\n at SharedComponent (./ReactFlightDOMNode-test.js:813:7)'
+ : '')+
+'\n at ServerComponent (file://./ReactFlightDOMNode-test.js:835:26)'+
+'\n at App (file://./ReactFlightDOMNode-test.js:852:25)',
+);
+}else{
+expect(ownerStack).toBeNull();
+}
+});
+
 // @gate enableHalt
 it('includes deeper location for aborted stacks',async()=>{
 asyncfunctiongetData(){
@@ -1364,12 +1545,12 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in Dynamic'+
 (gate(flags=>flags.enableAsyncDebugInfo)
- ? ' (file://ReactFlightDOMNode-test.js:1238:27)\n'
+ ? ' (file://ReactFlightDOMNode-test.js:1419:27)\n'
  : '\n')+
 ' in body\n'+
 ' in html\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)\n'+
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }else{
 expect(
@@ -1378,7 +1559,7 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in body\n'+
 ' in html\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }
 
@@ -1388,16 +1569,16 @@ describe('ReactFlightDOMNode', () => {
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 '\n'+
-' in Dynamic (file://ReactFlightDOMNode-test.js:1238:27)\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in Dynamic (file://ReactFlightDOMNode-test.js:1419:27)\n'+
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }else{
 expect(
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 ''+
 '\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }
 }else{

packages/react-server/src/ReactFizzServer.js

@@ -190,7 +190,14 @@ import assign from 'shared/assign';
 importnoopfrom'shared/noop';
 importgetComponentNameFromTypefrom'shared/getComponentNameFromType';
 importisArrayfrom'shared/isArray';
-import{SuspenseException,getSuspendedThenable}from'./ReactFizzThenable';
+import{
+SuspenseException,
+getSuspendedThenable,
+ensureSuspendableThenableStateDEV,
+getSuspendedCallSiteStackDEV,
+getSuspendedCallSiteDebugTaskDEV,
+setCaptureSuspendedCallSiteDEV,
+}from'./ReactFizzThenable';
 
 // Linked list representing the identity of a component given the component/tag name and key.
 // The name might be minified but we assume that it's going to be the same generated name. Typically
@@ -355,6 +362,7 @@ const OPEN = 11;
 constABORTING=12;
 constCLOSING=13;
 constCLOSED=14;
+constSTALLED_DEV=15;
 
 exportopaquetypeRequest={
 destination: null|Destination,
@@ -363,7 +371,7 @@ export opaque type Request = {
 +renderState: RenderState,
 +rootFormatContext: FormatContext,
 +progressiveChunkSize: number,
-status: 10|11|12|13|14,
+status: 10|11|12|13|14|15,
 fatalError: mixed,
 nextSegmentId: number,
 allPendingTasks: number,// when it reaches zero, we can close the connection.
@@ -1023,6 +1031,89 @@ function pushHaltedAwaitOnComponentStack(
 }
 }
 
+// performWork + retryTask without mutation
+functionrerenderStalledTask(request: Request,task: Task): void{
+constprevStatus=request.status;
+request.status=STALLED_DEV;
+
+constprevContext=getActiveContext();
+constprevDispatcher=ReactSharedInternals.H;
+ReactSharedInternals.H=HooksDispatcher;
+constprevAsyncDispatcher=ReactSharedInternals.A;
+ReactSharedInternals.A=DefaultAsyncDispatcher;
+
+constprevRequest=currentRequest;
+currentRequest=request;
+
+constprevGetCurrentStackImpl=ReactSharedInternals.getCurrentStack;
+ReactSharedInternals.getCurrentStack=getCurrentStackInDEV;
+
+constprevResumableState=currentResumableState;
+setCurrentResumableState(request.resumableState);
+switchContext(task.context);
+constprevTaskInDEV=currentTaskInDEV;
+setCurrentTaskInDEV(task);
+try{
+retryNode(request,task);
+}catch(x){
+// Suspended again.
+resetHooksState();
+}finally{
+setCurrentTaskInDEV(prevTaskInDEV);
+setCurrentResumableState(prevResumableState);
+
+ReactSharedInternals.H =prevDispatcher;
+ReactSharedInternals.A=prevAsyncDispatcher;
+
+ReactSharedInternals.getCurrentStack=prevGetCurrentStackImpl;
+if(prevDispatcher===HooksDispatcher){
+// This means that we were in a reentrant work loop. This could happen
+// in a renderer that supports synchronous work like renderToString,
+// when it's called from within another renderer.
+// Normally we don't bother switching the contexts to their root/default
+// values when leaving because we'll likely need the same or similar
+// context again. However, when we're inside a synchronous loop like this
+// we'll to restore the context to what it was before returning.
+switchContext(prevContext);
+}
+ currentRequest =prevRequest;
+request.status=prevStatus;
+}
+}
+
+functionpushSuspendedCallSiteOnComponentStack(
+request: Request,
+task: Task,
+): void{
+ setCaptureSuspendedCallSiteDEV(true);
+constrestoreThenableState=ensureSuspendableThenableStateDEV(
+// refined at the callsite
+((task.thenableState: any): ThenableState),
+);
+try{
+rerenderStalledTask(request,task);
+}finally{
+restoreThenableState();
+ setCaptureSuspendedCallSiteDEV(false);
+}
+
+const suspendCallSiteStack =getSuspendedCallSiteStackDEV();
+constsuspendCallSiteDebugTask=getSuspendedCallSiteDebugTaskDEV();
+
+if(suspendCallSiteStack!==null){
+const ownerStack =task.componentStack;
+task.componentStack={
+// The owner of the suspended call site would be the owner of this task.
+// We need the task itself otherwise we'd miss a frame.
+owner: ownerStack,
+parent: suspendCallSiteStack.parent,
+stack: suspendCallSiteStack.stack,
+type: suspendCallSiteStack.type,
+};
+}
+task.debugTask=suspendCallSiteDebugTask;
+}
+
 functionpushServerComponentStack(
 task: Task,
 debugInfo: void|null|ReactDebugInfo,
@@ -2723,7 +2814,12 @@ function renderLazyComponent(
 constinit=lazyComponent._init;
 Component=init(payload);
 }
-if(request.status===ABORTING){
+if(
+request.status===ABORTING&&
+// We're going to discard this render anyway.
+// We just need to reach the point where we suspended in dev.
+(!__DEV__||request.status!==STALLED_DEV)
+){
 // eslint-disable-next-line no-throw-literal
 thrownull;
 }
@@ -4535,12 +4631,9 @@ function abortTask(task: Task, request: Request, error: mixed): void {
 debugInfo=node._debugInfo;
 }
 pushHaltedAwaitOnComponentStack(task,debugInfo);
-/*
 if(task.thenableState!==null){
- // TODO: If we were stalled inside use() of a Client Component then we should
- // rerender to get the stack trace from the use() call.
+pushSuspendedCallSiteOnComponentStack(request,task);
 }
- */
 }
 }
 

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -108,6 +108,28 @@ describe('ReactFlightDOMNode', () => {
 );
 }
 
+/**
+ * Removes all stackframes not pointing into this file
+ */
+functionignoreListStack(str){
+if(!str){
+returnstr;
+}
+
+letignoreListedStack='';
+constlines=str.split('\n');
+
+// eslint-disable-next-line no-for-of-loops/no-for-of-loops
+for(constlineoflines){
+if(line.indexOf(__filename)===-1){
+}else{
+ignoreListedStack+='\n'+line.replace(__dirname,'.');
+}
+}
+
+returnignoreListedStack;
+}
+
 functionreadResult(stream){
 returnnewPromise((resolve,reject)=>{
 letbuffer='';
@@ -784,6 +806,165 @@ describe('ReactFlightDOMNode', () => {
 }
 });
 
+// @gate enableHalt
+it('includes source locations in component and owner stacks for halted Client components',async()=>{
+functionSharedComponent({p1, p2, p3}){
+use(p1);
+use(p2);
+use(p3);
+return<div>Hello, Dave!</div>;
+}
+constClientComponentOnTheServer=clientExports(SharedComponent);
+constClientComponentOnTheClient=clientExports(
+SharedComponent,
+123,
+'path/to/chunk.js',
+);
+
+letresolvePendingPromise;
+functionServerComponent(){
+constp1=Promise.resolve();
+constp2=newPromise(resolve=>{
+resolvePendingPromise=value=>{
+p2.status='fulfilled';
+p2.value=value;
+resolve(value);
+};
+});
+constp3=newPromise(()=>{});
+returnReactServer.createElement(ClientComponentOnTheClient,{
+p1: p1,
+p2: p2,
+p3: p3,
+});
+}
+
+functionApp(){
+returnReactServer.createElement(
+'html',
+null,
+ReactServer.createElement(
+'body',
+null,
+ReactServer.createElement(
+ReactServer.Suspense,
+{fallback: 'Loading...'},
+ReactServer.createElement(ServerComponent,null),
+),
+),
+);
+}
+
+consterrors=[];
+constrscStream=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(
+ReactServer.createElement(App,null),
+webpackMap,
+),
+);
+
+constreadable=newStream.PassThrough(streamOptions);
+rscStream.pipe(readable);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constserverConsumerManifest={
+moduleMap: {
+[webpackMap[ClientComponentOnTheClient.$$id].id]: {
+'*': webpackMap[ClientComponentOnTheServer.$$id],
+},
+},
+moduleLoading: webpackModuleLoading,
+};
+
+expect(errors).toEqual([]);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constresponse=ReactServerDOMClient.createFromNodeStream(
+readable,
+serverConsumerManifest,
+);
+
+letcomponentStack;
+letownerStack;
+
+constclientAbortController=newAbortController();
+
+constfizzPrerenderStreamResult=ReactDOMFizzStatic.prerender(
+React.createElement(ClientRoot,{response}),
+{
+signal: clientAbortController.signal,
+onError(error,errorInfo){
+componentStack=errorInfo.componentStack;
+ownerStack=React.captureOwnerStack
+ ? React.captureOwnerStack()
+ : null;
+},
+},
+);
+
+resolvePendingPromise('custom-instrum-resolve');
+awaitserverAct(
+async()=>
+newPromise(resolve=>{
+setImmediate(()=>{
+clientAbortController.abort();
+resolve();
+});
+}),
+);
+
+constfizzPrerenderStream=awaitfizzPrerenderStreamResult;
+constprerenderHTML=awaitreadWebResult(fizzPrerenderStream.prelude);
+
+expect(prerenderHTML).toContain('Loading...');
+
+if(__DEV__){
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in ServerComponent'+
+(gate(flags=>flags.enableAsyncDebugInfo) ? ' (at **)' : '')+
+'\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in App (at **)\n'+
+' in ClientRoot (at **)',
+);
+}else{
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in ClientRoot (at **)',
+);
+}
+
+if(__DEV__){
+expect(ignoreListStack(ownerStack)).toBe(
+// eslint-disable-next-line react-internal/safe-string-coercion
+''+
+// The concrete location may change as this test is updated.
+// Just make sure they still point at React.use(p2)
+(gate(flags=>flags.enableAsyncDebugInfo)
+ ? '\n at SharedComponent (./ReactFlightDOMNode-test.js:813:7)'
+ : '')+
+'\n at ServerComponent (file://./ReactFlightDOMNode-test.js:835:26)'+
+'\n at App (file://./ReactFlightDOMNode-test.js:852:25)',
+);
+}else{
+expect(ownerStack).toBeNull();
+}
+});
+
 // @gate enableHalt
 it('includes deeper location for aborted stacks',async()=>{
 asyncfunctiongetData(){
@@ -1364,12 +1545,12 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in Dynamic'+
 (gate(flags=>flags.enableAsyncDebugInfo)
- ? ' (file://ReactFlightDOMNode-test.js:1238:27)\n'
+ ? ' (file://ReactFlightDOMNode-test.js:1419:27)\n'
  : '\n')+
 ' in body\n'+
 ' in html\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)\n'+
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }else{
 expect(
@@ -1378,7 +1559,7 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in body\n'+
 ' in html\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }
 
@@ -1388,16 +1569,16 @@ describe('ReactFlightDOMNode', () => {
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 '\n'+
-' in Dynamic (file://ReactFlightDOMNode-test.js:1238:27)\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in Dynamic (file://ReactFlightDOMNode-test.js:1419:27)\n'+
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }else{
 expect(
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 ''+
 '\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }
 }else{

packages/react-server/src/ReactFizzServer.js

@@ -190,7 +190,14 @@ import assign from 'shared/assign';
 importnoopfrom'shared/noop';
 importgetComponentNameFromTypefrom'shared/getComponentNameFromType';
 importisArrayfrom'shared/isArray';
-import{SuspenseException,getSuspendedThenable}from'./ReactFizzThenable';
+import{
+SuspenseException,
+getSuspendedThenable,
+ensureSuspendableThenableStateDEV,
+getSuspendedCallSiteStackDEV,
+getSuspendedCallSiteDebugTaskDEV,
+setCaptureSuspendedCallSiteDEV,
+}from'./ReactFizzThenable';
 
 // Linked list representing the identity of a component given the component/tag name and key.
 // The name might be minified but we assume that it's going to be the same generated name. Typically
@@ -355,6 +362,7 @@ const OPEN = 11;
 constABORTING=12;
 constCLOSING=13;
 constCLOSED=14;
+constSTALLED_DEV=15;
 
 exportopaquetypeRequest={
 destination: null|Destination,
@@ -363,7 +371,7 @@ export opaque type Request = {
 +renderState: RenderState,
 +rootFormatContext: FormatContext,
 +progressiveChunkSize: number,
-status: 10|11|12|13|14,
+status: 10|11|12|13|14|15,
 fatalError: mixed,
 nextSegmentId: number,
 allPendingTasks: number,// when it reaches zero, we can close the connection.
@@ -1023,6 +1031,89 @@ function pushHaltedAwaitOnComponentStack(
 }
 }
 
+// performWork + retryTask without mutation
+functionrerenderStalledTask(request: Request,task: Task): void{
+constprevStatus=request.status;
+request.status=STALLED_DEV;
+
+constprevContext=getActiveContext();
+constprevDispatcher=ReactSharedInternals.H;
+ReactSharedInternals.H=HooksDispatcher;
+constprevAsyncDispatcher=ReactSharedInternals.A;
+ReactSharedInternals.A=DefaultAsyncDispatcher;
+
+constprevRequest=currentRequest;
+currentRequest=request;
+
+constprevGetCurrentStackImpl=ReactSharedInternals.getCurrentStack;
+ReactSharedInternals.getCurrentStack=getCurrentStackInDEV;
+
+constprevResumableState=currentResumableState;
+setCurrentResumableState(request.resumableState);
+switchContext(task.context);
+constprevTaskInDEV=currentTaskInDEV;
+setCurrentTaskInDEV(task);
+try{
+retryNode(request,task);
+}catch(x){
+// Suspended again.
+resetHooksState();
+}finally{
+setCurrentTaskInDEV(prevTaskInDEV);
+setCurrentResumableState(prevResumableState);
+
+ReactSharedInternals.H =prevDispatcher;
+ReactSharedInternals.A=prevAsyncDispatcher;
+
+ReactSharedInternals.getCurrentStack=prevGetCurrentStackImpl;
+if(prevDispatcher===HooksDispatcher){
+// This means that we were in a reentrant work loop. This could happen
+// in a renderer that supports synchronous work like renderToString,
+// when it's called from within another renderer.
+// Normally we don't bother switching the contexts to their root/default
+// values when leaving because we'll likely need the same or similar
+// context again. However, when we're inside a synchronous loop like this
+// we'll to restore the context to what it was before returning.
+switchContext(prevContext);
+}
+ currentRequest =prevRequest;
+request.status=prevStatus;
+}
+}
+
+functionpushSuspendedCallSiteOnComponentStack(
+request: Request,
+task: Task,
+): void{
+ setCaptureSuspendedCallSiteDEV(true);
+constrestoreThenableState=ensureSuspendableThenableStateDEV(
+// refined at the callsite
+((task.thenableState: any): ThenableState),
+);
+try{
+rerenderStalledTask(request,task);
+}finally{
+restoreThenableState();
+ setCaptureSuspendedCallSiteDEV(false);
+}
+
+const suspendCallSiteStack =getSuspendedCallSiteStackDEV();
+constsuspendCallSiteDebugTask=getSuspendedCallSiteDebugTaskDEV();
+
+if(suspendCallSiteStack!==null){
+const ownerStack =task.componentStack;
+task.componentStack={
+// The owner of the suspended call site would be the owner of this task.
+// We need the task itself otherwise we'd miss a frame.
+owner: ownerStack,
+parent: suspendCallSiteStack.parent,
+stack: suspendCallSiteStack.stack,
+type: suspendCallSiteStack.type,
+};
+}
+task.debugTask=suspendCallSiteDebugTask;
+}
+
 functionpushServerComponentStack(
 task: Task,
 debugInfo: void|null|ReactDebugInfo,
@@ -2723,7 +2814,12 @@ function renderLazyComponent(
 constinit=lazyComponent._init;
 Component=init(payload);
 }
-if(request.status===ABORTING){
+if(
+request.status===ABORTING&&
+// We're going to discard this render anyway.
+// We just need to reach the point where we suspended in dev.
+(!__DEV__||request.status!==STALLED_DEV)
+){
 // eslint-disable-next-line no-throw-literal
 thrownull;
 }
@@ -4535,12 +4631,9 @@ function abortTask(task: Task, request: Request, error: mixed): void {
 debugInfo=node._debugInfo;
 }
 pushHaltedAwaitOnComponentStack(task,debugInfo);
-/*
 if(task.thenableState!==null){
- // TODO: If we were stalled inside use() of a Client Component then we should
- // rerender to get the stack trace from the use() call.
+pushSuspendedCallSiteOnComponentStack(request,task);
 }
- */
 }
 }
 

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -108,6 +108,28 @@ describe('ReactFlightDOMNode', () => {
 );
 }
 
+/**
+ * Removes all stackframes not pointing into this file
+ */
+functionignoreListStack(str){
+if(!str){
+returnstr;
+}
+
+letignoreListedStack='';
+constlines=str.split('\n');
+
+// eslint-disable-next-line no-for-of-loops/no-for-of-loops
+for(constlineoflines){
+if(line.indexOf(__filename)===-1){
+}else{
+ignoreListedStack+='\n'+line.replace(__dirname,'.');
+}
+}
+
+returnignoreListedStack;
+}
+
 functionreadResult(stream){
 returnnewPromise((resolve,reject)=>{
 letbuffer='';
@@ -784,6 +806,165 @@ describe('ReactFlightDOMNode', () => {
 }
 });
 
+// @gate enableHalt
+it('includes source locations in component and owner stacks for halted Client components',async()=>{
+functionSharedComponent({p1, p2, p3}){
+use(p1);
+use(p2);
+use(p3);
+return<div>Hello, Dave!</div>;
+}
+constClientComponentOnTheServer=clientExports(SharedComponent);
+constClientComponentOnTheClient=clientExports(
+SharedComponent,
+123,
+'path/to/chunk.js',
+);
+
+letresolvePendingPromise;
+functionServerComponent(){
+constp1=Promise.resolve();
+constp2=newPromise(resolve=>{
+resolvePendingPromise=value=>{
+p2.status='fulfilled';
+p2.value=value;
+resolve(value);
+};
+});
+constp3=newPromise(()=>{});
+returnReactServer.createElement(ClientComponentOnTheClient,{
+p1: p1,
+p2: p2,
+p3: p3,
+});
+}
+
+functionApp(){
+returnReactServer.createElement(
+'html',
+null,
+ReactServer.createElement(
+'body',
+null,
+ReactServer.createElement(
+ReactServer.Suspense,
+{fallback: 'Loading...'},
+ReactServer.createElement(ServerComponent,null),
+),
+),
+);
+}
+
+consterrors=[];
+constrscStream=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(
+ReactServer.createElement(App,null),
+webpackMap,
+),
+);
+
+constreadable=newStream.PassThrough(streamOptions);
+rscStream.pipe(readable);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constserverConsumerManifest={
+moduleMap: {
+[webpackMap[ClientComponentOnTheClient.$$id].id]: {
+'*': webpackMap[ClientComponentOnTheServer.$$id],
+},
+},
+moduleLoading: webpackModuleLoading,
+};
+
+expect(errors).toEqual([]);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constresponse=ReactServerDOMClient.createFromNodeStream(
+readable,
+serverConsumerManifest,
+);
+
+letcomponentStack;
+letownerStack;
+
+constclientAbortController=newAbortController();
+
+constfizzPrerenderStreamResult=ReactDOMFizzStatic.prerender(
+React.createElement(ClientRoot,{response}),
+{
+signal: clientAbortController.signal,
+onError(error,errorInfo){
+componentStack=errorInfo.componentStack;
+ownerStack=React.captureOwnerStack
+ ? React.captureOwnerStack()
+ : null;
+},
+},
+);
+
+resolvePendingPromise('custom-instrum-resolve');
+awaitserverAct(
+async()=>
+newPromise(resolve=>{
+setImmediate(()=>{
+clientAbortController.abort();
+resolve();
+});
+}),
+);
+
+constfizzPrerenderStream=awaitfizzPrerenderStreamResult;
+constprerenderHTML=awaitreadWebResult(fizzPrerenderStream.prelude);
+
+expect(prerenderHTML).toContain('Loading...');
+
+if(__DEV__){
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in ServerComponent'+
+(gate(flags=>flags.enableAsyncDebugInfo) ? ' (at **)' : '')+
+'\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in App (at **)\n'+
+' in ClientRoot (at **)',
+);
+}else{
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in ClientRoot (at **)',
+);
+}
+
+if(__DEV__){
+expect(ignoreListStack(ownerStack)).toBe(
+// eslint-disable-next-line react-internal/safe-string-coercion
+''+
+// The concrete location may change as this test is updated.
+// Just make sure they still point at React.use(p2)
+(gate(flags=>flags.enableAsyncDebugInfo)
+ ? '\n at SharedComponent (./ReactFlightDOMNode-test.js:813:7)'
+ : '')+
+'\n at ServerComponent (file://./ReactFlightDOMNode-test.js:835:26)'+
+'\n at App (file://./ReactFlightDOMNode-test.js:852:25)',
+);
+}else{
+expect(ownerStack).toBeNull();
+}
+});
+
 // @gate enableHalt
 it('includes deeper location for aborted stacks',async()=>{
 asyncfunctiongetData(){
@@ -1364,12 +1545,12 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in Dynamic'+
 (gate(flags=>flags.enableAsyncDebugInfo)
- ? ' (file://ReactFlightDOMNode-test.js:1238:27)\n'
+ ? ' (file://ReactFlightDOMNode-test.js:1419:27)\n'
  : '\n')+
 ' in body\n'+
 ' in html\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)\n'+
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }else{
 expect(
@@ -1378,7 +1559,7 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in body\n'+
 ' in html\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }
 
@@ -1388,16 +1569,16 @@ describe('ReactFlightDOMNode', () => {
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 '\n'+
-' in Dynamic (file://ReactFlightDOMNode-test.js:1238:27)\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in Dynamic (file://ReactFlightDOMNode-test.js:1419:27)\n'+
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }else{
 expect(
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 ''+
 '\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }
 }else{

packages/react-server/src/ReactFizzServer.js

@@ -190,7 +190,14 @@ import assign from 'shared/assign';
 importnoopfrom'shared/noop';
 importgetComponentNameFromTypefrom'shared/getComponentNameFromType';
 importisArrayfrom'shared/isArray';
-import{SuspenseException,getSuspendedThenable}from'./ReactFizzThenable';
+import{
+SuspenseException,
+getSuspendedThenable,
+ensureSuspendableThenableStateDEV,
+getSuspendedCallSiteStackDEV,
+getSuspendedCallSiteDebugTaskDEV,
+setCaptureSuspendedCallSiteDEV,
+}from'./ReactFizzThenable';
 
 // Linked list representing the identity of a component given the component/tag name and key.
 // The name might be minified but we assume that it's going to be the same generated name. Typically
@@ -355,6 +362,7 @@ const OPEN = 11;
 constABORTING=12;
 constCLOSING=13;
 constCLOSED=14;
+constSTALLED_DEV=15;
 
 exportopaquetypeRequest={
 destination: null|Destination,
@@ -363,7 +371,7 @@ export opaque type Request = {
 +renderState: RenderState,
 +rootFormatContext: FormatContext,
 +progressiveChunkSize: number,
-status: 10|11|12|13|14,
+status: 10|11|12|13|14|15,
 fatalError: mixed,
 nextSegmentId: number,
 allPendingTasks: number,// when it reaches zero, we can close the connection.
@@ -1023,6 +1031,89 @@ function pushHaltedAwaitOnComponentStack(
 }
 }
 
+// performWork + retryTask without mutation
+functionrerenderStalledTask(request: Request,task: Task): void{
+constprevStatus=request.status;
+request.status=STALLED_DEV;
+
+constprevContext=getActiveContext();
+constprevDispatcher=ReactSharedInternals.H;
+ReactSharedInternals.H=HooksDispatcher;
+constprevAsyncDispatcher=ReactSharedInternals.A;
+ReactSharedInternals.A=DefaultAsyncDispatcher;
+
+constprevRequest=currentRequest;
+currentRequest=request;
+
+constprevGetCurrentStackImpl=ReactSharedInternals.getCurrentStack;
+ReactSharedInternals.getCurrentStack=getCurrentStackInDEV;
+
+constprevResumableState=currentResumableState;
+setCurrentResumableState(request.resumableState);
+switchContext(task.context);
+constprevTaskInDEV=currentTaskInDEV;
+setCurrentTaskInDEV(task);
+try{
+retryNode(request,task);
+}catch(x){
+// Suspended again.
+resetHooksState();
+}finally{
+setCurrentTaskInDEV(prevTaskInDEV);
+setCurrentResumableState(prevResumableState);
+
+ReactSharedInternals.H =prevDispatcher;
+ReactSharedInternals.A=prevAsyncDispatcher;
+
+ReactSharedInternals.getCurrentStack=prevGetCurrentStackImpl;
+if(prevDispatcher===HooksDispatcher){
+// This means that we were in a reentrant work loop. This could happen
+// in a renderer that supports synchronous work like renderToString,
+// when it's called from within another renderer.
+// Normally we don't bother switching the contexts to their root/default
+// values when leaving because we'll likely need the same or similar
+// context again. However, when we're inside a synchronous loop like this
+// we'll to restore the context to what it was before returning.
+switchContext(prevContext);
+}
+ currentRequest =prevRequest;
+request.status=prevStatus;
+}
+}
+
+functionpushSuspendedCallSiteOnComponentStack(
+request: Request,
+task: Task,
+): void{
+ setCaptureSuspendedCallSiteDEV(true);
+constrestoreThenableState=ensureSuspendableThenableStateDEV(
+// refined at the callsite
+((task.thenableState: any): ThenableState),
+);
+try{
+rerenderStalledTask(request,task);
+}finally{
+restoreThenableState();
+ setCaptureSuspendedCallSiteDEV(false);
+}
+
+const suspendCallSiteStack =getSuspendedCallSiteStackDEV();
+constsuspendCallSiteDebugTask=getSuspendedCallSiteDebugTaskDEV();
+
+if(suspendCallSiteStack!==null){
+const ownerStack =task.componentStack;
+task.componentStack={
+// The owner of the suspended call site would be the owner of this task.
+// We need the task itself otherwise we'd miss a frame.
+owner: ownerStack,
+parent: suspendCallSiteStack.parent,
+stack: suspendCallSiteStack.stack,
+type: suspendCallSiteStack.type,
+};
+}
+task.debugTask=suspendCallSiteDebugTask;
+}
+
 functionpushServerComponentStack(
 task: Task,
 debugInfo: void|null|ReactDebugInfo,
@@ -2723,7 +2814,12 @@ function renderLazyComponent(
 constinit=lazyComponent._init;
 Component=init(payload);
 }
-if(request.status===ABORTING){
+if(
+request.status===ABORTING&&
+// We're going to discard this render anyway.
+// We just need to reach the point where we suspended in dev.
+(!__DEV__||request.status!==STALLED_DEV)
+){
 // eslint-disable-next-line no-throw-literal
 thrownull;
 }
@@ -4535,12 +4631,9 @@ function abortTask(task: Task, request: Request, error: mixed): void {
 debugInfo=node._debugInfo;
 }
 pushHaltedAwaitOnComponentStack(task,debugInfo);
-/*
 if(task.thenableState!==null){
- // TODO: If we were stalled inside use() of a Client Component then we should
- // rerender to get the stack trace from the use() call.
+pushSuspendedCallSiteOnComponentStack(request,task);
 }
- */
 }
 }
 

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -108,6 +108,28 @@ describe('ReactFlightDOMNode', () => {
 );
 }
 
+/**
+ * Removes all stackframes not pointing into this file
+ */
+functionignoreListStack(str){
+if(!str){
+returnstr;
+}
+
+letignoreListedStack='';
+constlines=str.split('\n');
+
+// eslint-disable-next-line no-for-of-loops/no-for-of-loops
+for(constlineoflines){
+if(line.indexOf(__filename)===-1){
+}else{
+ignoreListedStack+='\n'+line.replace(__dirname,'.');
+}
+}
+
+returnignoreListedStack;
+}
+
 functionreadResult(stream){
 returnnewPromise((resolve,reject)=>{
 letbuffer='';
@@ -784,6 +806,165 @@ describe('ReactFlightDOMNode', () => {
 }
 });
 
+// @gate enableHalt
+it('includes source locations in component and owner stacks for halted Client components',async()=>{
+functionSharedComponent({p1, p2, p3}){
+use(p1);
+use(p2);
+use(p3);
+return<div>Hello, Dave!</div>;
+}
+constClientComponentOnTheServer=clientExports(SharedComponent);
+constClientComponentOnTheClient=clientExports(
+SharedComponent,
+123,
+'path/to/chunk.js',
+);
+
+letresolvePendingPromise;
+functionServerComponent(){
+constp1=Promise.resolve();
+constp2=newPromise(resolve=>{
+resolvePendingPromise=value=>{
+p2.status='fulfilled';
+p2.value=value;
+resolve(value);
+};
+});
+constp3=newPromise(()=>{});
+returnReactServer.createElement(ClientComponentOnTheClient,{
+p1: p1,
+p2: p2,
+p3: p3,
+});
+}
+
+functionApp(){
+returnReactServer.createElement(
+'html',
+null,
+ReactServer.createElement(
+'body',
+null,
+ReactServer.createElement(
+ReactServer.Suspense,
+{fallback: 'Loading...'},
+ReactServer.createElement(ServerComponent,null),
+),
+),
+);
+}
+
+consterrors=[];
+constrscStream=awaitserverAct(()=>
+ReactServerDOMServer.renderToPipeableStream(
+ReactServer.createElement(App,null),
+webpackMap,
+),
+);
+
+constreadable=newStream.PassThrough(streamOptions);
+rscStream.pipe(readable);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constserverConsumerManifest={
+moduleMap: {
+[webpackMap[ClientComponentOnTheClient.$$id].id]: {
+'*': webpackMap[ClientComponentOnTheServer.$$id],
+},
+},
+moduleLoading: webpackModuleLoading,
+};
+
+expect(errors).toEqual([]);
+
+functionClientRoot({response}){
+returnuse(response);
+}
+
+constresponse=ReactServerDOMClient.createFromNodeStream(
+readable,
+serverConsumerManifest,
+);
+
+letcomponentStack;
+letownerStack;
+
+constclientAbortController=newAbortController();
+
+constfizzPrerenderStreamResult=ReactDOMFizzStatic.prerender(
+React.createElement(ClientRoot,{response}),
+{
+signal: clientAbortController.signal,
+onError(error,errorInfo){
+componentStack=errorInfo.componentStack;
+ownerStack=React.captureOwnerStack
+ ? React.captureOwnerStack()
+ : null;
+},
+},
+);
+
+resolvePendingPromise('custom-instrum-resolve');
+awaitserverAct(
+async()=>
+newPromise(resolve=>{
+setImmediate(()=>{
+clientAbortController.abort();
+resolve();
+});
+}),
+);
+
+constfizzPrerenderStream=awaitfizzPrerenderStreamResult;
+constprerenderHTML=awaitreadWebResult(fizzPrerenderStream.prelude);
+
+expect(prerenderHTML).toContain('Loading...');
+
+if(__DEV__){
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in ServerComponent'+
+(gate(flags=>flags.enableAsyncDebugInfo) ? ' (at **)' : '')+
+'\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in App (at **)\n'+
+' in ClientRoot (at **)',
+);
+}else{
+expect(normalizeCodeLocInfo(componentStack)).toBe(
+'\n'+
+' in SharedComponent (at **)\n'+
+' in Suspense\n'+
+' in body\n'+
+' in html\n'+
+' in ClientRoot (at **)',
+);
+}
+
+if(__DEV__){
+expect(ignoreListStack(ownerStack)).toBe(
+// eslint-disable-next-line react-internal/safe-string-coercion
+''+
+// The concrete location may change as this test is updated.
+// Just make sure they still point at React.use(p2)
+(gate(flags=>flags.enableAsyncDebugInfo)
+ ? '\n at SharedComponent (./ReactFlightDOMNode-test.js:813:7)'
+ : '')+
+'\n at ServerComponent (file://./ReactFlightDOMNode-test.js:835:26)'+
+'\n at App (file://./ReactFlightDOMNode-test.js:852:25)',
+);
+}else{
+expect(ownerStack).toBeNull();
+}
+});
+
 // @gate enableHalt
 it('includes deeper location for aborted stacks',async()=>{
 asyncfunctiongetData(){
@@ -1364,12 +1545,12 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in Dynamic'+
 (gate(flags=>flags.enableAsyncDebugInfo)
- ? ' (file://ReactFlightDOMNode-test.js:1238:27)\n'
+ ? ' (file://ReactFlightDOMNode-test.js:1419:27)\n'
  : '\n')+
 ' in body\n'+
 ' in html\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)\n'+
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }else{
 expect(
@@ -1378,7 +1559,7 @@ describe('ReactFlightDOMNode', () => {
 '\n'+
 ' in body\n'+
 ' in html\n'+
-' in ClientRoot (ReactFlightDOMNode-test.js:1326:16)',
+' in ClientRoot (ReactFlightDOMNode-test.js:1507:16)',
 );
 }
 
@@ -1388,16 +1569,16 @@ describe('ReactFlightDOMNode', () => {
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 '\n'+
-' in Dynamic (file://ReactFlightDOMNode-test.js:1238:27)\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in Dynamic (file://ReactFlightDOMNode-test.js:1419:27)\n'+
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }else{
 expect(
 normalizeCodeLocInfo(ownerStack,{preserveLocation: true}),
 ).toBe(
 ''+
 '\n'+
-' in App (file://ReactFlightDOMNode-test.js:1251:25)',
+' in App (file://ReactFlightDOMNode-test.js:1432:25)',
 );
 }
 }else{

packages/react-server/src/ReactFizzServer.js

@@ -190,7 +190,14 @@ import assign from 'shared/assign';
 importnoopfrom'shared/noop';
 importgetComponentNameFromTypefrom'shared/getComponentNameFromType';
 importisArrayfrom'shared/isArray';
-import{SuspenseException,getSuspendedThenable}from'./ReactFizzThenable';
+import{
+SuspenseException,
+getSuspendedThenable,
+ensureSuspendableThenableStateDEV,
+getSuspendedCallSiteStackDEV,
+getSuspendedCallSiteDebugTaskDEV,
+setCaptureSuspendedCallSiteDEV,
+}from'./ReactFizzThenable';
 
 // Linked list representing the identity of a component given the component/tag name and key.
 // The name might be minified but we assume that it's going to be the same generated name. Typically
@@ -355,6 +362,7 @@ const OPEN = 11;
 constABORTING=12;
 constCLOSING=13;
 constCLOSED=14;
+constSTALLED_DEV=15;
 
 exportopaquetypeRequest={
 destination: null|Destination,
@@ -363,7 +371,7 @@ export opaque type Request = {
 +renderState: RenderState,
 +rootFormatContext: FormatContext,
 +progressiveChunkSize: number,
-status: 10|11|12|13|14,
+status: 10|11|12|13|14|15,
 fatalError: mixed,
 nextSegmentId: number,
 allPendingTasks: number,// when it reaches zero, we can close the connection.
@@ -1023,6 +1031,89 @@ function pushHaltedAwaitOnComponentStack(
 }
 }
 
+// performWork + retryTask without mutation
+functionrerenderStalledTask(request: Request,task: Task): void{
+constprevStatus=request.status;
+request.status=STALLED_DEV;
+
+constprevContext=getActiveContext();
+constprevDispatcher=ReactSharedInternals.H;
+ReactSharedInternals.H=HooksDispatcher;
+constprevAsyncDispatcher=ReactSharedInternals.A;
+ReactSharedInternals.A=DefaultAsyncDispatcher;
+
+constprevRequest=currentRequest;
+currentRequest=request;
+
+constprevGetCurrentStackImpl=ReactSharedInternals.getCurrentStack;
+ReactSharedInternals.getCurrentStack=getCurrentStackInDEV;
+
+constprevResumableState=currentResumableState;
+setCurrentResumableState(request.resumableState);
+switchContext(task.context);
+constprevTaskInDEV=currentTaskInDEV;
+setCurrentTaskInDEV(task);
+try{
+retryNode(request,task);
+}catch(x){
+// Suspended again.
+resetHooksState();
+}finally{
+setCurrentTaskInDEV(prevTaskInDEV);
+setCurrentResumableState(prevResumableState);
+
+ReactSharedInternals.H =prevDispatcher;
+ReactSharedInternals.A=prevAsyncDispatcher;
+
+ReactSharedInternals.getCurrentStack=prevGetCurrentStackImpl;
+if(prevDispatcher===HooksDispatcher){
+// This means that we were in a reentrant work loop. This could happen
+// in a renderer that supports synchronous work like renderToString,
+// when it's called from within another renderer.
+// Normally we don't bother switching the contexts to their root/default
+// values when leaving because we'll likely need the same or similar
+// context again. However, when we're inside a synchronous loop like this
+// we'll to restore the context to what it was before returning.
+switchContext(prevContext);
+}
+ currentRequest =prevRequest;
+request.status=prevStatus;
+}
+}
+
+functionpushSuspendedCallSiteOnComponentStack(
+request: Request,
+task: Task,
+): void{
+ setCaptureSuspendedCallSiteDEV(true);
+constrestoreThenableState=ensureSuspendableThenableStateDEV(
+// refined at the callsite
+((task.thenableState: any): ThenableState),
+);
+try{
+rerenderStalledTask(request,task);
+}finally{
+restoreThenableState();
+ setCaptureSuspendedCallSiteDEV(false);
+}
+
+const suspendCallSiteStack =getSuspendedCallSiteStackDEV();
+constsuspendCallSiteDebugTask=getSuspendedCallSiteDebugTaskDEV();
+
+if(suspendCallSiteStack!==null){
+const ownerStack =task.componentStack;
+task.componentStack={
+// The owner of the suspended call site would be the owner of this task.
+// We need the task itself otherwise we'd miss a frame.
+owner: ownerStack,
+parent: suspendCallSiteStack.parent,
+stack: suspendCallSiteStack.stack,
+type: suspendCallSiteStack.type,
+};
+}
+task.debugTask=suspendCallSiteDebugTask;
+}
+
 functionpushServerComponentStack(
 task: Task,
 debugInfo: void|null|ReactDebugInfo,
@@ -2723,7 +2814,12 @@ function renderLazyComponent(
 constinit=lazyComponent._init;
 Component=init(payload);
 }
-if(request.status===ABORTING){
+if(
+request.status===ABORTING&&
+// We're going to discard this render anyway.
+// We just need to reach the point where we suspended in dev.
+(!__DEV__||request.status!==STALLED_DEV)
+){
 // eslint-disable-next-line no-throw-literal
 thrownull;
 }
@@ -4535,12 +4631,9 @@ function abortTask(task: Task, request: Request, error: mixed): void {
 debugInfo=node._debugInfo;
 }
 pushHaltedAwaitOnComponentStack(task,debugInfo);
-/*
 if(task.thenableState!==null){
- // TODO: If we were stalled inside use() of a Client Component then we should
- // rerender to get the stack trace from the use() call.
+pushSuspendedCallSiteOnComponentStack(request,task);
 }
- */
 }
 }