在 Babel 下调用 super() 的自定义错误无法输出堆栈？

Question

Refer this , the Custom Errors in ES6 can be written as following:

class MyError extends Error {
  constructor(message) {
    super(message);
    this.message = message;
    this.name = 'MyError';
  }
}

There is no need for this.stack = (new Error()).stack; trick thanks to super() call.

However, I test it under Babel

class MyError extends Error {
  constructor(message) {
    super(message);
    this.message = message;
    this.name = 'MyError';
    //this.stack = (new Error()).stack;
    //Error.captureStackTrace(this, this.constructor.name);
  }
}

var myerror = new MyError("test");
console.log(myerror.stack)

There is NO stack information unless the code this.stack = (new Error()).stack; or Error.captureStackTrace(this, this.constructor.name); is invoked.

But I test the above code snippet without this.stack = (new Error()).stack; or Error.captureStackTrace(this, this.constructor.name); under Chrome console .

Output:

MyError: test
    at MyError (<anonymous>:3:28)
    at <anonymous>:12:19
    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
    at Object.InjectedScript.evaluate (<anonymous>:664:21)

Should I consider this is one defect on Babel or Chrome issue? Or miss understanding the super() ?

Update

According to V8 codes, the stack of Error

captureStackTrace = function captureStackTrace(obj, cons_opt) {
  // Define accessors first, as this may fail and throw.
  ObjectDefineProperty(obj, 'stack', { get: StackTraceGetter,
                                       set: StackTraceSetter,
                                       configurable: true });

Base on my understanding, since the stack is one property of Error , after supper() is called, then it is not necessary to invoke captureStackTrace in MyError class. Am I missing something?

Answer 1

As far as I know, in order to properly extend Error class in V8 you should call

Error.captureStackTrace(this, this.constructor)

in it's constructor, eg:

class MyError extends Error {
  constructor (message) {
    super()
    Error.captureStackTrace(this, this.constructor)
    Object.assign(this, {name: 'MyError', message})
  }
}

NB: Bear in mind that not all browsers support Error.captureStackTrace , so you may have to make it optional.

Alternatively, you could use es6-error npm module to deal with all this stuff automatically:

import ExtendableError from 'es6-error';

class MyError extends ExtendableError {
  // everything is taken care of
}