Merge pull request #5935 from serialoverflow/fix/cli_error_formatting

Fix/cli error formatting

.changeset/sour-brooms-dream.md

@@ -0,0 +1,9 @@
+---
+'@backstage/cli': patch
+---
+
+Fix error message formatting in the packaging process.
+
+error.errors can be undefined which will lead to a TypeError, swallowing the actual error message in the process.
+
+For instance, if you break your tsconfig.json with invalid syntax, backstage-cli will not be able to build anything and it will be very hard to find out why because the underlying error message is hidden behind a TypeError.

packages/cli/src/lib/builder/packager.test.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { formatErrorMessage } from './packager';
+
+describe('formatErrorMessage with esbuild plugin error', () => {
+  it('given error with missing errors array then error message should be shown', () => {
+    const msg = formatErrorMessage({
+      code: 'PLUGIN_ERROR',
+      plugin: 'esbuild',
+      message: 'test',
+    });
+    expect(msg).toBe('test');
+  });
+  it('given error with errors array then error message should have new lines', () => {
+    const msg = formatErrorMessage({
+      code: 'PLUGIN_ERROR',
+      plugin: 'esbuild',
+      message: 'test',
+      id: 'index.js',
+      errors: [{ text: 'Dummy', location: { line: 1, column: 1 } }],
+    });
+    expect(msg).toContain('test\n\n');
+  });
+});

packages/cli/src/lib/builder/packager.ts

@@ -22,21 +22,24 @@ import { paths } from '../paths';
 import { makeConfigs } from './config';
 import { BuildOptions } from './types';
 
-function formatErrorMessage(error: any) {
+export function formatErrorMessage(error: any) {
   let msg = '';
 
   if (error.code === 'PLUGIN_ERROR') {
     if (error.plugin === 'esbuild') {
-      msg += `${error.message}\n\n`;
-      for (const { text, location } of error.errors) {
-        const { line, column } = location;
-        const path = relativePath(paths.targetDir, error.id);
-        const loc = chalk.cyan(`${path}:${line}:${column}`);
+      msg += `${error.message}`;
+      if (error.errors?.length) {
+        msg += `\n\n`;
+        for (const { text, location } of error.errors) {
+          const { line, column } = location;
+          const path = relativePath(paths.targetDir, error.id);
+          const loc = chalk.cyan(`${path}:${line}:${column}`);
 
-        if (text === 'Unexpected "<"' && error.id.endsWith('.js')) {
-          msg += `${loc}: ${text}, JavaScript files with JSX should use a .jsx extension`;
-        } else {
-          msg += `${loc}: ${text}`;
+          if (text === 'Unexpected "<"' && error.id.endsWith('.js')) {
+            msg += `${loc}: ${text}, JavaScript files with JSX should use a .jsx extension`;
+          } else {
+            msg += `${loc}: ${text}`;
+          }
         }
       }
     } else {