MS Edge broken colors

[freewil]

This is the literal output in the console for MS Edge (without any color applied to it's output):

%cmyModule:myService %ccheckEmail%c +0ms color: lightseagreen color: inherit color: lightseagreen false

[tribou]

I just recently started getting a similar issue on Chrome as well. However, it doesn't have the color arguments at the end:

app:helpers:api %cSet API base url: %s%c +0ms

macOS 10.12.2
Chrome Version 56.0.2924.76 (64-bit)

[tribou]

Appears to be an intermittent issue on Chrome... Rebuilt my project, opened it in a new tab, and now it's working again. 🤷‍♂️

[brenc]

I'm seeing this on Edge as well. IE shows non-colored output and every other browser shows proper color output:

%cngchat:main %cwindow focused%c +8s color: darkorchid color: inherit color: darkorchid

[TooTallNate]

Does Edge just simply not support colored logs? Should be easy enough to adjust the supportsColors() function to support Edge.

[adrian-moisa]

I am having the same issue in Edge.

[ibc]

Assuming that Edge does not support colored logs (is that?), shouldn't the useColors() in src/browser.js try to detect Edge and return false?

[ibc]

@TooTallNate would you accept a PR making supportsColors() return false when in Edge and Internet Explorer? Here the current problem:

function useColors() {
  // NB: In an Electron preload script, document will be defined but not fully
  // initialized. Since we know we're in Chrome, we'll just detect this case
  // explicitly
  if (typeof window !== 'undefined' && window.process && window.process.type === 'renderer') {
    return true;
  }

  // is webkit? http://stackoverflow.com/a/16459606/376773
  // document is undefined in react-native: https://github.com/facebook/react-native/pull/1632
  return (typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance) ||
    // is firebug? http://stackoverflow.com/a/398120/376773
    (typeof window !== 'undefined' && window.console && (window.console.firebug || (window.console.exception && window.console.table))) ||
    // is firefox >= v31?
    // https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages
    (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31) ||
    // double check webkit in userAgent just in case we are in a worker
    (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/));
}

Note the latest condition:

navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/)

It happens that the User-Agent string of Edge looks as follows:

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

so Edge is falsely detected as "webkit" and, hence, colors are enabled. We just need to disable Edge (and IE) which can be done by adding the following checks at the beginning:

function useColors() {
  // Internet Explorer and Edge do not support colors.
  if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/))
    return false;

  // [...]