ui: fix errors doesn't display

[baurine]

Currently when we kill the TiDB, the dashboard doesn't display the error on the page when requesting API.

Reason: we store the error message in err.message, but sometimes when we access err.message later we get undefined, still don't know the exact reason.

Fix: store the error message in err.msg field instead and it works fine.

After fixing:

[baurine]

@breeswish PTAL, thanks!

[baurine]

It seems to break the CI, let me have a look.

[baurine]

Get the root cause of this issue finally. It is because the message property of the Error object is a non-enumerable property, its value will miss when using spread syntax (I use it somewhere but not everywhere).

Ref: https://stackoverflow.com/a/59874261/2998877

Some tests:

function testError() {
  const err = new Error('test error message')
  console.log(err) // Error: test error message
  console.log({ ...err }) // {}
  console.log('message:', err.message) // message: test error message
  console.log(Object.keys(err)) // []
  console.log(Object.getOwnPropertyDescriptor(err, 'message')) // {value: "test error message", writable: true, enumerable: false, configurable: true}

  err.message = 'modified message'
  err.msg = 'test err.msg'
  console.log(err) // Error: test error message
  console.log({ ...err }) // {msg: "test err.msg"}
  console.log('message:', err.message) // message: modified message
  console.log(Object.keys(err)) // ["msg"]
  console.log(Object.getOwnPropertyDescriptor(err, 'message')) // {value: "modified message", writable: true, enumerable: false, configurable: true}
}

function testCommonObj() {
  function Animal(name) {
    Object.defineProperty(this, 'name', {
      value: name,
      writable: true,
      enumerable: false,
      configurable: true,
    })
  }
  const animal = new Animal('a dog')
  console.log(animal) // Animal {name: "a dog"}
  console.log({ ...animal }) // {}
  console.log(Object.keys(animal)) // []
  console.log(Object.getOwnPropertyDescriptor(animal, 'name')) // {value: "a dog", writable: true, enumerable: false, configurable: true}

  animal.name = 'a cat'
  animal.color = 'white'
  console.log(animal) // Animal {color: "white", name: "a cat"}
  console.log({ ...animal }) // {color: "white"}
  console.log(Object.keys(animal)) // ["color"]
  console.log(Object.getOwnPropertyDescriptor(animal, 'name')) // chart.js:109 {value: "a cat", writable: true, enumerable: false, configurable: true}
}

[baurine]

@breeswish update it, PTAL, thanks!

[breezewish]

Nice dig!