fix: display stack traces on graphql errors (#1193)

Author: Weakky

src/runtime/server/error-formatter.ts

@@ -0,0 +1,100 @@
+import { GraphQLError, Source, SourceLocation } from 'graphql'
+import stripAnsi from 'strip-ansi'
+import { log } from './logger'
+
+const resolverLogger = log.child('graphql')
+
+export function errorFormatter(graphQLError: GraphQLError) {
+  const colorlessMessage = stripAnsi(graphQLError.message)
+
+  if (process.env.NEXUS_STAGE === 'dev') {
+    resolverLogger.error(graphQLError.message)
+
+    if (graphQLError.source && graphQLError.locations) {
+      console.log(indent(printSourceLocation(graphQLError.source, graphQLError.locations[0]), 5))
+      if (graphQLError.stack) {
+        console.log(graphQLError.stack)
+      }
+    }
+  } else {
+    graphQLError.message = colorlessMessage
+    resolverLogger.error('An exception occurred in one of your resolver', {
+      error: {
+        ...graphQLError,
+        stack: graphQLError.stack
+      },
+    })
+  }
+
+  graphQLError.message = colorlessMessage
+
+  return graphQLError
+}
+
+/**
+ * Render a helpful description of the location in the GraphQL Source document.
+ * Modified version from graphql-js
+ */
+export function printSourceLocation(source: Source, sourceLocation: SourceLocation): string {
+  const firstLineColumnOffset = source.locationOffset.column - 1
+  const body = whitespace(firstLineColumnOffset) + source.body
+
+  const lineIndex = sourceLocation.line - 1
+  const lineOffset = source.locationOffset.line - 1
+  const lineNum = sourceLocation.line + lineOffset
+
+  const columnOffset = sourceLocation.line === 1 ? firstLineColumnOffset : 0
+  const columnNum = sourceLocation.column + columnOffset
+
+  const lines = body.split(/\r\n|[\n\r]/g)
+  const locationLine = lines[lineIndex]
+
+  // Special case for minified documents
+  if (locationLine.length > 120) {
+    const subLineIndex = Math.floor(columnNum / 80)
+    const subLineColumnNum = columnNum % 80
+    const subLines = []
+    for (let i = 0; i < locationLine.length; i += 80) {
+      subLines.push(locationLine.slice(i, i + 80))
+    }
+
+    return printPrefixedLines([
+      [`${lineNum}`, subLines[0]],
+      ...subLines.slice(1, subLineIndex + 1).map((subLine) => ['', subLine]),
+      [' ', whitespace(subLineColumnNum - 1) + '^'],
+      ['', subLines[subLineIndex + 1]],
+    ])
+  }
+
+  return printPrefixedLines([
+    // Lines specified like this: ["prefix", "string"],
+    [`${lineNum - 1}`, lines[lineIndex - 1]],
+    [`${lineNum}`, locationLine],
+    ['', whitespace(columnNum - 1) + '^'],
+    [`${lineNum + 1}`, lines[lineIndex + 1]],
+  ])
+}
+
+function printPrefixedLines(lines: Array<string[]>): string {
+  const existingLines = lines.filter(([_, line]) => line !== undefined)
+
+  const padLen = Math.max(...existingLines.map(([prefix]) => prefix.length))
+  return existingLines
+    .map(([prefix, line]) => leftPad(padLen, prefix) + (line ? ' | ' + line : ' |'))
+    .join('\n')
+}
+
+function whitespace(len: number): string {
+  return Array(len + 1).join(' ')
+}
+
+function leftPad(len: number, str: string): string {
+  return whitespace(len - str.length) + str
+}
+
+function indent(str: string, len: number, char: string = ' ') {
+  return str
+    .split('\n')
+    .map((s) => char.repeat(len) + s)
+    .join('\n')
+}

src/runtime/server/handler-graphql.spec.ts

@@ -3,6 +3,7 @@ import { IncomingMessage, ServerResponse } from 'http'
 import { Socket } from 'net'
 import { createRequestHandlerGraphQL } from './handler-graphql'
 import { NexusRequestHandler } from './server'
+import { errorFormatter } from './error-formatter'
 
 let handler: NexusRequestHandler
 let socket: Socket
@@ -165,6 +166,7 @@ function createHandler(...types: any) {
     },
     {
       introspection: true,
+      errorFormatterFn: errorFormatter,
     }
   )
 }

src/runtime/server/handler-graphql.ts

@@ -1,15 +1,17 @@
 import { Either, isLeft, left, right, toError, tryCatch } from 'fp-ts/lib/Either'
 import {
   execute,
+  FieldNode,
+  formatError,
   getOperationAST,
+  GraphQLError,
+  GraphQLFormattedError,
   GraphQLSchema,
   parse,
   Source,
+  specifiedRules,
   validate,
   ValidationContext,
-  specifiedRules,
-  FieldNode,
-  GraphQLError,
 } from 'graphql'
 import { IncomingMessage } from 'http'
 import createError, { HttpError } from 'http-errors'
