CODEGEN-334 - Improve error logging (#10333)

Author: eddeee888

Diff for: .changeset/wicked-icons-mate.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/cli': patch
+---
+
+Improve syntax error messages whilst loading schema/document

Diff for: .prettierignore

@@ -30,3 +30,7 @@ website/src/components/live-demo/LiveDemo.tsx
 # This should be added bc our rust test setup for the SWC plugin does a string diff, and it fails
 # bc it compares imports with double quotes against the formatted perttier single quotes
 packages/presets/swc-plugin/tests/fixtures
+
+# Ignore intentional error files
+packages/graphql-codegen-cli/tests/test-files/schema-dir/error-schema.graphql
+packages/graphql-codegen-cli/tests/test-files/error-document.graphql

Diff for: packages/graphql-codegen-cli/src/codegen.ts

@@ -412,6 +412,8 @@ export async function executeCodegen(input: CodegenContext | Types.Config): Prom
       rendererOptions: {
         clearOutput: false,
         collapse: true,
+        formatOutput: 'wrap',
+        removeEmptyLines: false,
       },
       renderer: config.verbose ? 'verbose' : 'default',
       ctx: { errors: [] },

Diff for: packages/graphql-codegen-cli/src/load.ts

@@ -13,7 +13,7 @@ import {
 } from '@graphql-tools/load';
 import { PrismaLoader } from '@graphql-tools/prisma-loader';
 import { UrlLoader } from '@graphql-tools/url-loader';
-import { GraphQLSchema } from 'graphql';
+import { GraphQLError, GraphQLSchema } from 'graphql';
 
 export const defaultSchemaLoadOptions = {
   assumeValidSDL: true,
@@ -52,22 +52,17 @@ export async function loadSchema(
     return schema;
   } catch (e) {
     throw new Error(
-      `
-        Failed to load schema from ${Object.keys(schemaPointers).join(',')}:
-
-        ${e.message || e}
-        ${e.stack || ''}
-
-        GraphQL Code Generator supports:
-          - ES Modules and CommonJS exports (export as default or named export "schema")
-          - Introspection JSON File
-          - URL of GraphQL endpoint
-          - Multiple files with type definitions (glob expression)
-          - String in config file
-
-        Try to use one of above options and run codegen again.
-
-      `
+      [
+        `Failed to load schema from ${Object.keys(schemaPointers).join(',')}:`,
+        printError(e),
+        '\nGraphQL Code Generator supports:',
+        '\n- ES Modules and CommonJS exports (export as default or named export "schema")',
+        '- Introspection JSON File',
+        '- URL of GraphQL endpoint',
+        '- Multiple files with type definitions (glob expression)',
+        '- String in config file',
+        '\nTry to use one of above options and run codegen again.\n',
+      ].join('\n')
     );
   }
 }
@@ -107,6 +102,15 @@ export async function loadDocuments(
     return loadedFromToolkit;
   } catch (error) {
     if (config.ignoreNoDocuments) return [];
-    throw error;
+    throw new Error(
+      [`Failed to load documents from ${Object.keys(documentPointers).join(',')}:`, printError(error)].join('\n')
+    );
   }
 }
+
+const printError = (error: any) => {
+  if (error instanceof GraphQLError) {
+    return String(error);
+  }
+  return [String(error.message || error), String(error.stack)].join('\n');
+};

Diff for: packages/graphql-codegen-cli/tests/generate-and-save.spec.ts

@@ -254,4 +254,103 @@ describe('generate-and-save', () => {
     // makes sure it doesn't write a new file
     expect(writeSpy).toHaveBeenCalled();
   });
