Why Error object can print pure string message

Question

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>

"*I want to know is why the Error object can output the raw string message*" - 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`. — Bergi, Oct 29 '20 at 10:52
Do you mean is ```not possible``` to do what I want if I don't want to inherit from ```Error``` because this is control by Chrome and oculd I find this part of source code in Chrome source code? — MichaelMao, Oct 29 '20 at 10:58
Yes, exactly. (The source code of the dev tools, to be precise) — Bergi, Oct 29 '20 at 10:59
Is form ```toString()``` or ```message```? but I think in the ```toString``` it call the ```message```? — MichaelMao, Oct 29 '20 at 11:01
Yes, `Error.prototype.toString` prints the name of the error constructor and the message property. — Bergi, Oct 29 '20 at 11:05

derpirscher · Accepted Answer · 2020-11-02T10:15:17.647

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.

A small question is why need ```back to original behaviour again``` — MichaelMao, Nov 16 '20 at 09:09
You don't really *need* it. It's there just to demonstrate how it's done, if you want to revert the behaviour. — derpirscher, Nov 16 '20 at 10:14

score 0 · Answer 2 · answered Nov 02 '20 at 09:07

0

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

answered Nov 02 '20 at 09:07

MichaelMao

2,596
2
23
54

see my answer on how to override `console.log` to get your desired behaviour – derpirscher Nov 02 '20 at 09:52

Why Error object can print pure string message

2 Answers2