Creating Custom Error: Understanding MDN Example

Question

The below example of how to create a custom Error in JS can be found on MDN (link).

I am struggling to understand what is going on (specific questions below).

function CustomError(foo, message, fileName, lineNumber) {
  var instance = new Error(message, fileName, lineNumber);
  instance.foo = foo;
  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
  if (Error.captureStackTrace) {
    Error.captureStackTrace(instance, CustomError);
  }
  return instance;
}

CustomError.prototype = Object.create(Error.prototype, {
  constructor: {
    value: Error,
    enumerable: false,
    writable: true,
    configurable: true
  }
});

if (Object.setPrototypeOf) {
  Object.setPrototypeOf(CustomError, Error);
} else {
  CustomError.__proto__ = Error;
}


try {
  throw new CustomError('baz', 'bazMessage');
} catch (e) {
  console.log(e.foo); //baz
  console.log(e.message); //bazMessage
}

QUESTIONS

1. Since we are returning an object inside CustomError, will using it as a constructor function (new CustomError()) and using it as a normal function object (CustomError()) yield the same outcome?
2. In line 11: Do we create a new object here, instead of setting CustomError.prototype directly to Error.prototype, so that we can extend the prototype without affecting all other Error objects?
3. Also in line 11: Why do we even bother setting prototype property of the function, if we cannot use it as a constructor function (ref. question 1)?
4. In line 4 we set the Error instance to whatever called the function, right? I don't understand what the purpose is / what the this value will be.
5. What is the purpose of the captureStackTrace check?

Thank you for helping me analyze and understand this snippet.

---

EDIT:

I wanted to add that I think I have understood the following:

• Whenever we create a new object with a constructor function (new keyword), it gets prototype-linked to an empty object, which in turn is prototype linked to Object.prototype
• It is prototype linked to a new empty object, instead of directly to Object.prototype, because that way we can extend the prototype of the new object, without changing the behavior of all objects with Object.prototype on its prototype chain.
• If we have two levels of "inheritance", and thus manually change the prototype property of a constructor function, it should reflect the same behavior. In effect, we should set the prototype property to be an empty object, which in turn is prototype linked to our newly introduced "parent"

Example:

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}

function Male(name) {
  Person.call(this, name, "male");
}

Male.prototype = Object.create(Person.prototype, {
  constructor: {
    value: Male,
    enumerable: false,
    writeable: true
  }
});

var person1 = new Male("Chris");

• As seen above, when changing the prototype property manually, we should not only assign a new empty object to the prototype property, but also set the constructor property of that empty object
• This is because every object should indeed be able to look at its prototype to figure out what object constructed it. This follows the behavior of Object.prototype, where the constructor property is Object (same with other built-ins)

That should explain the second block. Have I understood that part correctly?

Answer 1

1. When using CustomError as normal function the value of this is undefined inside it. But if it is used as constructor function this will refer to current instance. Considering this is passed to getPrototypeOf, calling it as normal function will throw error and break the code. But it would be the same if CustomError was imlemented like below:

   function CustomError(){
       if(!(this instanceof MyError)) return new CustomError();
   }
   

2. That's exactly like you think

3. I am not sure why you think it can't be used as constructor function because it has already been called with new keyword in try/catch statement

4. In line 4 instance's prototype is set to the prototype of this. this refers to current instance of CustomError since it's been called via new.

5. Since Error.captureStackTrace is not supported by all environments (afaik only chrome and nodejs supports it), it checks if the function exists before using it.

---

Edit part

• Whenever we create a new object with a constructor function (new keyword), it gets prototype-linked to Person.prototype (at least has consctructor property), which in turn is prototype linked to Object.prototype

• It is prototype linked to Person.prototype, because Person constructor created it and constructors link newly created objects to their own prototype objects. Yes you can change Person.prototype without affecting Object.prototype.

Answer 2

Error() is a beast. When its constructor is called, it simply ignores this and creates a new Error object. Normally, one would use Error.call(this,...) to have the new subclass instance initialized for its superclass bofore initializing its own modifications. However, with Error, this will fail, as you'll get an initialized new Error object returned and the actual instance remains unaltered. Error() simply ignores its this and always creates a new instance. To circumvent this, a new Error has to be created, then its prototype needs to be changed to the custom prototype (derived from Error.prototype) and this instance is returned, throwing away the instance that was created by the initial new, like Error does (so we have to copy this bad behavior of Error throughout all subclasses).

The following works:

MyErrorr = function() { // Class MyError
    var prototype = Object.create (Error.prototype, { name: {writable: false, enumerable: true, value: "MyError"}});
    function MyError (reason, callee) {
        if(reason instanceof MyError)
            return new MyError(reason.message); // clone
        // creating an Error is a bit tricky, as Error.call(this, message) behaves like new Error(message), creating a new instance
        var instance = new Error(reason);
        if(Error.captureStackTrace)
            Error.captureStackTrace(instance, callee?callee:MyError); // exclude the callee or at least MyError() from the stack trace
        var stack = instance.stack; // force creation of the stack output before the prototype is switched (else the formatting is different, no idea why)
        if(Object.setPrototypeOf)
            Object.setPrototypeOf(instance, prototype);
        else
            instance.__proto__ = prototype;
        return instance;
    };
    prototype.constructor = ConversionError;
    MyError.prototype = prototype;
    return MyError;
}();

Since 'this' is not used, MyError can be instantiated with and without using new (just like Error)

There's a problem though: All those existent Error types are actually instances of the same Error class, not subclasses of Error. At least on Chrome. Also, some functions are part of Error and not of Error.prototype, so they are not available in your class (like captureStackTrace). Maybe it works if you clone them.