Add nested error formatting for all error types (#55376)

Summary:
Pull Request resolved: #55376

Reviewer, read `ErrorFormatting-test.snap.js` first, to see the impact of this change.

Previously, only `incompatibleTypes` errors showed hierarchical nesting with full path context. Other error types (addedEnumCases, removedUnionCases, addedProps, etc.) displayed flat messages that made it difficult to trace where in the type hierarchy an issue occurred.

This change enriches ComparisonResult types with an optional `errorLog` field that carries path context from TypeDiffing through VersionDiffing to ErrorFormatting. Now all error types display with the same recursive nesting format, making it easier for developers to understand exactly where compatibility issues occur in deeply nested structures.

Changelog: [Internal]

Reviewed By: makovkastar

Differential Revision: D91251882

fbshipit-source-id: 3d6f9676e68e5a8471f7870bbd02d35a257d4416

Author: elicwhite

packages/react-native-compatibility-check/src/ComparisonResult.js

@@ -135,12 +135,36 @@ export type NullableComparisonResult = {
 export type ComparisonResult =
   | {status: 'matching'}
   | {status: 'skipped'}
-  | {status: 'nullableChange', nullableLog: NullableComparisonResult}
-  | {status: 'properties', propertyLog: PropertiesComparisonResult}
-  | {status: 'members', memberLog: MembersComparisonResult}
-  | {status: 'unionMembers', memberLog: UnionMembersComparisonResult}
-  | {status: 'functionChange', functionChangeLog: FunctionComparisonResult}
-  | {status: 'positionalTypeChange', changeLog: PositionalComparisonResult}
+  | {
+      status: 'nullableChange',
+      nullableLog: NullableComparisonResult,
+      errorLog?: TypeComparisonError,
+    }
+  | {
+      status: 'properties',
+      propertyLog: PropertiesComparisonResult,
+      errorLog?: TypeComparisonError,
+    }
+  | {
+      status: 'members',
+      memberLog: MembersComparisonResult,
+      errorLog?: TypeComparisonError,
+    }
+  | {
+      status: 'unionMembers',
+      memberLog: UnionMembersComparisonResult,
+      errorLog?: TypeComparisonError,
+    }
+  | {
+      status: 'functionChange',
+      functionChangeLog: FunctionComparisonResult,
+      errorLog?: TypeComparisonError,
+    }
+  | {
+      status: 'positionalTypeChange',
+      changeLog: PositionalComparisonResult,
+      errorLog?: TypeComparisonError,
+    }
   | {status: 'error', errorLog: TypeComparisonError};
 
 export function isPropertyLogEmpty(

packages/react-native-compatibility-check/src/ErrorFormatting.js

@@ -32,6 +32,7 @@ export function formatErrorMessage(
 ): string {
   switch (error.type) {
     case 'PropertyComparisonError':
+      const propertyPreviousError = error.previousError;
       const formattedProperties = error.mismatchedProperties.map(
         individualPropertyError =>
           indentedLineStart(indent + 1) +
@@ -42,7 +43,14 @@ export function formatErrorMessage(
               formatErrorMessage(individualPropertyError.fault, indent + 2)
             : ''),
       );
-      return error.message + formattedProperties.join('');
+      return (
+        (propertyPreviousError != null
+          ? formatErrorMessage(propertyPreviousError, indent) +
+            indentedLineStart(indent + 1)
+          : '') +
+        error.message +
+        formattedProperties.join('')
+      );
     case 'PositionalComparisonError':
       const formattedPositionalChanges = error.erroneousItems.map(
         ([index, type]) =>
@@ -188,7 +196,13 @@ function formatTypeAnnotation(annotation: CompleteTypeAnnotation): string {
         ? `'${annotation.value}'`
         : annotation.value;
     case 'UnionTypeAnnotation':
-      const validUnionType = parseValidUnionType(annotation);
+      let validUnionType;
+      try {
+        validUnionType = parseValidUnionType(annotation);
+      } catch (_e: mixed) {
+        // parseValidUnionType throws for unsupported union types
+        return 'Union<mixed>';
+      }
       switch (validUnionType) {
         case 'boolean':
           if (

packages/react-native-compatibility-check/src/TypeDiffing.js

@@ -569,12 +569,22 @@ export function compareObjectTypes<T: CompleteTypeAnnotation>(
     return {
       status: 'properties',
       propertyLog: {missingProperties: sortedOlderTypes},
+      errorLog: typeAnnotationComparisonError(
+        'Object has property changes',
+        objectTypeAnnotation(newerPropertyTypes),
+        objectTypeAnnotation(olderPropertyTypes),
+      ),
     };
   }
   if (sortedOlderTypes.length === 0) {
     return {
       status: 'properties',
       propertyLog: {addedProperties: sortedNewerTypes},
+      errorLog: typeAnnotationComparisonError(
+        'Object has property changes',
+        objectTypeAnnotation(newerPropertyTypes),
+        objectTypeAnnotation(olderPropertyTypes),
+      ),
     };
   }
   const result = comparePropertyArrays(sortedNewerTypes, sortedOlderTypes);
@@ -602,14 +612,20 @@ export function compareObjectTypes<T: CompleteTypeAnnotation>(
     return makeError(
       typeAnnotationComparisonError(
         'Object types do not match.',
-        // $FlowFixMe[incompatible-type]
         objectTypeAnnotation(newerPropertyTypes),
-        // $FlowFixMe[incompatible-type]
         objectTypeAnnotation(olderPropertyTypes),
       ),
     );
   }
-  return {status: 'properties', propertyLog: result};
+  return {
+    status: 'properties',
+    propertyLog: result,
+    errorLog: typeAnnotationComparisonError(
+      'Object has property changes',
+      objectTypeAnnotation(newerPropertyTypes),
+      objectTypeAnnotation(olderPropertyTypes),
+    ),
+  };
 }
 
 function objectTypeAnnotation<T>(
@@ -856,7 +872,15 @@ export function compareEnumDeclarationWithMembers(
     );
   }
 
-  return {status: 'members', memberLog: result};
+  return {
+    status: 'members',
+    memberLog: result,
+    errorLog: typeAnnotationComparisonError(
+      'Enum has member changes',
+      newerDeclaration,
+      olderDeclaration,
+    ),
+  };
 }
 
 function compareNullableChange(
@@ -895,6 +919,11 @@ function compareNullableChange(
         newType: newerAnnotation,
         oldType: olderAnnotation,
       },
+      errorLog: typeAnnotationComparisonError(
+        'Nullable type has changes',
+        newerAnnotation,
+        olderAnnotation,
+      ),
     };
   }
   const interiorLog = compareTypeAnnotation(newVoidRemoved, oldVoidRemoved);
@@ -917,6 +946,11 @@ function compareNullableChange(
           newType: newerAnnotation,
           oldType: olderAnnotation,
         },
+        errorLog: typeAnnotationComparisonError(
+          'Nullable type has changes',
+          newerAnnotation,
+          olderAnnotation,
+        ),
       };
     default:
       return {
@@ -928,6 +962,12 @@ function compareNullableChange(
           newType: newerAnnotation,
           oldType: olderAnnotation,
         },
+        errorLog: typeAnnotationComparisonError(
+          'Nullable type has changes',
+          newerAnnotation,
+          olderAnnotation,
+          interiorLog.errorLog,
+        ),
       };
   }
 }
@@ -977,7 +1017,15 @@ export function compareUnionTypes(
     );
   }
 
-  return {status: 'unionMembers', memberLog: result};
+  return {
+    status: 'unionMembers',
+    memberLog: result,
+    errorLog: typeAnnotationComparisonError(
+      'Union has member changes',
+      newerType,
+      olderType,
+    ),
+  };
 }
 
 export function comparePromiseTypes(
@@ -1128,6 +1176,11 @@ export function compareStringLiteralUnionTypes(
       return {
         status: 'positionalTypeChange',
         changeLog,
+        errorLog: typeAnnotationComparisonError(
+          'String literal union has member changes',
+          newerType,
+          olderType,
+        ),
       };
     case 'matching':
       return {status: 'matching'};
@@ -1206,7 +1259,15 @@ export function compareFunctionTypes(
   if (isFunctionLogEmpty(functionChanges)) {
     return {status: 'matching'};
   }
-  return {status: 'functionChange', functionChangeLog: functionChanges};
+  return {
+    status: 'functionChange',
+    functionChangeLog: functionChanges,
+    errorLog: typeAnnotationComparisonError(
+      'Function has parameter or return type changes',
+      newerType,
+      olderType,
+    ),
+  };
 }
 
 type ArrayComparisonResult =