Core: Add option to remove logs from the console #8461

mykolavlasov · 2019-10-17T15:52:33Z

Hi!
I have added a storybook to my project but there are a lot of internal storybook logs in the browser console. Are there any ways to remove it? I have noticed that these logs produced by @storybook/client-logger but I didn't find how to disable it/provide some config to change it

Used npx -p @storybook/cli sb init --type react to add storybook to my project.
Packages which have been installed during setup

"@storybook/addon-actions": "^5.2.4",
 "@storybook/addon-links": "^5.2.4",
 "@storybook/addons": "^5.2.4",
 "@storybook/react": "^5.2.4",

Screenshot: https://monosnap.com/file/RCHP51RZvcZeIf6pGJH4UP2wdKfc6G

The text was updated successfully, but these errors were encountered:

mykolavlasov · 2019-10-17T16:25:53Z

I see that it's possible to filter these logs(#252 (comment)). But maybe storybook has its own configuration for it?

shilman · 2019-10-17T16:30:22Z

AFAIK the recommended approach is to use the browser's filter function

stale · 2019-11-07T16:30:37Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

arthakdoo · 2019-11-28T15:59:24Z

I would prefer to have this filtered out by storybook, because regular expressions are difficult for some users, especially the lookaheads. Also, there's always some message that sneaks into the log anyway because the regex didn't cover it. Lastly, it looks bad for a framework like this to print out random console logs by default and leave users deal with it. --clientLogLevel=silent would be sufficient in the CLI.

etoxin · 2019-12-13T04:16:00Z

I think the production version of this should have no logs output to the console. If run in dev mode when developing an add-on it should output logs.

mykolavlasov · 2019-12-13T10:35:36Z

I think the production version of this should have no logs output to the console. If run in dev mode when developing an add-on it should output logs.

I think that the main purpose of the storybook is to develop simple and reusable components, not add-ons. And when you are developing components, you usually don't need internal storybook logs to cause it can litter console (a lot of developers are using console as their main debugger tool).
I think it could be a good storybook CLI feature to remove these logs.
And no, these logs remain in production mode - https://react95.github.io/React95/?path=/story/alert--default

etoxin · 2019-12-16T04:46:40Z

When I mean "dev mode" I mean developing storybooks features. Not developing with Storybook like most of us. End users should see no logs.

shilman · 2019-12-16T08:05:16Z

What's wrong with disabling verbose logging in the browser? Storybook is a dev tool. It doesn't run in your app.

msakrejda · 2020-01-17T02:45:12Z

@shilman one of the great uses of Storybook is developing components in isolation--it's not unreasonable to want logs from your components as you are building it, but not logs from the harness.

whenmoon · 2020-02-05T09:39:47Z

Please let us get rid of these logs! :)

ndelangen · 2020-02-05T18:02:52Z

@shilman I propose we add something global that enables and disables logging in the browser from storybook.

The setting could be initiated from env-var or from url.

We want to have the ability to flick this setting ON for debugging people's build storybook.

Moonachi · 2020-02-10T00:45:40Z

I don't exactly understand. Is there any way to remove the console.log yet?

ndelangen · 2020-02-11T16:46:46Z

No sorry, I was commenting on how we should implement this.

Moonachi · 2020-02-12T07:14:18Z

Okay. Thanks

garrettmaring · 2020-03-16T18:01:48Z

As @shilman suggests, one can manage these logs in the browser console. However, I think Storybook should provide a way to config these log levels. The info logs provide little to no value to the developer.

Providing a logLevel option would be very useful for developers not working on Storybook itself. In my opinion, all libraries that log should expose logLevel options to the end user.

stale · 2020-04-07T05:07:19Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

ccpu · 2020-04-07T05:25:51Z

I don't like this logs too, so irrelevant during development, for now, I m removing the related code from logger file to prevent this messages, but I have to do this every time installing new package.

Storybook seems to be our primary stackless development workflow. Move the `storybook` script to `start` to support the standard `npm start` command expected in every NPM repo. Debugging Storybook tooling is the rare case that informational messages (perhaps even more verbose than default) are wanted. Feature development is the common workflow that should be optimized for. Storybook's design philosophy seems to favor incredibly verbose output by default, both for the CLI and the [browser console]. This is at odds with Unix's rule of silence, sometimes expressed as "silence is golden." That is, only report warnings and errors unless told otherwise. This patch reduces the verbosity of the Storybook [CLIs] as able and its setup script: - Only report warnings and errors while building. - Suppress build informational output when launching. - Only report curl errors, not progress. [browser console]: storybookjs/storybook#8461 [CLIs]: https://storybook.js.org/docs/configurations/cli-options/ Change-Id: Ie38ae14e304f7f88f445c0c0fb3f2fbba49d134a

* Update Vector from branch 'master' to 14abeb0c2f9583772e5ec2134a2c2de97c99e165 - [dev][Storybook] move to start script; report errors not status Storybook seems to be our primary stackless development workflow. Move the `storybook` script to `start` to support the standard `npm start` command expected in every NPM repo. Debugging Storybook tooling is the rare case that informational messages (perhaps even more verbose than default) are wanted. Feature development is the common workflow that should be optimized for. Storybook's design philosophy seems to favor incredibly verbose output by default, both for the CLI and the [browser console]. This is at odds with Unix's rule of silence, sometimes expressed as "silence is golden." That is, only report warnings and errors unless told otherwise. This patch reduces the verbosity of the Storybook [CLIs] as able and its setup script: - Only report warnings and errors while building. - Suppress build informational output when launching. - Only report curl errors, not progress. [browser console]: storybookjs/storybook#8461 [CLIs]: https://storybook.js.org/docs/configurations/cli-options/ Change-Id: Ie38ae14e304f7f88f445c0c0fb3f2fbba49d134a

