Merge pull request Expensify#88172 from Expensify/Rory-ImproveReactCompilerErrorFormatting

[No QA] Improve error formatting in React Compiler check script

Author: roryabraham

.github/actions/javascript/getPullRequestIncrementalChanges/index.js

@@ -12869,7 +12869,7 @@ exports["default"] = Git;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.bold = exports.formatLink = exports.success = exports.error = exports.note = exports.warn = exports.info = exports.log = void 0;
+exports.bold = exports.formatLink = exports.success = exports.errorDetail = exports.error = exports.note = exports.warn = exports.info = exports.log = void 0;
 const COLOR_DIM = '\x1b[2m';
 const COLOR_RESET = '\x1b[0m';
 const COLOR_YELLOW = '\x1b[33m';
@@ -12918,6 +12918,11 @@ const error = (...args) => {
     log(...lines);
 };
 exports.error = error;
+const errorDetail = (...args) => {
+    const lines = [`   ${COLOR_RED}↳`, ...args, COLOR_RESET];
+    log(...lines);
+};
+exports.errorDetail = errorDetail;
 const formatLink = (name, url) => `\x1b]8;;${url}\x1b\\${name}\x1b]8;;\x1b\\`;
 exports.formatLink = formatLink;
 

scripts/react-compiler-compliance-check.ts

@@ -15,7 +15,7 @@ import path from 'path';
 import CLI from './utils/CLI';
 import FileUtils from './utils/FileUtils';
 import Git from './utils/Git';
-import {log, error as logError, info as logInfo, success as logSuccess, warn as logWarn} from './utils/Logger';
+import {log, error as logError, errorDetail as logErrorDetail, info as logInfo, success as logSuccess, warn as logWarn} from './utils/Logger';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-assignment
 const ReactCompilerConfig = require('../config/babel/reactCompilerConfig');
@@ -131,7 +131,7 @@ function printErrors(filename: string, errors: CompilerError[]): void {
     }
     for (const error of errors) {
         const location = formatErrorLocation(filename, error);
-        logError(`    ${location}: ${error.reason}`);
+        logErrorDetail(`${location}: ${error.reason}`);
     }
     if (IS_CI) {
         console.log('::endgroup::');
@@ -157,10 +157,10 @@ function checkFiles(inputs: string[], verbose: boolean): boolean {
 
         switch (result.status) {
             case 'compiled':
-                logSuccess(`COMPILED ${file}`);
+                logSuccess(`COMPILED  ${file}`);
                 break;
             case 'failed':
-                logError(`FAILED   ${file}`);
+                logError(`FAILED  ${file}`);
                 printErrors(file, result.errors);
                 hasFailure = true;
                 break;
@@ -230,7 +230,7 @@ async function checkChangedFiles(remote: string, verbose: boolean): Promise<bool
 
             if (mainStatus === 'compiled') {
                 failures.push({file: filename, reason: 'File compiled on main but fails to compile on this branch (regression)', errors: result.errors});
-                logError(`FAILED   ${filename} (regression: compiled on main)`);
+                logError(`FAILED  ${filename} (regression: compiled on main)`);
                 printErrors(filename, result.errors);
             } else if (verbose) {
                 logWarn(`WARNING  ${filename} (fails to compile, but also failed on main)`);

scripts/utils/Logger.ts

@@ -49,6 +49,11 @@ const error = (...args: unknown[]) => {
     log(...lines);
 };
 
+const errorDetail = (...args: unknown[]) => {
+    const lines = [`   ${COLOR_RED}↳`, ...args, COLOR_RESET];
+    log(...lines);
+};
+
 const formatLink = (name: string | number, url: string) => `\x1b]8;;${url}\x1b\\${name}\x1b]8;;\x1b\\`;
 
-export {log, info, warn, note, error, success, formatLink, bold};
+export {log, info, warn, note, error, errorDetail, success, formatLink, bold};