ANSI color codes in chrome console output

[xcoderzach]

I'm getting this in my chrome console on error

Module build failed: SyntaxError: Unterminated JSX contents (266:12)
  264    |           �[1m�[37m<�[39m�[22m/�[37mdiv�[39m�[1m�[37m>�[39m�[22m
  265    |         �[1m�[37m<�[39m�[22m/�[37mdiv�[39m�[1m�[37m>�[39m�[22m
> 266    |       �[1m�[37m<�[39m�[22m/�[37mdiv�[39m�[1m�[37m>�[39m�[22m
         |             ^
  267    |     �[1m�[34m)�[39m�[22m
  268    |   �[32m}�[39m
  269    | �[32m}�[39m�[1m�[34m)�[39m�[22m

[sebmck]

Can I have some more information, what plugin you're using etc?

[xcoderzach]

• Babel 4.3.0
• babel loader 4.0.0
• react hot loader 1.0.7

Using webpack these loaders

      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?experimental=true,modules=common']
      },

and this plugin

webpack.NoErrorsPlugin()

[sebmck]

There's not really anything that can be done besides removing the ANSI syntax highlighting altogether.

[xcoderzach]

Is this default behavior, or is it due to some part of my configuration?

[sebmck]

It's default behaviour. It automatically ANSI syntax highlights if the terminal supports-colors. You should be able to disable the colors with the following command:

$ TERM=dumb INSERT_YOUR_COMMAND_HERE

[xcoderzach]

I really like the terminal colors :-D , so I think I'll just patch my console.error to strip ansi with https://github.com/sindresorhus/strip-ansi

Thanks for your help!

[sebmck]

Ah great, no problem!

[marijnh]

This problem still exists, and I don't think expecting users to use strip-ansi is a real solution. Could you reopen this issue?

[sebmck]

Just thought of a way I could make it work:

err.stack = {
  inspect: function () { return coloredStack; },
  toString: function () { return noncoloredStack; },
  toJSON: function () { return noncoloredStack; }
};

Will dump colored output for the console but if it's serialised it'll be a non-colored string. Only issue is consumers that expect err.stack to be a string.

[sebmck]

It's really hacky so I'll have to do some testing to see if it's practical. I'm hesitant on adding an additional option if it can be done some other (albeit hacky) way.

[sebmck]

In the next release you'll be able to set the highlightErrors option to false.

[frederickfogerty]

👍

[joliss]

Chiming in on an old issue... How about having err.message be always non-colorized (so other tools can easily log and display them), but adding a seperate err.colorMessage (or ansiColorMessage) so consumers can decide whether what to print into their terminals?

Consuming apps like ember-cli would seem to be better-equipped to know whether to print color (e.g. by parsing a --color={always,auto,never} argument). The chalk library that babel uses calls this argv sniffing code to automagically turn color on and off - that seems like it's going to be brittle.