Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lib,test,doc: add option to highlight outputs of warn and error methods #40424

Closed
wants to merge 1 commit into from
Closed

lib,test,doc: add option to highlight outputs of warn and error methods #40424

wants to merge 1 commit into from

Conversation

rayw000
Copy link
Contributor

@rayw000 rayw000 commented Oct 12, 2021

What changed

  1. Add color style types for console.error and console.warn.
  2. Colorize output from console.error and console.warn.
  3. Update related tests.

Fix #40361

Screenshot:
image

@nodejs-github-bot nodejs-github-bot added console Issues and PRs related to the console subsystem. needs-ci PRs that need a full CI run. util Issues and PRs related to the built-in util module. labels Oct 12, 2021
@targos
Copy link
Member

targos commented Oct 12, 2021

/cc @BridgeAR

@rayw000
Copy link
Contributor Author

rayw000 commented Oct 12, 2021

I'm trying to find out why test case test-tty-color-support gives different result on my laptop.

The CI Action outputs

expect=3
actual=2
patterns:
pattern = ^.*\[91m\(node:.*\)\ Warning:\ The\ 'NO_COLOR'\ env\ is\ ignored\ due\ to\ the\ 'FORCE_COLOR'\ env\ being\ set\.$
pattern = ^\(Use\ `.*\ \-\-trace\-warnings\ \.\.\.`\ to\ show\ where\ the\ warning\ was\ created\)$
pattern = ^.*\[39m$
outlines:
outline = (node:89630) Warning: The 'NO_COLOR' env is ignored due to the 'FORCE_COLOR' env being set.
outline = (Use `node --trace-warnings ...` to show where the warning was created)

while on my laptop, the outlines seem correct if I cancel my change to let this test fail and get its output.

expect=2
actual=3
patterns:
pattern = ^\(node:.*\)\ Warning:\ The\ 'NO_COLOR'\ env\ is\ ignored\ due\ to\ the\ 'FORCE_COLOR'\ env\ being\ set\.$
pattern = ^\(Use\ `.*\ \-\-trace\-warnings\ \.\.\.`\ to\ show\ where\ the\ warning\ was\ created\)$
outlines:
outline = [91m(node:22915) Warning: The 'NO_COLOR' env is ignored due to the 'FORCE_COLOR' env being set.
outline = (Use `node --trace-warnings ...` to show where the warning was created)
outline = [39m

Copy link
Member

@BridgeAR BridgeAR left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on the color support in Node.js!

The current approach would work but I would rather not replace the current coloring with just a single font color. Instead, we could change the background color and or add a sign to the beginning of the output to indicate that it's an error or warning. That way we'd keep the original coloring in place and profit from the stronger warn / error indicator.

As last note: colors are perceived differently around the globe. Red is a positive sign in many Asian countries. See e.g., https://www.shutterstock.com/blog/color-symbolism-and-meanings-around-the-world. So thanks for adding the new style to util.inspect.styles to allow the users to change that. It just does not feel like the right place to add such option (it won't be used by util.inspect() and it's an option directly related to it). Instead, please add an option to the console constructor to allow editing that color and document the new option.

Summary:

  1. Add option to console constructor to allow editing the colors
  2. Document the option
  3. Remove util.inspect.styles entries
  4. Use a light / dim background color instead of changing the foreground colors

lib/internal/console/constructor.js Outdated Show resolved Hide resolved
@rayw000
Copy link
Contributor Author

rayw000 commented Oct 12, 2021

Really valuable suggestions. Thank you @BridgeAR !

I'm happy to take them and re-implement later.

@rayw000 rayw000 changed the title lib,test: highlight output from console.error and console.warn lib,test,doc: Add option to highlight outputs of warn and error methods Oct 22, 2021
@rayw000 rayw000 changed the title lib,test,doc: Add option to highlight outputs of warn and error methods lib,test,doc: add option to highlight outputs of warn and error methods Oct 22, 2021
@rayw000
Copy link
Contributor Author

rayw000 commented Oct 22, 2021

I just pushed my new implementation, along with necessary tests and documentation. Now we can create Console instance with option highlight to enable warn and error highlighting, such as:

const { Console } = require('console');
const logger = new Console({
  stdout: process.stdout,
  stderr: process.stderr,
  highlight: {
    warn: { bgColor: 'bgYellowBright' },
    error: { bgColor: 'bgRedBright', indicator: '\u274c' },
  }
});

logger.warn('Warning!');
// Will output message 'Warning!' along with bright yellow background.
logger.error(new Error('Ah oh!'));
// Will output message 'Ah oh!' along with bright red background,
// and a cross sign in front of the message indicating error.
// I turned down the color brightness of my terminal to make it more readable.

image

It's not enabled by default. Only explicitly pass option highlight to the constructor of Console can make it work. If this PR is acceptable, I'll introduce environment variables such as NODE_HIGHLIGHT_WARN and NODE_HIGHLIGHT_ERROR, or properties like console.highlight to enable highlighting for the global console instance.

Any suggestions are welcome. Thank you!

@jasnell
Copy link
Member

jasnell commented Oct 24, 2021

I'm generally ok with making the changes discussed here. I just want to make sure that accessibility concerns are being looked at... specifically, will the color schemes chosen by default be problematic for colorblind users?

@rayw000
Copy link
Contributor Author

rayw000 commented Oct 24, 2021

Thank you @jasnell.

This feature doesn't provide a default color theme. It's not enabled until user sets its colors explicitly.

But to be honest, choosing a background color working with multiple foreground colors without losing accessibility is not that easy. It's not only a problem for colorblind users, but also for non-colorblind. As described in my last comment, I have to decrease the brightness of color bright red (it's now actually a dark red) in my terminal settings to make highlighted text not that unreadable. It may not be a problem currently, but it will be once we give the global console instance a default highlight color theme.

@Trott
Copy link
Member

Trott commented Jan 16, 2022

@rayw000 Is this still something that you would like to complete? I'd like to see this feature land, but I'm not sure what the next step would be. Is it ready for review from your perspective? Or is there still an issue with a test behaving differently on your laptop than in CI?

@rayw000
Copy link
Contributor Author

rayw000 commented Jan 16, 2022

Thank you @Trott .

In my perspective, this PR is ready for review. The differences between my laptop and CI have been solved.

Let me make a summary of the current state.

  1. This PR introduces an option highlight to Console, by which we can colorize the output. This feature is not enabled by default. Users can create their own instance of Console to make things colorful, just like what I've mentioned here: lib,test,doc: add option to highlight outputs of warn and error methods #40424 (comment)
  2. If this PR is acceptable, I'll expose environment variables like NODE_HIGHLIGHT_WARN and NODE_HIGHLIGHT_ERROR to users to customize the output color schemes in their terminal.

I've just solved the conflicts. We could send it to CI now, if you think this PR is OK.
And I'm happy to discuss if you have any suggestions. :)

@Trott Trott added semver-minor PRs that contain new features and should be released in the next minor version. request-ci Add this label to start a Jenkins CI on a PR. labels Jan 18, 2022
@github-actions github-actions bot removed the request-ci Add this label to start a Jenkins CI on a PR. label Jan 18, 2022
@nodejs-github-bot
Copy link
Collaborator

1. add option to highlight 'warn' and 'error' messages
2. add necessary unit tests
3. update document
@rayw000
Copy link
Contributor Author

rayw000 commented Jan 19, 2022

Rebase master and do force-with-lease pushing to retry flaky tests.

@nodejs-github-bot
Copy link
Collaborator

@aduh95
Copy link
Contributor

aduh95 commented Jan 19, 2022

Rebase master and do force-with-lease pushing to retry flaky tests.

FYI it's better not to force push when there are flaky CI results, it's easier to simply wait for a collaborator to re-spawn them (otherwise all the jobs have to re-run, even the ones that were already green).

@rayw000
Copy link
Contributor Author

rayw000 commented Jan 19, 2022

Rebase master and do force-with-lease pushing to retry flaky tests.

FYI it's better not to force push when there are flaky CI results, it's easier to simply wait for a collaborator to re-spawn them (otherwise all the jobs have to re-run, even the ones that were already green).

Glad to hear that!

@nodejs-github-bot
Copy link
Collaborator

This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
console Issues and PRs related to the console subsystem. needs-ci PRs that need a full CI run. semver-minor PRs that contain new features and should be released in the next minor version. util Issues and PRs related to the built-in util module.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Colorize console.error output to make it distinguishable
8 participants