5

I would like Chrome Dev Tools to log my custom Error objects (extending Error) in the same user-friendly format as a native browser Error.

Currently the following code:

 console.log(new CustomError('boom'));
 console.log(new Error('boom'));

Produces the following output:

enter image description here

Instead, I would like my custom error type to display with the ellipsised (...) stack trace, with it's convenient clickable file paths when expanded.

My current error implementation is the suggested method of extension from MDN Custom Error types document, although I have also tried this and this Stack Overflow answer.

The MDN implementation, with added captureStackTrace support, is:

function CustomError(message) {
  this.message = message;
  if (Error.captureStackTrace) {
    Error.captureStackTrace(this, this.constructor)
  } else {
    this.stack = new Error().stack;
  }
}

 Object.setPrototypeOf(CustomError, Error);
 CustomError.prototype = Object.create(Error.prototype);
 CustomError.prototype.name = "CustomError";
 CustomError.prototype.message = "";
 CustomError.prototype.constructor = CustomError;

Is there are way to get Chrome Dev Tools to see my custom error as a standard Error?

Community
  • 1
  • 1
jevakallio
  • 35,324
  • 3
  • 105
  • 112
  • 1
    Try poking devtools internals: pop-out the devtools into a separate window, press Ctrl-Shift-I to open devtools for the devtools, set a breakpoint in devtools/bundled/console/console_module.js's _formatMessage, and see what happens when logging various stuff in the first console. – wOxxOm Sep 30 '16 at 19:16
  • See also `console.group` and `groupCollapsed`, maybe you can use it as a substitute. – wOxxOm Oct 02 '16 at 23:24
  • This might be too much work for your use case, but "custom object formatters" allow you to control how console.log formats objects. – Matt Zeunert Oct 03 '16 at 10:05

0 Answers0