@@ -20,6 +22,7 @@ import { sendError, sendErrorData, sendSuccess } from './utils'
 
 type Settings = {
   introspection: boolean
+  errorFormatterFn(graphqlError: GraphQLError): GraphQLFormattedError
 }
 
 type CreateHandler = (
@@ -56,6 +59,7 @@ export const createRequestHandlerGraphQL: CreateHandler = (schema, createContext
   res
 ) => {
   const errParams = await getGraphQLParams(req)
+  const errorFormatter = settings.errorFormatterFn ?? formatError
 
   if (isLeft(errParams)) {
     return sendError(res, errParams.left)
@@ -87,7 +91,9 @@ export const createRequestHandlerGraphQL: CreateHandler = (schema, createContext
     // todo lots of rich info for clients in here, expose it to them
     return sendErrorData(
       res,
-      createError(400, 'GraphQL operation validation failed', { data: validationFailures })
+      createError(400, 'GraphQL operation validation failed', {
+        graphqlErrors: validationFailures.map(errorFormatter),
+      })
     )
   }
 
@@ -105,19 +111,36 @@ export const createRequestHandlerGraphQL: CreateHandler = (schema, createContext
 
   const context = await createContext(req)
 
-  const result = await execute({
-    schema: schema,
-    document: documentAST,
-    contextValue: context,
-    variableValues: params.variables,
-    operationName: params.operationName,
-  })
+  try {
+    const result = await execute({
+      schema: schema,
+      document: documentAST,
+      contextValue: context,
+      variableValues: params.variables,
+      operationName: params.operationName,
+    })
+
+    if (result.errors) {
+      const formattedResult = {
+        ...result,
+        errors: result.errors?.map(errorFormatter),
+      }
+
+      return sendErrorData(
+        res,
+        createError(500, 'failed while resolving client request', { graphqlErrors: formattedResult })
+      )
+    }
 
-  if (result.errors) {
-    return sendErrorData(res, createError(500, 'failed while resolving client request', { data: result }))
+    return sendSuccess(res, result)
+  } catch (contextError) {
+    return sendErrorData(
+      res,
+      createError(400, 'GraphQL execution context error.', {
+        graphqlErrors: [errorFormatter(contextError)],
+      })
+    )
   }
-
-  return sendSuccess(res, result)
 }
 
 /**

src/runtime/server/server.ts

@@ -1,15 +1,15 @@
 import createExpress, { Express } from 'express'
-import { GraphQLSchema } from 'graphql'
+import { GraphQLError, GraphQLSchema } from 'graphql'
 import * as HTTP from 'http'
 import { HttpError } from 'http-errors'
 import * as Net from 'net'
-import stripAnsi from 'strip-ansi'
 import * as Plugin from '../../lib/plugin'
 import { httpClose, httpListen, MaybePromise, noop } from '../../lib/utils'
 import { AppState } from '../app'
 import * as DevMode from '../dev-mode'
 import { ContextContributor } from '../schema/schema'
 import { assembledGuard } from '../utils'
+import { errorFormatter } from './error-formatter'
 import { createRequestHandlerGraphQL } from './handler-graphql'
 import { createRequestHandlerPlayground } from './handler-playground'
 import { log } from './logger'
@@ -73,12 +73,13 @@ export function create(appState: AppState) {
       get graphql() {
         return (
           assembledGuard(appState, 'app.server.handlers.graphql', () => {
-            return wrapHandlerWithErrorHandling(
-              createRequestHandlerGraphQL(
-                appState.assembled!.schema,
-                appState.assembled!.createContext,
-                settings.data.graphql
-              )
+            return createRequestHandlerGraphQL(
+              appState.assembled!.schema,
+              appState.assembled!.createContext,
+              {
+                ...settings.data.graphql,
+                errorFormatterFn: errorFormatter,
+              }
             )
           }) ?? noop
         )
@@ -110,10 +111,13 @@ export function create(appState: AppState) {
           loadedRuntimePlugins
         )
 
-        const graphqlHandler = createRequestHandlerGraphQL(schema, createContext, settings.data.graphql)
+        const graphqlHandler = createRequestHandlerGraphQL(schema, createContext, {
+          ...settings.data.graphql,
+          errorFormatterFn: errorFormatter,
+        })
 
-        express.post(settings.data.path, wrapHandlerWithErrorHandling(graphqlHandler))
-        express.get(settings.data.path, wrapHandlerWithErrorHandling(graphqlHandler))
+        express.post(settings.data.path, graphqlHandler)
+        express.get(settings.data.path, graphqlHandler)
 
         return { createContext }
       },
@@ -159,18 +163,15 @@ const wrapHandlerWithErrorHandling = (handler: NexusRequestHandler): NexusReques
     await handler(req, res)
     if (res.statusCode !== 200 && (res as any).error) {
       const error: HttpError = (res as any).error
-      const colorlessMessage = stripAnsi(error.message)
+      const graphqlErrors: GraphQLError[] = error.graphqlErrors
 
-      if (process.env.NEXUS_STAGE === 'dev') {
-        resolverLogger.error(error.stack ?? error.message)
+      if (graphqlErrors.length > 0) {
+        graphqlErrors.forEach(errorFormatter)
       } else {
-        resolverLogger.error('An exception occured in one of your resolver', {
-          error: error.stack ? stripAnsi(error.stack) : colorlessMessage,
+        log.error(error.message, {
+          error,
         })
       }
-
-      // todo bring back payload sanitization for data sent to clients
-      // error.message = colorlessMessage
     }
   }
 }

src/runtime/server/utils.ts

@@ -9,7 +9,7 @@ export function sendSuccess(res: ServerResponse, data: object): void {
 
 export function sendErrorData(res: ServerResponse, e: HttpError): void {
   ;(res as any).error = e
-  sendJSON(res, e.status, e.name, e.headers ?? {}, e.data)
+  sendJSON(res, e.status, e.name, e.headers ?? {}, e.graphqlErrors)
 }
 
 export function sendError(res: ServerResponse, e: HttpError): void {