chore(gatsby-cli): Categorize errors (#27449)

* chore(gatsby-cli): Categorize errors

* edit message

Co-authored-by: Ward Peeters <ward@coding-tech.com>

Author: julienp

packages/gatsby-cli/src/reporter/__tests__/__snapshots__/index.ts.snap

@@ -53,6 +53,7 @@ Object {
 
 exports[`report.error handles "structuredError" signature correctly 1`] = `
 Object {
+  "category": "USER",
   "code": "95312",
   "context": Object {
     "ref": "navigator",

packages/gatsby-cli/src/reporter/redux/internal-actions.ts

@@ -112,7 +112,7 @@ export const createLog = ({
   group?: string
   code?: string
   type?: string
-  category?: ErrorCategory
+  category?: keyof typeof ErrorCategory
   filePath?: string
   location?: IStructuredError["location"]
   docsUrl?: string

packages/gatsby-cli/src/reporter/redux/types.ts

@@ -43,7 +43,7 @@ interface ILog {
   group: string | undefined
   code: string | undefined
   type: string | undefined
-  category?: ErrorCategory
+  category?: keyof typeof ErrorCategory
   filePath: string | undefined
   location: IStructuredError["location"] | undefined
   docsUrl: string | undefined

packages/gatsby-cli/src/structured-errors/error-map.ts

@@ -29,6 +29,7 @@ const errors = {
       `"${context.ref}" is not available during server side rendering.`,
     level: Level.ERROR,
     docsUrl: `https://gatsby.dev/debug-html`,
+    category: ErrorCategory.USER,
   },
   "95313": {
     text: (context): string =>
@@ -51,6 +52,7 @@ const errors = {
       `${context.stageLabel} failed\n\n${context.sourceMessage}\n\nIf you're trying to use a package make sure that '${context.packageName}' is installed. If you're trying to use a local file make sure that the path is correct.`,
     type: Type.WEBPACK,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85901": {
     text: (context): string =>
@@ -78,6 +80,7 @@ const errors = {
     },
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   // Deprecated
   "85909": {
@@ -105,6 +108,7 @@ const errors = {
     type: Type.GRAPHQL,
     level: Level.ERROR,
     docsUrl: `https://www.gatsbyjs.org/docs/graphql/`,
+    category: ErrorCategory.USER,
   },
   "85911": {
     text: (context): string =>
@@ -117,6 +121,7 @@ const errors = {
       `),
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85912": {
     text: (context): string =>
@@ -148,6 +153,7 @@ const errors = {
       `String interpolation is not allowed in graphql tag:\n\n${context.codeFrame}`,
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85917": {
     text: (context): string =>
@@ -165,6 +171,7 @@ const errors = {
       }`),
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   // Duplicate fragment
   "85919": {
@@ -180,6 +187,7 @@ const errors = {
     `),
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   // Undefined variables in Queries
   "85920": {
@@ -206,24 +214,37 @@ const errors = {
     },
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85921": {
     text: (context): string =>
       `There was an error in your GraphQL query:\n\n${context.sourceMessage}\n\nIf you're e.g. filtering for specific nodes make sure that you choose the correct field (that has the same type "${context.inputType}") or adjust the context variable to the type "${context.expectedType}".`,
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85922": {
     text: (context): string =>
-      `There was an error in your GraphQL query:\n\n${context.sourceMessage}\n\nThis can happen if you e.g. accidentally added { } to the field "${context.fieldName}". If you didn't expect "${context.fieldName}" to be of type "${context.fieldType}" make sure that your input source and/or plugin is correct.`,
+      `There was an error in your GraphQL query:
+
+      ${context.sourceMessage}
+
+      This can happen if you e.g. accidentally added { } to the field "${context.fieldName}". If you didn't expect "${context.fieldName}" to be of type "${context.fieldType}" make sure that your input source and/or plugin is correct.
+      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have.
+
+      It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned
+      "dummy content". Visit our docs to learn how you can define the schema for "${context.type}":
+      https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions`,
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85923": {
     text: (context): string =>
       `There was an error in your GraphQL query:\n\n${context.sourceMessage}\n\nIf you don't expect "${context.field}" to exist on the type "${context.type}" it is most likely a typo.\nHowever, if you expect "${context.field}" to exist there are a couple of solutions to common problems:\n\n- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server\n- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have\n- You want to optionally use your field "${context.field}" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")\n\nIt is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "${context.type}":\nhttps://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions`,
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85924": {
     text: (context): string =>
@@ -236,6 +257,7 @@ const errors = {
       }".${optionalGraphQLInfo(context)}`,
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85925": {
     text: (context): string =>
@@ -248,43 +270,50 @@ const errors = {
       )}`,
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85926": {
     text: (context): string =>
       `There was an error in your GraphQL query:\n\n${context.sourceMessage}\n\nThis can happen when you used graphql\`{ ...yourQuery }\` instead of graphql(\`{ ...yourQuery }\`) inside gatsby-node.js\n\nYou can't use the template literal function you're used to (from page queries) and rather have to call graphql() as a normal function.`,
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "85927": {
     text: (context): string =>
       `There was an error in your GraphQL query:\n\n${context.sourceMessage}\n\nSee if ${context.variable} has a typo or ${context.operation} doesn't actually require this variable.`,
     type: Type.GRAPHQL,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   // Config errors
   "10122": {
     text: (context): string =>
       `The site's gatsby-config.js failed validation:\n\n${context.sourceMessage}`,
     type: Type.CONFIG,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "10123": {
     text: (context): string =>
       `We encountered an error while trying to load your site's ${context.configName}. Please fix the error and try again.`,
     type: Type.CONFIG,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "10124": {
     text: (context): string =>
       `It looks like you were trying to add the config file? Please rename "${context.nearMatch}" to "${context.configName}.js"`,
     type: Type.CONFIG,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "10125": {
     text: (context): string =>
       `Your ${context.configName} file is in the wrong place. You've placed it in the src/ directory. It must instead be at the root of your site next to your package.json file.`,
     type: Type.CONFIG,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "10126": {
     text: (context): string =>
@@ -295,6 +324,7 @@ const errors = {
       `\nare not supported in the root gatsby-config.`,
     type: Type.CONFIG,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "10226": {
     text: (context): string =>
@@ -332,6 +362,7 @@ const errors = {
         4
       )}\n\nSee the documentation for the "createPage" action — https://www.gatsbyjs.org/docs/actions/#createPage`,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "11323": {
     text: (context): string =>
@@ -343,6 +374,7 @@ const errors = {
         4
       )}\n\nSee the documentation for the "createPage" action — https://www.gatsbyjs.org/docs/actions/#createPage`,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "11324": {
     text: (context): string =>
@@ -361,6 +393,7 @@ const errors = {
         4
       )}\n\nSee the documentation for the "createPage" action — https://www.gatsbyjs.org/docs/actions/#createPage`,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "11326": {
     text: (context): string =>
@@ -376,16 +409,19 @@ const errors = {
         4
       )}\n\nSee the documentation for the "createPage" action — https://www.gatsbyjs.org/docs/actions/#createPage`,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "11327": {
     text: (context): string =>
       `You have an empty file in the "src/pages" directory at "${context.relativePath}". Please remove it or make it a valid component`,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   "11328": {
     text: (context): string =>
       `A page component must export a React component for it to be valid. Please make sure this file exports a React component:\n\n${context.fileName}`,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   // invalid or deprecated APIs
   "11329": {
@@ -425,6 +461,7 @@ const errors = {
       } here: https://www.gatsbyjs.org/docs/node-apis/#${context.api}`,
     type: Type.PLUGIN,
     level: Level.ERROR,
+    category: ErrorCategory.USER,
   },
   // Invalid plugin options
   "11331": {
@@ -464,6 +501,7 @@ const errors = {
       `for custom ssl --https, --cert-file, and --key-file must be used together`,
     level: Level.ERROR,
     docsUrl: `https://www.gatsbyjs.org/docs/local-https/#custom-key-and-certificate-files`,
+    category: ErrorCategory.USER,
   },
   "11522": {
     text: (): string => `Failed to generate dev SSL certificate`,
@@ -476,18 +514,21 @@ const errors = {
       `It looks like you gave wrong argument orders . Try running instead "gatsby new ${context.starter} ${context.rootPath}"`,
     level: Level.ERROR,
     docsUrl: `https://www.gatsbyjs.org/docs/gatsby-cli/#new`,
+    category: ErrorCategory.USER,
   },
   "11611": {
     text: (context): string =>
       `It looks like you passed a URL to your project name. Try running instead "gatsby new new-gatsby-project ${context.rootPath}"`,
     level: Level.ERROR,
     docsUrl: `https://www.gatsbyjs.org/docs/gatsby-cli/#new`,
+    category: ErrorCategory.USER,
   },
   "11612": {
     text: (context): string =>
       `Could not create a project in "${context.path}" because it's not a valid path`,
     level: Level.ERROR,
     docsUrl: `https://www.gatsbyjs.org/docs/gatsby-cli/#new`,
+    category: ErrorCategory.USER,
   },
   "11613": {
     text: (context): string =>
@@ -508,6 +549,6 @@ export interface IErrorMapEntry {
   // keyof typeof is used for these enums so that the public facing API (e.g. used by setErrorMap) doesn't rely on enum but gives an union
   level: keyof typeof Level
   type?: keyof typeof Type
-  category?: ErrorCategory
+  category?: keyof typeof ErrorCategory
   docsUrl?: string
 }

packages/gatsby-cli/src/structured-errors/types.ts

@@ -30,7 +30,7 @@ export interface IStructuredError {
     start: ILocationPosition
     end?: ILocationPosition
   }
-  category?: ErrorCategory
+  category?: keyof typeof ErrorCategory
   error?: Error
   group?: string
   level: IErrorMapEntry["level"]