Storybook: Core: Add option to remove logs from the console

[NickVlasov]

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

[NickVlasov]

I see that it's possible to filter these logs(https://github.com/storybookjs/storybook/issues/252#issuecomment-389834714). But maybe storybook has its own configuration for it?

[shilman]

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

[stale[bot]]

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!

[dmaksimovic]

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]

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.

[NickVlasov]

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]

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]

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

[uhoh-itsmaciek]

@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]

Please let us get rid of these logs! :)

[ndelangen]

@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]

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

[ndelangen]

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

[Moonachi]

Okay. Thanks

[garrettmaring]

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[bot]]

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]

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.

[shilman]

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]

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]

I think that's a question for @ndelangen

[ndelangen]

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

[niedzielski]

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]

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.