shilman · 2020-06-04T01:36:14Z

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.21 containing PR #10370 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

niedzielski · 2020-06-04T02:14:07Z

Thank you, @shilman! I do not see the Storybook info logs \o/

I had a quick question about HMR logs as those still appear:

[HMR] connected client.js:95
[HMR] bundle rebuilding client.js:241
[HMR] bundle rebuilt in 793ms client.js:250
[HMR] Checking for updates on the server... process-update.js:51
[HMR] Updated modules: process-update.js:125
[HMR]  - ./node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-0!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??ref--10-2!./node_modules/vue-loader/lib??vue-loader-options!./src/components/button/Button.vue?vue&type=style&index=0&lang=less& process-update.js:127

Do you know if this setting should have effect or is that new ticket? I tried the following:

module.exports = {
	...,

	// Only report warnings and errors in the browser console.
	logLevel: 'warn',

	webpackFinal( config ) {
		config.stats = 'errors-warnings';
		// Try to suppress HMR messaging.
		config.devServer = {
			...config.devServer,
			clientLogLevel: 'warning',
			overlay: { warnings: true, errors: true },
			noInfo: true,
			progress: false,
			stats: 'errors-warnings'
		};
		return config;
	}
};

Thank you!!

shilman · 2020-06-04T02:43:42Z

I think that's a question for @ndelangen

ndelangen · 2020-06-08T10:23:38Z

I think we could pass down the logLevel down to clientLogLevel. I'd take a PR adding that @niedzielski

niedzielski · 2020-06-09T04:01:37Z

Thank you, @ndelangen and @shilman! I hope you don't mind but I've used --quiet instead of --loglevel as the former seemed to map better.

shilman · 2020-06-11T13:07:51Z

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.24 containing PR #11087 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

shilman added core question / support labels Oct 17, 2019

stale bot added the inactive label Nov 7, 2019

stale bot removed the inactive label Nov 28, 2019

shilman closed this as completed Dec 16, 2019

shilman added the has workaround label Jan 17, 2020

shilman mentioned this issue Feb 5, 2020

Something are being displayed on the console #9758

Closed

shilman added feature request and removed question / support labels Mar 16, 2020

shilman reopened this Mar 16, 2020

shilman changed the title ~~Is it possible to remove storybook logs in browser console?~~ Core: Add option to remove logs from the console Mar 16, 2020

shilman assigned ndelangen Mar 16, 2020

stale bot added the inactive label Apr 7, 2020

stale bot removed the inactive label Apr 7, 2020

shilman added the todo label Apr 7, 2020

ndelangen mentioned this issue Apr 9, 2020

Core: Add logLevel preset property to filter logging #10370

Merged

shilman closed this as completed Jun 4, 2020

niedzielski mentioned this issue Jun 9, 2020

CLI: Pass --quiet to disable HMR logging in browser console #11087

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core: Add option to remove logs from the console #8461

Core: Add option to remove logs from the console #8461

mykolavlasov commented Oct 17, 2019

mykolavlasov commented Oct 17, 2019

shilman commented Oct 17, 2019

stale bot commented Nov 7, 2019

arthakdoo commented Nov 28, 2019

etoxin commented Dec 13, 2019

mykolavlasov commented Dec 13, 2019

etoxin commented Dec 16, 2019 •

edited

shilman commented Dec 16, 2019

msakrejda commented Jan 17, 2020

whenmoon commented Feb 5, 2020

ndelangen commented Feb 5, 2020 •

edited

Moonachi commented Feb 10, 2020

ndelangen commented Feb 11, 2020

Moonachi commented Feb 12, 2020

garrettmaring commented Mar 16, 2020

stale bot commented Apr 7, 2020

ccpu commented Apr 7, 2020

shilman commented Jun 4, 2020

niedzielski commented Jun 4, 2020

shilman commented Jun 4, 2020

ndelangen commented Jun 8, 2020

niedzielski commented Jun 9, 2020

shilman commented Jun 11, 2020

Core: Add option to remove logs from the console #8461

Core: Add option to remove logs from the console #8461

Comments

mykolavlasov commented Oct 17, 2019

mykolavlasov commented Oct 17, 2019

shilman commented Oct 17, 2019

stale bot commented Nov 7, 2019

arthakdoo commented Nov 28, 2019

etoxin commented Dec 13, 2019

mykolavlasov commented Dec 13, 2019

etoxin commented Dec 16, 2019 • edited

shilman commented Dec 16, 2019

msakrejda commented Jan 17, 2020

whenmoon commented Feb 5, 2020

ndelangen commented Feb 5, 2020 • edited

Moonachi commented Feb 10, 2020

ndelangen commented Feb 11, 2020

Moonachi commented Feb 12, 2020

garrettmaring commented Mar 16, 2020

stale bot commented Apr 7, 2020

ccpu commented Apr 7, 2020

shilman commented Jun 4, 2020

niedzielski commented Jun 4, 2020

shilman commented Jun 4, 2020

ndelangen commented Jun 8, 2020

niedzielski commented Jun 9, 2020

shilman commented Jun 11, 2020

etoxin commented Dec 16, 2019 •

edited

ndelangen commented Feb 5, 2020 •

edited