+
+  describe('Syntax errors when loading pointers', () => {
+    const originalConsole = { ...console };
+    const originalNodeEnv = process.env.NODE_ENV;
+
+    let consoleErrorMock;
+
+    beforeEach(() => {
+      // Mock common console functions to avoid noise in the terminal
+      global.console.log = jest.fn();
+      global.console.warn = jest.fn();
+      global.console.error = jest.fn();
+
+      // By default, the NODE_ENV is set to 'test', and this is used to silent console errors.
+      // For these tests below, we want to see what's being logged out to console errors.
+      process.env.NODE_ENV = 'not_test_so_error';
+
+      consoleErrorMock = jest.mocked(global.console.error);
+    });
+
+    afterEach(() => {
+      global.console = originalConsole;
+      process.env.NODE_ENV = originalNodeEnv;
+    });
+
+    test('Schema syntax error - should print native GraphQLError for', async () => {
+      try {
+        await generate(
+          {
+            verbose: true,
+            schema: './tests/test-files/schema-dir/error-schema.graphql',
+            generates: {
+              'src/test.ts': {
+                plugins: ['typescript'],
+              },
+            },
+          },
+          false
+        );
+      } catch {
+        expect(consoleErrorMock.mock.calls[0][0]).toBeSimilarStringTo(
+          '[FAILED] Failed to load schema from ./tests/test-files/schema-dir/error-schema.graphql:'
+        );
+        expect(consoleErrorMock.mock.calls[0][0]).toBeSimilarStringTo(
+          '[FAILED] Syntax Error: Expected Name, found "!".'
+        );
+        // We can only use partial file path to the error file, because the error contains absolute path on the host machine
+        expect(consoleErrorMock.mock.calls[0][0]).toBeSimilarStringTo(
+          '/tests/test-files/schema-dir/error-schema.graphql:2:15'
+        );
+        expect(consoleErrorMock.mock.calls[0][0]).toBeSimilarStringTo(`
+          [FAILED] 1 | type Query {
+          [FAILED] 2 |   foo: String!!
+          [FAILED]   |               ^
+          [FAILED] 3 | }
+          [FAILED]
+          [FAILED] GraphQL Code Generator supports:
+          [FAILED]
+          [FAILED] - ES Modules and CommonJS exports (export as default or named export "schema")
+          [FAILED] - Introspection JSON File
+          [FAILED] - URL of GraphQL endpoint
+          [FAILED] - Multiple files with type definitions (glob expression)
+          [FAILED] - String in config file
+          [FAILED]
+          [FAILED] Try to use one of above options and run codegen again.
+        `);
+      }
+    });
+
+    test('Document syntax error - should print native GraphQLError', async () => {
+      try {
+        await generate(
+          {
+            verbose: true,
+            schema: './tests/test-files/schema-dir/schema.ts',
+            documents: './tests/test-files/error-document.graphql',
+            generates: {
+              'src/test.ts': {
+                plugins: ['typescript'],
+              },
+            },
+          },
+          false
+        );
+      } catch {
+        expect(consoleErrorMock.mock.calls[0][0]).toBeSimilarStringTo(
+          'Failed to load documents from ./tests/test-files/error-document.graphql:'
+        );
+        expect(consoleErrorMock.mock.calls[0][0]).toBeSimilarStringTo('Syntax Error: Expected "{", found <EOF>.');
+        // We can only use partial file path to the error file, because the error contains absolute path on the host machine
+        expect(consoleErrorMock.mock.calls[0][0]).toBeSimilarStringTo('/tests/test-files/error-document.graphql:2:1');
+        expect(consoleErrorMock.mock.calls[0][0]).toBeSimilarStringTo(`
+          [FAILED] 1 | query
+          [FAILED] 2 |
+          [FAILED]   | ^
+        `);
+      }
+    });
+  });
 });

Diff for: packages/graphql-codegen-cli/tests/test-files/error-document.graphql

@@ -0,0 +1 @@
+query

Diff for: packages/graphql-codegen-cli/tests/test-files/schema-dir/error-schema.graphql

@@ -0,0 +1,3 @@
+type Query {
+  foo: String!!
+}