CODEWITHSUNDEEP
javascriptprototype
MichaelMao
MichaelMao

Reputation: 2796

Why Error object can print pure string message

I don't want to inherit or extend from the Error so don't mark my question is duplicate if the solution you post is inherit or extend from Error

Below is my sample code and run on Chrome. Comments below console.log is output from Chrome developer tool's console tab.

What I want to know is why the Error object can output the raw string message but my CustomError will output a object.

Is it possible to implement an object like the Error object can output the raw string message

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function CustomError() {
      this.message = "MyErrorMessage";
    }

    var nativeError = new Error();
    var customError = new CustomError();

    console.log(nativeError);
    // Error

    console.log(customError);
    // CustomError {message: "MyErrorMessage"}

    Error.prototype.message = "Modify native error prototype message";
    var nativeErrorAfterModifyPrototypeMessage = new Error();
    console.log(nativeErrorAfterModifyPrototypeMessage);
    // Error: Modify native error prototype message

    CustomError.prototype.message = "Modify custom error prototype message";
    customErrorAfterModifyPrototypeMessage;
    var customErrorAfterModifyPrototypeMessage = new CustomError();
    console.log(customErrorAfterModifyPrototypeMessage);
    // CustomError {message: "MyErrorMessage"}

    customErrorAfterModifyPrototypeMessage.__proto__.message =
      "Modify custom error prototype message";

    console.log(customErrorAfterModifyPrototypeMessage);
    //index.html:37 CustomError {message: "MyErrorMessage"}
  </script>
</html>

Upvotes: 0

Views: 361

Answers (2)

derpirscher
derpirscher

Reputation: 17407

You can always override console.log and do the special treatment for CustomError yourself.

function CustomError(message = "") {
    this.message = message;
    //override toString to just return your message (or whatever you want your output to look like)
    this.toString = () => this.message;
}

const ce = new CustomError("some message");

//this shows the builtin behaviour of console.log
console.log(ce);

//preserve the original console.log function, we'll need it later on
console.originalLog = console.log;

//override console.log with a new function
console.log = function() {
    //check if any of the arguments is a CustomError
    //and replace CustomErrors with its string representation
    for (let i = 0; i < arguments.length; i++)
        if (arguments[i] && arguments[i].constructor.name === "CustomError") 
            arguments[i] = arguments[i].toString();

    //call the original log function with the updated arguments
    console.originalLog.apply(this, arguments);
}

//this shows the overriden behaviour of console.log
console.log(ce);

//and back to original behaviour again
console.log = console.originalLog;
console.originalLog = undefined;
console.log(ce);

Probably not the most efficient or elegant solution, but it gets the job done in most scenarios. It won't work, if the CustomError is nested inside another object or array.

Make sure to preserve the original behaviour of console.log in another variable, so you can use it, once you modified the arguments.

Upvotes: 1

MichaelMao
MichaelMao

Reputation: 2796

Simply because instances of Error are treated specially by the console, using .toString() for formatting. If you want this behaviour, you must inherit from Error

The source code of the dev tools

The answer from comment by @Berg

Upvotes: 0

Related Questions