[Flight] Add support for transporting Error.cause (#35810)

Author: eps1lon

packages/react-client/src/ReactFlightClient.js

@@ -8,6 +8,7 @@
  */
 
 importtype{
+JSONValue,
 Thenable,
 ReactDebugInfo,
 ReactDebugInfoEntry,
@@ -132,14 +133,6 @@ interface FlightStreamController {
 
 typeUninitializedModel=string;
 
-exporttypeJSONValue=
-|number
-|null
-|boolean
-|string
-|{+[key: string]: JSONValue}
-|$ReadOnlyArray<JSONValue>;
-
 typeProfilingResult={
 track: number,
 endTime: number,
@@ -3527,6 +3520,18 @@ function resolveErrorDev(
 }
 
 leterror;
+consterrorOptions=
+'cause'inerrorInfo
+ ? {
+cause: reviveModel(
+response,
+// $FlowFixMe[incompatible-cast] -- Flow thinks `cause` in `cause?: JSONValue` can be undefined after `in` check.
+(errorInfo.cause: JSONValue),
+errorInfo,
+'cause',
+),
+}
+ : undefined;
 constcallStack=buildFakeCallStack(
 response,
 stack,
@@ -3537,6 +3542,7 @@ function resolveErrorDev(
 null,
 message||
 'An error occurred in the Server Components render but no message was provided',
+errorOptions,
 ),
 );
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -707,6 +707,139 @@ describe('ReactFlight', () => {
 }
 });
 
+it('can transport Error.cause',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: ${errorinstanceofError}
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+functionComponentClient({error}){
+returnrenderError(error);
+}
+constComponent=clientReference(ComponentClient);
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+return<Componenterror={error}/>;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+
+if(__DEV__){
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
+it('includes Error.cause in thrown errors',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: true
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+throwerror;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+leterror;
+try{
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+}catch(x){
+error=x;
+}
+
+if(__DEV__){
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
 it('can transport cyclic objects',async()=>{
 functionComponentClient({prop}){
 expect(prop.obj.obj.obj).toBe(prop.obj.obj);

packages/react-server/src/ReactFlightServer.js

@@ -467,14 +467,6 @@ function getCurrentStackInDEV(): string {
 
 constObjectPrototype=Object.prototype;
 
-typeJSONValue=
-|string
-|boolean
-|number
-|null
-|{+[key: string]: JSONValue}
- | $ReadOnlyArray<JSONValue>;
-
 conststringify=JSON.stringify;
 
 typeReactJSONValue=
@@ -498,6 +490,7 @@ export type ReactClientValue =
  | React$Element<string>
  | React$Element<ClientReference<any>&any>
 |ReactComponentInfo
+|ReactErrorInfo
 |string
 |boolean
 |number
@@ -4171,6 +4164,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name,message,stack,env};
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineModel(request,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineModel(request,errorInfo);
 return'$Z'+id.toString(16);
 }else{
@@ -4181,7 +4179,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 }
 }
 
-function serializeDebugErrorValue(request: Request, error: Error): string {
+functionserializeDebugErrorValue(
+request: Request,
+counter: {objectLimit: number},
+error: Error,
+): string{
 if(__DEV__){
  let name: string='Error';
  let message: string;
@@ -4203,6 +4205,12 @@ function serializeDebugErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name, message, stack, env};
+if('cause'inerror){
+counter.objectLimit--;
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineDebugModel(request,counter,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineDebugModel(
 request,
 {objectLimit: stack.length*2+1},
@@ -4231,6 +4239,7 @@ function emitErrorChunk(
 letmessage: string;
 letstack: ReactStackTrace;
 letenv=(0,request.environmentName)();
+letcauseReference: null|string=null;
 try{
 if(errorinstanceofError){
 name=error.name;
@@ -4243,6 +4252,13 @@ function emitErrorChunk(
 // Keep the environment name.
 env=errorEnv;
 }
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=debug
+ ? outlineDebugModel(request,{objectLimit: 5},cause)
+ : outlineModel(request,cause);
+causeReference=serializeByValueID(causeId);
+}
 }elseif(typeoferror==='object'&&error!==null){
 message=describeObjectForErrorMessage(error);
 stack=[];
@@ -4258,6 +4274,9 @@ function emitErrorChunk(
 constownerRef=
 owner==null ? null : outlineComponentInfo(request,owner);
 errorInfo={digest, name, message, stack, env,owner: ownerRef};
+if(causeReference!==null){
+(errorInfo: ReactErrorInfoDev).cause=causeReference;
+}
 }else{
  errorInfo ={digest};
 }
@@ -4969,7 +4988,7 @@ function renderDebugModel(
 returnserializeDebugFormData(request,value);
 }
  if (value instanceof Error) {
-returnserializeDebugErrorValue(request,value);
+returnserializeDebugErrorValue(request,counter,value);
 }
  if (value instanceof ArrayBuffer) {
 returnserializeDebugTypedArray(request,'A',newUint8Array(value));

packages/shared/ReactTypes.js

@@ -228,13 +228,22 @@ export type ReactErrorInfoProd = {
 +digest: string,
 };
 
+export type JSONValue =
+ | string
+ | boolean
+ | number
+ | null
+ | {+[key: string]: JSONValue}
+ | $ReadOnlyArray<JSONValue>;
+
 export type ReactErrorInfoDev = {
 +digest?: string,
 +name: string,
 +message: string,
 +stack: ReactStackTrace,
 +env: string,
 +owner?: null|string,
+cause?: JSONValue,
 };
 
 export type ReactErrorInfo = ReactErrorInfoProd | ReactErrorInfoDev;

packages/react-client/src/ReactFlightClient.js

@@ -8,6 +8,7 @@
  */
 
 importtype{
+JSONValue,
 Thenable,
 ReactDebugInfo,
 ReactDebugInfoEntry,
@@ -132,14 +133,6 @@ interface FlightStreamController {
 
 typeUninitializedModel=string;
 
-exporttypeJSONValue=
-|number
-|null
-|boolean
-|string
-|{+[key: string]: JSONValue}
-|$ReadOnlyArray<JSONValue>;
-
 typeProfilingResult={
 track: number,
 endTime: number,
@@ -3527,6 +3520,18 @@ function resolveErrorDev(
 }
 
 leterror;
+consterrorOptions=
+'cause'inerrorInfo
+ ? {
+cause: reviveModel(
+response,
+// $FlowFixMe[incompatible-cast] -- Flow thinks `cause` in `cause?: JSONValue` can be undefined after `in` check.
+(errorInfo.cause: JSONValue),
+errorInfo,
+'cause',
+),
+}
+ : undefined;
 constcallStack=buildFakeCallStack(
 response,
 stack,
@@ -3537,6 +3542,7 @@ function resolveErrorDev(
 null,
 message||
 'An error occurred in the Server Components render but no message was provided',
+errorOptions,
 ),
 );
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -707,6 +707,139 @@ describe('ReactFlight', () => {
 }
 });
 
+it('can transport Error.cause',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: ${errorinstanceofError}
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+functionComponentClient({error}){
+returnrenderError(error);
+}
+constComponent=clientReference(ComponentClient);
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+return<Componenterror={error}/>;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+
+if(__DEV__){
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
+it('includes Error.cause in thrown errors',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: true
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+throwerror;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+leterror;
+try{
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+}catch(x){
+error=x;
+}
+
+if(__DEV__){
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
 it('can transport cyclic objects',async()=>{
 functionComponentClient({prop}){
 expect(prop.obj.obj.obj).toBe(prop.obj.obj);

packages/react-server/src/ReactFlightServer.js

@@ -467,14 +467,6 @@ function getCurrentStackInDEV(): string {
 
 constObjectPrototype=Object.prototype;
 
-typeJSONValue=
-|string
-|boolean
-|number
-|null
-|{+[key: string]: JSONValue}
- | $ReadOnlyArray<JSONValue>;
-
 conststringify=JSON.stringify;
 
 typeReactJSONValue=
@@ -498,6 +490,7 @@ export type ReactClientValue =
  | React$Element<string>
  | React$Element<ClientReference<any>&any>
 |ReactComponentInfo
+|ReactErrorInfo
 |string
 |boolean
 |number
@@ -4171,6 +4164,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name,message,stack,env};
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineModel(request,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineModel(request,errorInfo);
 return'$Z'+id.toString(16);
 }else{
@@ -4181,7 +4179,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 }
 }
 
-function serializeDebugErrorValue(request: Request, error: Error): string {
+functionserializeDebugErrorValue(
+request: Request,
+counter: {objectLimit: number},
+error: Error,
+): string{
 if(__DEV__){
  let name: string='Error';
  let message: string;
@@ -4203,6 +4205,12 @@ function serializeDebugErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name, message, stack, env};
+if('cause'inerror){
+counter.objectLimit--;
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineDebugModel(request,counter,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineDebugModel(
 request,
 {objectLimit: stack.length*2+1},
@@ -4231,6 +4239,7 @@ function emitErrorChunk(
 letmessage: string;
 letstack: ReactStackTrace;
 letenv=(0,request.environmentName)();
+letcauseReference: null|string=null;
 try{
 if(errorinstanceofError){
 name=error.name;
@@ -4243,6 +4252,13 @@ function emitErrorChunk(
 // Keep the environment name.
 env=errorEnv;
 }
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=debug
+ ? outlineDebugModel(request,{objectLimit: 5},cause)
+ : outlineModel(request,cause);
+causeReference=serializeByValueID(causeId);
+}
 }elseif(typeoferror==='object'&&error!==null){
 message=describeObjectForErrorMessage(error);
 stack=[];
@@ -4258,6 +4274,9 @@ function emitErrorChunk(
 constownerRef=
 owner==null ? null : outlineComponentInfo(request,owner);
 errorInfo={digest, name, message, stack, env,owner: ownerRef};
+if(causeReference!==null){
+(errorInfo: ReactErrorInfoDev).cause=causeReference;
+}
 }else{
  errorInfo ={digest};
 }
@@ -4969,7 +4988,7 @@ function renderDebugModel(
 returnserializeDebugFormData(request,value);
 }
  if (value instanceof Error) {
-returnserializeDebugErrorValue(request,value);
+returnserializeDebugErrorValue(request,counter,value);
 }
  if (value instanceof ArrayBuffer) {
 returnserializeDebugTypedArray(request,'A',newUint8Array(value));

packages/shared/ReactTypes.js

@@ -228,13 +228,22 @@ export type ReactErrorInfoProd = {
 +digest: string,
 };
 
+export type JSONValue =
+ | string
+ | boolean
+ | number
+ | null
+ | {+[key: string]: JSONValue}
+ | $ReadOnlyArray<JSONValue>;
+
 export type ReactErrorInfoDev = {
 +digest?: string,
 +name: string,
 +message: string,
 +stack: ReactStackTrace,
 +env: string,
 +owner?: null|string,
+cause?: JSONValue,
 };
 
 export type ReactErrorInfo = ReactErrorInfoProd | ReactErrorInfoDev;

packages/react-client/src/ReactFlightClient.js

@@ -8,6 +8,7 @@
  */
 
 importtype{
+JSONValue,
 Thenable,
 ReactDebugInfo,
 ReactDebugInfoEntry,
@@ -132,14 +133,6 @@ interface FlightStreamController {
 
 typeUninitializedModel=string;
 
-exporttypeJSONValue=
-|number
-|null
-|boolean
-|string
-|{+[key: string]: JSONValue}
-|$ReadOnlyArray<JSONValue>;
-
 typeProfilingResult={
 track: number,
 endTime: number,
@@ -3527,6 +3520,18 @@ function resolveErrorDev(
 }
 
 leterror;
+consterrorOptions=
+'cause'inerrorInfo
+ ? {
+cause: reviveModel(
+response,
+// $FlowFixMe[incompatible-cast] -- Flow thinks `cause` in `cause?: JSONValue` can be undefined after `in` check.
+(errorInfo.cause: JSONValue),
+errorInfo,
+'cause',
+),
+}
+ : undefined;
 constcallStack=buildFakeCallStack(
 response,
 stack,
@@ -3537,6 +3542,7 @@ function resolveErrorDev(
 null,
 message||
 'An error occurred in the Server Components render but no message was provided',
+errorOptions,
 ),
 );
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -707,6 +707,139 @@ describe('ReactFlight', () => {
 }
 });
 
+it('can transport Error.cause',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: ${errorinstanceofError}
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+functionComponentClient({error}){
+returnrenderError(error);
+}
+constComponent=clientReference(ComponentClient);
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+return<Componenterror={error}/>;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+
+if(__DEV__){
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
+it('includes Error.cause in thrown errors',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: true
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+throwerror;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+leterror;
+try{
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+}catch(x){
+error=x;
+}
+
+if(__DEV__){
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
 it('can transport cyclic objects',async()=>{
 functionComponentClient({prop}){
 expect(prop.obj.obj.obj).toBe(prop.obj.obj);

packages/react-server/src/ReactFlightServer.js

@@ -467,14 +467,6 @@ function getCurrentStackInDEV(): string {
 
 constObjectPrototype=Object.prototype;
 
-typeJSONValue=
-|string
-|boolean
-|number
-|null
-|{+[key: string]: JSONValue}
- | $ReadOnlyArray<JSONValue>;
-
 conststringify=JSON.stringify;
 
 typeReactJSONValue=
@@ -498,6 +490,7 @@ export type ReactClientValue =
  | React$Element<string>
  | React$Element<ClientReference<any>&any>
 |ReactComponentInfo
+|ReactErrorInfo
 |string
 |boolean
 |number
@@ -4171,6 +4164,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name,message,stack,env};
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineModel(request,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineModel(request,errorInfo);
 return'$Z'+id.toString(16);
 }else{
@@ -4181,7 +4179,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 }
 }
 
-function serializeDebugErrorValue(request: Request, error: Error): string {
+functionserializeDebugErrorValue(
+request: Request,
+counter: {objectLimit: number},
+error: Error,
+): string{
 if(__DEV__){
  let name: string='Error';
  let message: string;
@@ -4203,6 +4205,12 @@ function serializeDebugErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name, message, stack, env};
+if('cause'inerror){
+counter.objectLimit--;
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineDebugModel(request,counter,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineDebugModel(
 request,
 {objectLimit: stack.length*2+1},
@@ -4231,6 +4239,7 @@ function emitErrorChunk(
 letmessage: string;
 letstack: ReactStackTrace;
 letenv=(0,request.environmentName)();
+letcauseReference: null|string=null;
 try{
 if(errorinstanceofError){
 name=error.name;
@@ -4243,6 +4252,13 @@ function emitErrorChunk(
 // Keep the environment name.
 env=errorEnv;
 }
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=debug
+ ? outlineDebugModel(request,{objectLimit: 5},cause)
+ : outlineModel(request,cause);
+causeReference=serializeByValueID(causeId);
+}
 }elseif(typeoferror==='object'&&error!==null){
 message=describeObjectForErrorMessage(error);
 stack=[];
@@ -4258,6 +4274,9 @@ function emitErrorChunk(
 constownerRef=
 owner==null ? null : outlineComponentInfo(request,owner);
 errorInfo={digest, name, message, stack, env,owner: ownerRef};
+if(causeReference!==null){
+(errorInfo: ReactErrorInfoDev).cause=causeReference;
+}
 }else{
  errorInfo ={digest};
 }
@@ -4969,7 +4988,7 @@ function renderDebugModel(
 returnserializeDebugFormData(request,value);
 }
  if (value instanceof Error) {
-returnserializeDebugErrorValue(request,value);
+returnserializeDebugErrorValue(request,counter,value);
 }
  if (value instanceof ArrayBuffer) {
 returnserializeDebugTypedArray(request,'A',newUint8Array(value));

packages/shared/ReactTypes.js

@@ -228,13 +228,22 @@ export type ReactErrorInfoProd = {
 +digest: string,
 };
 
+export type JSONValue =
+ | string
+ | boolean
+ | number
+ | null
+ | {+[key: string]: JSONValue}
+ | $ReadOnlyArray<JSONValue>;
+
 export type ReactErrorInfoDev = {
 +digest?: string,
 +name: string,
 +message: string,
 +stack: ReactStackTrace,
 +env: string,
 +owner?: null|string,
+cause?: JSONValue,
 };
 
 export type ReactErrorInfo = ReactErrorInfoProd | ReactErrorInfoDev;

packages/react-client/src/ReactFlightClient.js

@@ -8,6 +8,7 @@
  */
 
 importtype{
+JSONValue,
 Thenable,
 ReactDebugInfo,
 ReactDebugInfoEntry,
@@ -132,14 +133,6 @@ interface FlightStreamController {
 
 typeUninitializedModel=string;
 
-exporttypeJSONValue=
-|number
-|null
-|boolean
-|string
-|{+[key: string]: JSONValue}
-|$ReadOnlyArray<JSONValue>;
-
 typeProfilingResult={
 track: number,
 endTime: number,
@@ -3527,6 +3520,18 @@ function resolveErrorDev(
 }
 
 leterror;
+consterrorOptions=
+'cause'inerrorInfo
+ ? {
+cause: reviveModel(
+response,
+// $FlowFixMe[incompatible-cast] -- Flow thinks `cause` in `cause?: JSONValue` can be undefined after `in` check.
+(errorInfo.cause: JSONValue),
+errorInfo,
+'cause',
+),
+}
+ : undefined;
 constcallStack=buildFakeCallStack(
 response,
 stack,
@@ -3537,6 +3542,7 @@ function resolveErrorDev(
 null,
 message||
 'An error occurred in the Server Components render but no message was provided',
+errorOptions,
 ),
 );
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -707,6 +707,139 @@ describe('ReactFlight', () => {
 }
 });
 
+it('can transport Error.cause',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: ${errorinstanceofError}
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+functionComponentClient({error}){
+returnrenderError(error);
+}
+constComponent=clientReference(ComponentClient);
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+return<Componenterror={error}/>;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+
+if(__DEV__){
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
+it('includes Error.cause in thrown errors',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: true
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+throwerror;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+leterror;
+try{
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+}catch(x){
+error=x;
+}
+
+if(__DEV__){
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
 it('can transport cyclic objects',async()=>{
 functionComponentClient({prop}){
 expect(prop.obj.obj.obj).toBe(prop.obj.obj);

packages/react-server/src/ReactFlightServer.js

@@ -467,14 +467,6 @@ function getCurrentStackInDEV(): string {
 
 constObjectPrototype=Object.prototype;
 
-typeJSONValue=
-|string
-|boolean
-|number
-|null
-|{+[key: string]: JSONValue}
- | $ReadOnlyArray<JSONValue>;
-
 conststringify=JSON.stringify;
 
 typeReactJSONValue=
@@ -498,6 +490,7 @@ export type ReactClientValue =
  | React$Element<string>
  | React$Element<ClientReference<any>&any>
 |ReactComponentInfo
+|ReactErrorInfo
 |string
 |boolean
 |number
@@ -4171,6 +4164,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name,message,stack,env};
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineModel(request,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineModel(request,errorInfo);
 return'$Z'+id.toString(16);
 }else{
@@ -4181,7 +4179,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 }
 }
 
-function serializeDebugErrorValue(request: Request, error: Error): string {
+functionserializeDebugErrorValue(
+request: Request,
+counter: {objectLimit: number},
+error: Error,
+): string{
 if(__DEV__){
  let name: string='Error';
  let message: string;
@@ -4203,6 +4205,12 @@ function serializeDebugErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name, message, stack, env};
+if('cause'inerror){
+counter.objectLimit--;
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineDebugModel(request,counter,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineDebugModel(
 request,
 {objectLimit: stack.length*2+1},
@@ -4231,6 +4239,7 @@ function emitErrorChunk(
 letmessage: string;
 letstack: ReactStackTrace;
 letenv=(0,request.environmentName)();
+letcauseReference: null|string=null;
 try{
 if(errorinstanceofError){
 name=error.name;
@@ -4243,6 +4252,13 @@ function emitErrorChunk(
 // Keep the environment name.
 env=errorEnv;
 }
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=debug
+ ? outlineDebugModel(request,{objectLimit: 5},cause)
+ : outlineModel(request,cause);
+causeReference=serializeByValueID(causeId);
+}
 }elseif(typeoferror==='object'&&error!==null){
 message=describeObjectForErrorMessage(error);
 stack=[];
@@ -4258,6 +4274,9 @@ function emitErrorChunk(
 constownerRef=
 owner==null ? null : outlineComponentInfo(request,owner);
 errorInfo={digest, name, message, stack, env,owner: ownerRef};
+if(causeReference!==null){
+(errorInfo: ReactErrorInfoDev).cause=causeReference;
+}
 }else{
  errorInfo ={digest};
 }
@@ -4969,7 +4988,7 @@ function renderDebugModel(
 returnserializeDebugFormData(request,value);
 }
  if (value instanceof Error) {
-returnserializeDebugErrorValue(request,value);
+returnserializeDebugErrorValue(request,counter,value);
 }
  if (value instanceof ArrayBuffer) {
 returnserializeDebugTypedArray(request,'A',newUint8Array(value));

packages/shared/ReactTypes.js

@@ -228,13 +228,22 @@ export type ReactErrorInfoProd = {
 +digest: string,
 };
 
+export type JSONValue =
+ | string
+ | boolean
+ | number
+ | null
+ | {+[key: string]: JSONValue}
+ | $ReadOnlyArray<JSONValue>;
+
 export type ReactErrorInfoDev = {
 +digest?: string,
 +name: string,
 +message: string,
 +stack: ReactStackTrace,
 +env: string,
 +owner?: null|string,
+cause?: JSONValue,
 };
 
 export type ReactErrorInfo = ReactErrorInfoProd | ReactErrorInfoDev;

packages/react-client/src/ReactFlightClient.js

@@ -8,6 +8,7 @@
  */
 
 importtype{
+JSONValue,
 Thenable,
 ReactDebugInfo,
 ReactDebugInfoEntry,
@@ -132,14 +133,6 @@ interface FlightStreamController {
 
 typeUninitializedModel=string;
 
-exporttypeJSONValue=
-|number
-|null
-|boolean
-|string
-|{+[key: string]: JSONValue}
-|$ReadOnlyArray<JSONValue>;
-
 typeProfilingResult={
 track: number,
 endTime: number,
@@ -3527,6 +3520,18 @@ function resolveErrorDev(
 }
 
 leterror;
+consterrorOptions=
+'cause'inerrorInfo
+ ? {
+cause: reviveModel(
+response,
+// $FlowFixMe[incompatible-cast] -- Flow thinks `cause` in `cause?: JSONValue` can be undefined after `in` check.
+(errorInfo.cause: JSONValue),
+errorInfo,
+'cause',
+),
+}
+ : undefined;
 constcallStack=buildFakeCallStack(
 response,
 stack,
@@ -3537,6 +3542,7 @@ function resolveErrorDev(
 null,
 message||
 'An error occurred in the Server Components render but no message was provided',
+errorOptions,
 ),
 );
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -707,6 +707,139 @@ describe('ReactFlight', () => {
 }
 });
 
+it('can transport Error.cause',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: ${errorinstanceofError}
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+functionComponentClient({error}){
+returnrenderError(error);
+}
+constComponent=clientReference(ComponentClient);
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+return<Componenterror={error}/>;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+
+if(__DEV__){
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
+it('includes Error.cause in thrown errors',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: true
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+throwerror;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+leterror;
+try{
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+}catch(x){
+error=x;
+}
+
+if(__DEV__){
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
 it('can transport cyclic objects',async()=>{
 functionComponentClient({prop}){
 expect(prop.obj.obj.obj).toBe(prop.obj.obj);

packages/react-server/src/ReactFlightServer.js

@@ -467,14 +467,6 @@ function getCurrentStackInDEV(): string {
 
 constObjectPrototype=Object.prototype;
 
-typeJSONValue=
-|string
-|boolean
-|number
-|null
-|{+[key: string]: JSONValue}
- | $ReadOnlyArray<JSONValue>;
-
 conststringify=JSON.stringify;
 
 typeReactJSONValue=
@@ -498,6 +490,7 @@ export type ReactClientValue =
  | React$Element<string>
  | React$Element<ClientReference<any>&any>
 |ReactComponentInfo
+|ReactErrorInfo
 |string
 |boolean
 |number
@@ -4171,6 +4164,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name,message,stack,env};
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineModel(request,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineModel(request,errorInfo);
 return'$Z'+id.toString(16);
 }else{
@@ -4181,7 +4179,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 }
 }
 
-function serializeDebugErrorValue(request: Request, error: Error): string {
+functionserializeDebugErrorValue(
+request: Request,
+counter: {objectLimit: number},
+error: Error,
+): string{
 if(__DEV__){
  let name: string='Error';
  let message: string;
@@ -4203,6 +4205,12 @@ function serializeDebugErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name, message, stack, env};
+if('cause'inerror){
+counter.objectLimit--;
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineDebugModel(request,counter,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineDebugModel(
 request,
 {objectLimit: stack.length*2+1},
@@ -4231,6 +4239,7 @@ function emitErrorChunk(
 letmessage: string;
 letstack: ReactStackTrace;
 letenv=(0,request.environmentName)();
+letcauseReference: null|string=null;
 try{
 if(errorinstanceofError){
 name=error.name;
@@ -4243,6 +4252,13 @@ function emitErrorChunk(
 // Keep the environment name.
 env=errorEnv;
 }
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=debug
+ ? outlineDebugModel(request,{objectLimit: 5},cause)
+ : outlineModel(request,cause);
+causeReference=serializeByValueID(causeId);
+}
 }elseif(typeoferror==='object'&&error!==null){
 message=describeObjectForErrorMessage(error);
 stack=[];
@@ -4258,6 +4274,9 @@ function emitErrorChunk(
 constownerRef=
 owner==null ? null : outlineComponentInfo(request,owner);
 errorInfo={digest, name, message, stack, env,owner: ownerRef};
+if(causeReference!==null){
+(errorInfo: ReactErrorInfoDev).cause=causeReference;
+}
 }else{
  errorInfo ={digest};
 }
@@ -4969,7 +4988,7 @@ function renderDebugModel(
 returnserializeDebugFormData(request,value);
 }
  if (value instanceof Error) {
-returnserializeDebugErrorValue(request,value);
+returnserializeDebugErrorValue(request,counter,value);
 }
  if (value instanceof ArrayBuffer) {
 returnserializeDebugTypedArray(request,'A',newUint8Array(value));

packages/shared/ReactTypes.js

@@ -228,13 +228,22 @@ export type ReactErrorInfoProd = {
 +digest: string,
 };
 
+export type JSONValue =
+ | string
+ | boolean
+ | number
+ | null
+ | {+[key: string]: JSONValue}
+ | $ReadOnlyArray<JSONValue>;
+
 export type ReactErrorInfoDev = {
 +digest?: string,
 +name: string,
 +message: string,
 +stack: ReactStackTrace,
 +env: string,
 +owner?: null|string,
+cause?: JSONValue,
 };
 
 export type ReactErrorInfo = ReactErrorInfoProd | ReactErrorInfoDev;

packages/react-client/src/ReactFlightClient.js

@@ -8,6 +8,7 @@
  */
 
 importtype{
+JSONValue,
 Thenable,
 ReactDebugInfo,
 ReactDebugInfoEntry,
@@ -132,14 +133,6 @@ interface FlightStreamController {
 
 typeUninitializedModel=string;
 
-exporttypeJSONValue=
-|number
-|null
-|boolean
-|string
-|{+[key: string]: JSONValue}
-|$ReadOnlyArray<JSONValue>;
-
 typeProfilingResult={
 track: number,
 endTime: number,
@@ -3527,6 +3520,18 @@ function resolveErrorDev(
 }
 
 leterror;
+consterrorOptions=
+'cause'inerrorInfo
+ ? {
+cause: reviveModel(
+response,
+// $FlowFixMe[incompatible-cast] -- Flow thinks `cause` in `cause?: JSONValue` can be undefined after `in` check.
+(errorInfo.cause: JSONValue),
+errorInfo,
+'cause',
+),
+}
+ : undefined;
 constcallStack=buildFakeCallStack(
 response,
 stack,
@@ -3537,6 +3542,7 @@ function resolveErrorDev(
 null,
 message||
 'An error occurred in the Server Components render but no message was provided',
+errorOptions,
 ),
 );
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -707,6 +707,139 @@ describe('ReactFlight', () => {
 }
 });
 
+it('can transport Error.cause',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: ${errorinstanceofError}
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+functionComponentClient({error}){
+returnrenderError(error);
+}
+constComponent=clientReference(ComponentClient);
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+return<Componenterror={error}/>;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+
+if(__DEV__){
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
+it('includes Error.cause in thrown errors',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: true
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+throwerror;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+leterror;
+try{
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+}catch(x){
+error=x;
+}
+
+if(__DEV__){
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
 it('can transport cyclic objects',async()=>{
 functionComponentClient({prop}){
 expect(prop.obj.obj.obj).toBe(prop.obj.obj);

packages/react-server/src/ReactFlightServer.js

@@ -467,14 +467,6 @@ function getCurrentStackInDEV(): string {
 
 constObjectPrototype=Object.prototype;
 
-typeJSONValue=
-|string
-|boolean
-|number
-|null
-|{+[key: string]: JSONValue}
- | $ReadOnlyArray<JSONValue>;
-
 conststringify=JSON.stringify;
 
 typeReactJSONValue=
@@ -498,6 +490,7 @@ export type ReactClientValue =
  | React$Element<string>
  | React$Element<ClientReference<any>&any>
 |ReactComponentInfo
+|ReactErrorInfo
 |string
 |boolean
 |number
@@ -4171,6 +4164,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name,message,stack,env};
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineModel(request,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineModel(request,errorInfo);
 return'$Z'+id.toString(16);
 }else{
@@ -4181,7 +4179,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 }
 }
 
-function serializeDebugErrorValue(request: Request, error: Error): string {
+functionserializeDebugErrorValue(
+request: Request,
+counter: {objectLimit: number},
+error: Error,
+): string{
 if(__DEV__){
  let name: string='Error';
  let message: string;
@@ -4203,6 +4205,12 @@ function serializeDebugErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name, message, stack, env};
+if('cause'inerror){
+counter.objectLimit--;
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineDebugModel(request,counter,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineDebugModel(
 request,
 {objectLimit: stack.length*2+1},
@@ -4231,6 +4239,7 @@ function emitErrorChunk(
 letmessage: string;
 letstack: ReactStackTrace;
 letenv=(0,request.environmentName)();
+letcauseReference: null|string=null;
 try{
 if(errorinstanceofError){
 name=error.name;
@@ -4243,6 +4252,13 @@ function emitErrorChunk(
 // Keep the environment name.
 env=errorEnv;
 }
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=debug
+ ? outlineDebugModel(request,{objectLimit: 5},cause)
+ : outlineModel(request,cause);
+causeReference=serializeByValueID(causeId);
+}
 }elseif(typeoferror==='object'&&error!==null){
 message=describeObjectForErrorMessage(error);
 stack=[];
@@ -4258,6 +4274,9 @@ function emitErrorChunk(
 constownerRef=
 owner==null ? null : outlineComponentInfo(request,owner);
 errorInfo={digest, name, message, stack, env,owner: ownerRef};
+if(causeReference!==null){
+(errorInfo: ReactErrorInfoDev).cause=causeReference;
+}
 }else{
  errorInfo ={digest};
 }
@@ -4969,7 +4988,7 @@ function renderDebugModel(
 returnserializeDebugFormData(request,value);
 }
  if (value instanceof Error) {
-returnserializeDebugErrorValue(request,value);
+returnserializeDebugErrorValue(request,counter,value);
 }
  if (value instanceof ArrayBuffer) {
 returnserializeDebugTypedArray(request,'A',newUint8Array(value));

packages/shared/ReactTypes.js

@@ -228,13 +228,22 @@ export type ReactErrorInfoProd = {
 +digest: string,
 };
 
+export type JSONValue =
+ | string
+ | boolean
+ | number
+ | null
+ | {+[key: string]: JSONValue}
+ | $ReadOnlyArray<JSONValue>;
+
 export type ReactErrorInfoDev = {
 +digest?: string,
 +name: string,
 +message: string,
 +stack: ReactStackTrace,
 +env: string,
 +owner?: null|string,
+cause?: JSONValue,
 };
 
 export type ReactErrorInfo = ReactErrorInfoProd | ReactErrorInfoDev;

packages/react-client/src/ReactFlightClient.js

@@ -8,6 +8,7 @@
  */
 
 importtype{
+JSONValue,
 Thenable,
 ReactDebugInfo,
 ReactDebugInfoEntry,
@@ -132,14 +133,6 @@ interface FlightStreamController {
 
 typeUninitializedModel=string;
 
-exporttypeJSONValue=
-|number
-|null
-|boolean
-|string
-|{+[key: string]: JSONValue}
-|$ReadOnlyArray<JSONValue>;
-
 typeProfilingResult={
 track: number,
 endTime: number,
@@ -3527,6 +3520,18 @@ function resolveErrorDev(
 }
 
 leterror;
+consterrorOptions=
+'cause'inerrorInfo
+ ? {
+cause: reviveModel(
+response,
+// $FlowFixMe[incompatible-cast] -- Flow thinks `cause` in `cause?: JSONValue` can be undefined after `in` check.
+(errorInfo.cause: JSONValue),
+errorInfo,
+'cause',
+),
+}
+ : undefined;
 constcallStack=buildFakeCallStack(
 response,
 stack,
@@ -3537,6 +3542,7 @@ function resolveErrorDev(
 null,
 message||
 'An error occurred in the Server Components render but no message was provided',
+errorOptions,
 ),
 );
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -707,6 +707,139 @@ describe('ReactFlight', () => {
 }
 });
 
+it('can transport Error.cause',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: ${errorinstanceofError}
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+functionComponentClient({error}){
+returnrenderError(error);
+}
+constComponent=clientReference(ComponentClient);
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+return<Componenterror={error}/>;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+
+if(__DEV__){
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
+it('includes Error.cause in thrown errors',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: true
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+throwerror;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+leterror;
+try{
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+}catch(x){
+error=x;
+}
+
+if(__DEV__){
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
 it('can transport cyclic objects',async()=>{
 functionComponentClient({prop}){
 expect(prop.obj.obj.obj).toBe(prop.obj.obj);

packages/react-server/src/ReactFlightServer.js

@@ -467,14 +467,6 @@ function getCurrentStackInDEV(): string {
 
 constObjectPrototype=Object.prototype;
 
-typeJSONValue=
-|string
-|boolean
-|number
-|null
-|{+[key: string]: JSONValue}
- | $ReadOnlyArray<JSONValue>;
-
 conststringify=JSON.stringify;
 
 typeReactJSONValue=
@@ -498,6 +490,7 @@ export type ReactClientValue =
  | React$Element<string>
  | React$Element<ClientReference<any>&any>
 |ReactComponentInfo
+|ReactErrorInfo
 |string
 |boolean
 |number
@@ -4171,6 +4164,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name,message,stack,env};
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineModel(request,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineModel(request,errorInfo);
 return'$Z'+id.toString(16);
 }else{
@@ -4181,7 +4179,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 }
 }
 
-function serializeDebugErrorValue(request: Request, error: Error): string {
+functionserializeDebugErrorValue(
+request: Request,
+counter: {objectLimit: number},
+error: Error,
+): string{
 if(__DEV__){
  let name: string='Error';
  let message: string;
@@ -4203,6 +4205,12 @@ function serializeDebugErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name, message, stack, env};
+if('cause'inerror){
+counter.objectLimit--;
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineDebugModel(request,counter,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineDebugModel(
 request,
 {objectLimit: stack.length*2+1},
@@ -4231,6 +4239,7 @@ function emitErrorChunk(
 letmessage: string;
 letstack: ReactStackTrace;
 letenv=(0,request.environmentName)();
+letcauseReference: null|string=null;
 try{
 if(errorinstanceofError){
 name=error.name;
@@ -4243,6 +4252,13 @@ function emitErrorChunk(
 // Keep the environment name.
 env=errorEnv;
 }
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=debug
+ ? outlineDebugModel(request,{objectLimit: 5},cause)
+ : outlineModel(request,cause);
+causeReference=serializeByValueID(causeId);
+}
 }elseif(typeoferror==='object'&&error!==null){
 message=describeObjectForErrorMessage(error);
 stack=[];
@@ -4258,6 +4274,9 @@ function emitErrorChunk(
 constownerRef=
 owner==null ? null : outlineComponentInfo(request,owner);
 errorInfo={digest, name, message, stack, env,owner: ownerRef};
+if(causeReference!==null){
+(errorInfo: ReactErrorInfoDev).cause=causeReference;
+}
 }else{
  errorInfo ={digest};
 }
@@ -4969,7 +4988,7 @@ function renderDebugModel(
 returnserializeDebugFormData(request,value);
 }
  if (value instanceof Error) {
-returnserializeDebugErrorValue(request,value);
+returnserializeDebugErrorValue(request,counter,value);
 }
  if (value instanceof ArrayBuffer) {
 returnserializeDebugTypedArray(request,'A',newUint8Array(value));

packages/shared/ReactTypes.js

@@ -228,13 +228,22 @@ export type ReactErrorInfoProd = {
 +digest: string,
 };
 
+export type JSONValue =
+ | string
+ | boolean
+ | number
+ | null
+ | {+[key: string]: JSONValue}
+ | $ReadOnlyArray<JSONValue>;
+
 export type ReactErrorInfoDev = {
 +digest?: string,
 +name: string,
 +message: string,
 +stack: ReactStackTrace,
 +env: string,
 +owner?: null|string,
+cause?: JSONValue,
 };
 
 export type ReactErrorInfo = ReactErrorInfoProd | ReactErrorInfoDev;

packages/react-client/src/ReactFlightClient.js

@@ -8,6 +8,7 @@
  */
 
 importtype{
+JSONValue,
 Thenable,
 ReactDebugInfo,
 ReactDebugInfoEntry,
@@ -132,14 +133,6 @@ interface FlightStreamController {
 
 typeUninitializedModel=string;
 
-exporttypeJSONValue=
-|number
-|null
-|boolean
-|string
-|{+[key: string]: JSONValue}
-|$ReadOnlyArray<JSONValue>;
-
 typeProfilingResult={
 track: number,
 endTime: number,
@@ -3527,6 +3520,18 @@ function resolveErrorDev(
 }
 
 leterror;
+consterrorOptions=
+'cause'inerrorInfo
+ ? {
+cause: reviveModel(
+response,
+// $FlowFixMe[incompatible-cast] -- Flow thinks `cause` in `cause?: JSONValue` can be undefined after `in` check.
+(errorInfo.cause: JSONValue),
+errorInfo,
+'cause',
+),
+}
+ : undefined;
 constcallStack=buildFakeCallStack(
 response,
 stack,
@@ -3537,6 +3542,7 @@ function resolveErrorDev(
 null,
 message||
 'An error occurred in the Server Components render but no message was provided',
+errorOptions,
 ),
 );
 

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -707,6 +707,139 @@ describe('ReactFlight', () => {
 }
 });
 
+it('can transport Error.cause',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: ${errorinstanceofError}
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+functionComponentClient({error}){
+returnrenderError(error);
+}
+constComponent=clientReference(ComponentClient);
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+return<Componenterror={error}/>;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+
+if(__DEV__){
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(ReactNoop).toMatchRenderedOutput(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
+it('includes Error.cause in thrown errors',async()=>{
+functionrenderError(error){
+if(!(errorinstanceofError)){
+return`${JSON.stringify(error)}`;
+}
+return`
+ is error: true
+ name: ${error.name}
+ message: ${error.message}
+ stack: ${normalizeCodeLocInfo(error.stack).split('\n').slice(0,2).join('\n')}
+ environmentName: ${error.environmentName}
+ cause: ${'cause'inerror ? renderError(error.cause) : 'no cause'}`;
+}
+
+functionServerComponent(){
+constcause=newTypeError('root cause',{
+cause: {type: 'object cause'},
+});
+consterror=newError('hello',{cause});
+throwerror;
+}
+
+consttransport=ReactNoopFlightServer.render(<ServerComponent/>,{
+onError(x){
+if(__DEV__){
+return'a dev digest';
+}
+return`digest("${x.message}")`;
+},
+});
+
+leterror;
+try{
+awaitact(()=>{
+ReactNoop.render(ReactNoopFlightClient.read(transport));
+});
+}catch(x){
+error=x;
+}
+
+if(__DEV__){
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: hello
+ stack: Error: hello
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: 
+ is error: true
+ name: TypeError
+ message: root cause
+ stack: TypeError: root cause
+ in ServerComponent (at **)
+ environmentName: Server
+ cause: {"type":"object cause"}`);
+}else{
+expect(renderError(error)).toEqual(`
+ is error: true
+ name: Error
+ message: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ stack: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
+ environmentName: undefined
+ cause: no cause`);
+}
+});
+
 it('can transport cyclic objects',async()=>{
 functionComponentClient({prop}){
 expect(prop.obj.obj.obj).toBe(prop.obj.obj);

packages/react-server/src/ReactFlightServer.js

@@ -467,14 +467,6 @@ function getCurrentStackInDEV(): string {
 
 constObjectPrototype=Object.prototype;
 
-typeJSONValue=
-|string
-|boolean
-|number
-|null
-|{+[key: string]: JSONValue}
- | $ReadOnlyArray<JSONValue>;
-
 conststringify=JSON.stringify;
 
 typeReactJSONValue=
@@ -498,6 +490,7 @@ export type ReactClientValue =
  | React$Element<string>
  | React$Element<ClientReference<any>&any>
 |ReactComponentInfo
+|ReactErrorInfo
 |string
 |boolean
 |number
@@ -4171,6 +4164,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name,message,stack,env};
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineModel(request,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineModel(request,errorInfo);
 return'$Z'+id.toString(16);
 }else{
@@ -4181,7 +4179,11 @@ function serializeErrorValue(request: Request, error: Error): string {
 }
 }
 
-function serializeDebugErrorValue(request: Request, error: Error): string {
+functionserializeDebugErrorValue(
+request: Request,
+counter: {objectLimit: number},
+error: Error,
+): string{
 if(__DEV__){
  let name: string='Error';
  let message: string;
@@ -4203,6 +4205,12 @@ function serializeDebugErrorValue(request: Request, error: Error): string {
 stack=[];
 }
 consterrorInfo: ReactErrorInfoDev={name, message, stack, env};
+if('cause'inerror){
+counter.objectLimit--;
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=outlineDebugModel(request,counter,cause);
+errorInfo.cause=serializeByValueID(causeId);
+}
 constid=outlineDebugModel(
 request,
 {objectLimit: stack.length*2+1},
@@ -4231,6 +4239,7 @@ function emitErrorChunk(
 letmessage: string;
 letstack: ReactStackTrace;
 letenv=(0,request.environmentName)();
+letcauseReference: null|string=null;
 try{
 if(errorinstanceofError){
 name=error.name;
@@ -4243,6 +4252,13 @@ function emitErrorChunk(
 // Keep the environment name.
 env=errorEnv;
 }
+if('cause'inerror){
+constcause: ReactClientValue=(error.cause: any);
+constcauseId=debug
+ ? outlineDebugModel(request,{objectLimit: 5},cause)
+ : outlineModel(request,cause);
+causeReference=serializeByValueID(causeId);
+}
 }elseif(typeoferror==='object'&&error!==null){
 message=describeObjectForErrorMessage(error);
 stack=[];
@@ -4258,6 +4274,9 @@ function emitErrorChunk(
 constownerRef=
 owner==null ? null : outlineComponentInfo(request,owner);
 errorInfo={digest, name, message, stack, env,owner: ownerRef};
+if(causeReference!==null){
+(errorInfo: ReactErrorInfoDev).cause=causeReference;
+}
 }else{
  errorInfo ={digest};
 }
@@ -4969,7 +4988,7 @@ function renderDebugModel(
 returnserializeDebugFormData(request,value);
 }
  if (value instanceof Error) {
-returnserializeDebugErrorValue(request,value);
+returnserializeDebugErrorValue(request,counter,value);
 }
  if (value instanceof ArrayBuffer) {
 returnserializeDebugTypedArray(request,'A',newUint8Array(value));

packages/shared/ReactTypes.js

@@ -228,13 +228,22 @@ export type ReactErrorInfoProd = {
 +digest: string,
 };
 
+export type JSONValue =
+ | string
+ | boolean
+ | number
+ | null
+ | {+[key: string]: JSONValue}
+ | $ReadOnlyArray<JSONValue>;
+
 export type ReactErrorInfoDev = {
 +digest?: string,
 +name: string,
 +message: string,
 +stack: ReactStackTrace,
 +env: string,
 +owner?: null|string,
+cause?: JSONValue,
 };
 
 export type ReactErrorInfo = ReactErrorInfoProd | ReactErrorInfoDev;