Surface errors from GraphQL server response

Is your feature request related to a problem? Please describe.

As I'm authoring new Apollo client queries in my Nuxt SSR app, I make mistakes, of course, and I see the following an error in my server output (source):

POST /graphql 400 1227 - 3.604 ms
%cError background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold; Network error: Response not successful: Received status code 400
%cError background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold; Network error: Response not successful: Received status code 400
GET /vars/ 200 2017 - 27.974 ms

Problem 1: There's no useful error message here. It just says Network error: Response not successful: Received status code 400. I know I made a mistake somewhere, but the error message neither helps me locate it nor tells me what I've done wrong. So I have to go looking around at different files to see if I can spot where I've gone wrong.

Problem 2: I see the error message in the browser, but it also doesn't contain any useful information. In fact, it distracts me from noticing that I really should be looking at the failed POST request to /graphql 2 lines above.

But to get to the error message requires 2 additional steps (that seem unnecessary): first, you have to click the little URL string (http://localhost:8000/graphql), which takes you to the Network tab in Dev Tools. But I still don't have the info I need:

I need to know to click on the graphql row, which finally shows me the real problem: I misspelled the field name!

And it's not even formatted for easy reading. Here's the full JSON error after taking it into a text editor and running it through Prettier:

{
  "errors": [
    {
      "message": "Cannot query field \"valueseff\" on type \"Var\". Did you mean \"value\"?",
      "locations": [{ "line": 4, "column": 5 }],
      "extensions": {
        "code": "GRAPHQL_VALIDATION_FAILED",
        "exception": {
          "stacktrace": [
            "GraphQLError: Cannot query field \"valueseff\" on type \"Var\". Did you mean \"value\"?",
            "    at Object.Field (/Users/ccalo/Projects/viaticus/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:53:31)",
            "    at Object.enter (/Users/ccalo/Projects/viaticus/node_modules/graphql/language/visitor.js:324:29)",
            "    at Object.enter (/Users/ccalo/Projects/viaticus/node_modules/graphql/language/visitor.js:375:25)",
            "    at visit (/Users/ccalo/Projects/viaticus/node_modules/graphql/language/visitor.js:242:26)",
            "    at Object.validate (/Users/ccalo/Projects/viaticus/node_modules/graphql/validation/validate.js:73:24)",
            "    at validate (/Users/ccalo/Projects/viaticus/node_modules/apollo-server-core/dist/requestPipeline.js:212:32)",
            "    at Object.<anonymous> (/Users/ccalo/Projects/viaticus/node_modules/apollo-server-core/dist/requestPipeline.js:125:42)",
            "    at Generator.next (<anonymous>)",
            "    at fulfilled (/Users/ccalo/Projects/viaticus/node_modules/apollo-server-core/dist/requestPipeline.js:5:58)"
          ]
        }
      }
    }
  ]
}

Problem 3: The intended formatting works in the browser, but, as shown above, it doesn't at all work on my Node.js server output.

Describe the solution you'd like

Solution 1: In both Node.js and in the browser, show the error message from the GraphQL server response. For example:

POST /graphql 400 1227 - 3.604 ms

GraphQLError: Cannot query field "valueseff" on type "Var". Did you mean "value"?",
  at Object.Field (/Users/ccalo/Projects/viaticus/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:53:31)",
  at Object.enter (/Users/ccalo/Projects/viaticus/node_modules/graphql/language/visitor.js:324:29)",
  at Object.enter (/Users/ccalo/Projects/viaticus/node_modules/graphql/language/visitor.js:375:25)",
  at visit (/Users/ccalo/Projects/viaticus/node_modules/graphql/language/visitor.js:242:26)",
  at Object.validate (/Users/ccalo/Projects/viaticus/node_modules/graphql/validation/validate.js:73:24)",
  at validate (/Users/ccalo/Projects/viaticus/node_modules/apollo-server-core/dist/requestPipeline.js:212:32)",
  at Object.<anonymous> (/Users/ccalo/Projects/viaticus/node_modules/apollo-server-core/dist/requestPipeline.js:125:42)",
  at Generator.next (<anonymous>)",
  at fulfilled (/Users/ccalo/Projects/viaticus/node_modules/apollo-server-core/dist/requestPipeline.js:5:58)"

GET /vars/ 200 2017 - 27.974 ms

When running in SSR mode in Node.js, remove the formatting that only works in browser Dev Tools.

Describe alternatives you've considered

I've since learned that I need to do the following:

Ignore Network error: Response not successful: Received status code 400 error messages in server output.
Go to the browser and open the console.
Ignore Network error: Response not successful: Received status code 400 error messages in the console.
Find the failed POST request, don't expand it, look for the URL and click it.
Find the graphql row, click it.
Look at the error message.

I now know to do that, but that feels like far too much work for something that I'm assuming can be surfaced in my server output and in the browser console.

Additional context

I'm using Nuxt.js for SSR along with @nuxtjs/apollo.

vuejs / apollo