Unable to get detailed GraphQL error information in React component

[eddieysong]

  async addNewUser(input) {
    // console.log(input);
    try {
      const result = await knex(USER_TABLE).insert(input);
      return this.getUserById(result);
    } catch (e) {
      console.log (e);
      throw (e);
    }
    // Ed:
    // the problem here is that Apollo will catch the error first,
    // and it will eat most of the information
    // and return a simplified error object that doesn't contain properties like "code"
  }

yields

{ Error: ER_DUP_ENTRY: Duplicate entry 'asd' for key 'user_email_unique'
    at Query.Sequence._packetToError (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\sequences\Sequence.js:52:14)
    at Query.ErrorPacket (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\sequences\Query.js:77:18)
    at Protocol._parsePacket (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\Protocol.js:279:23)
    at Parser.write (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\Parser.js:76:12)
    at Protocol.write (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\Protocol.js:39:16)
    at Socket.<anonymous> (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\Connection.js:103:28)
    at emitOne (events.js:115:13)
    at Socket.emit (events.js:210:7)
    at addChunk (_stream_readable.js:264:12)
    at readableAddChunk (_stream_readable.js:251:11)
    at Socket.Readable.push (_stream_readable.js:209:10)
    at TCP.onread (net.js:587:20)
    at Protocol._enqueue (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\Protocol.js:145:48)
    at Connection.query (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\Connection.js:208:25)
    at C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\dialects\mysql\index.js:152:18
From previous event:
    at Client_MySQL._query (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\dialects\mysql\index.js:146:12)
    at Client_MySQL.query (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\client.js:197:17)
    at Runner.<anonymous> (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\runner.js:146:36)
From previous event:
    at C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\runner.js:65:21
    at runCallback (timers.js:785:20)
    at tryOnImmediate (timers.js:747:5)
    at processImmediate [as _immediateCallback] (timers.js:718:5)
From previous event:
    at Runner.run (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\runner.js:51:31)
    at Builder.Target.then (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\interface.js:35:43)
  code: 'ER_DUP_ENTRY',
  errno: 1062,
  sqlMessage: 'Duplicate entry \'asd\' for key \'user_email_unique\'',
  sqlState: '23000',
  index: 0,
  sql: 'insert into `user` (`email`, `firstName`, `lastName`) values (\'asd\', \'asd\', \'asd\')' }

But in the React component's handleClick method

    handleClick = () => {
        this.props.mutate({
            variables: {
                input: {
                    firstName: this.state.firstName,
                    lastName: this.state.lastName,
                    email: this.state.email,
                }
            }
        }).catch(err => {
            console.log(err);
        });
    }

yields

Error: ER_DUP_ENTRY: Duplicate entry 'asd' for key 'user_email_unique'
    at Query.Sequence._packetToError (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\sequences\Sequence.js:52:14)
    at Query.ErrorPacket (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\sequences\Query.js:77:18)
    at Protocol._parsePacket (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\Protocol.js:279:23)
    at Parser.write (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\Parser.js:76:12)
    at Protocol.write (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\Protocol.js:39:16)
    at Socket.<anonymous> (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\Connection.js:103:28)
    at emitOne (events.js:115:13)
    at Socket.emit (events.js:210:7)
    at addChunk (_stream_readable.js:264:12)
    at readableAddChunk (_stream_readable.js:251:11)
    at Socket.Readable.push (_stream_readable.js:209:10)
    at TCP.onread (net.js:587:20)
    at Protocol._enqueue (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\protocol\Protocol.js:145:48)
    at Connection.query (C:\CentennialCollegeF2017\social-networking-app\node_modules\mysql\lib\Connection.js:208:25)
    at C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\dialects\mysql\index.js:152:18
From previous event:
    at Client_MySQL._query (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\dialects\mysql\index.js:146:12)
    at Client_MySQL.query (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\client.js:197:17)
    at Runner.<anonymous> (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\runner.js:146:36)
From previous event:
    at C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\runner.js:65:21
    at runCallback (timers.js:785:20)
    at tryOnImmediate (timers.js:747:5)
    at processImmediate [as _immediateCallback] (timers.js:718:5)
From previous event:
    at Runner.run (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\runner.js:51:31)
    at Builder.Target.then (C:\CentennialCollegeF2017\social-networking-app\node_modules\knex\lib\interface.js:35:43)

The error no longer contains useful information like code: 'ER_DUP_ENTRY', that we can use to handle errors gracefully.

[flippingbitss]

maybe you can try the error from the component props and see what information it has

[flippingbitss]

Looks like Apollo 2.0 did this a better way: https://www.apollographql.com/docs/react/features/error-handling.html

Though we can try this: https://www.npmjs.com/package/apollo-errors

[flippingbitss]

or we can prettify the error message on server and just display it from the UI.

[eddieysong]

That's the way I'm planning to do it; I'm no longer under the illusion that this app will ever go to production

H A H A