Core: Add logLevel preset property to filter logging

addons/links/src/preview.test.js

@@ -17,6 +17,8 @@ jest.mock('global', () => ({
       kind: 'kind',
     })),
   },
+  window: global,
+  __STORYBOOK_LOGGER: 'warn',
   __STORYBOOK_CLIENT_API__: {
     raw: jest.fn(() => [
       {

addons/links/src/react/components/link.test.js

@@ -14,6 +14,7 @@ jest.mock('global', () => ({
       search: 'search',
     },
   },
+  window: global,
   __STORYBOOK_STORY_STORE__: {
     getSelection: jest.fn(() => ({ id: 1 })),
     fromId: jest.fn(() => ({})),

app/react/src/client/preview/index.test.ts

@@ -18,7 +18,7 @@ describe('preview', () => {
       () =>
         ({
           document: undefined,
-          window: undefined,
+          window: {},
         } as any)
     );
     const api = require('.');

lib/client-logger/package.json

@@ -28,7 +28,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "core-js": "^3.0.1"
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "loglevel": "^1.6.7"
   },
   "publishConfig": {
     "access": "public"

lib/client-logger/src/index.test.ts

@@ -1,8 +1,11 @@
 import { logger } from '.';
 
+jest.mock('loglevel', () => global.console);
+
 describe('client-logger', () => {
   const initialConsole = { ...global.console };
   beforeEach(() => {
+    global.console.trace = jest.fn();
     global.console.debug = jest.fn();
     global.console.log = jest.fn();
     global.console.info = jest.fn();

lib/client-logger/src/index.ts

@@ -1,16 +1,25 @@
-const { console } = global;
-
-/* tslint:disable: no-console */
+import { window, LOGLEVEL } from 'global';
+import console from 'loglevel';
 
 export const logger = {
+  trace: (message: any, ...rest: any[]): void => console.trace(message, ...rest),
   debug: (message: any, ...rest: any[]): void => console.debug(message, ...rest),
-  log: (message: any, ...rest: any[]): void => console.log(message, ...rest),
+  log: (message: any, ...rest: any[]): void => window.console.log(message, ...rest),
   info: (message: any, ...rest: any[]): void => console.info(message, ...rest),
   warn: (message: any, ...rest: any[]): void => console.warn(message, ...rest),
   error: (message: any, ...rest: any[]): void => console.error(message, ...rest),
 };
 
-export const pretty = (type: keyof typeof logger) => (...args: string[]) => {
+if (LOGLEVEL) {
+  console.setLevel(LOGLEVEL);
+}
+
+// eslint-disable-next-line no-underscore-dangle
+window.__STORYBOOK_LOGGER = console;
+
+export const pretty = (type: 'trace' | 'debug' | 'info' | 'warn' | 'error') => (
+  ...args: string[]
+) => {
   const argArray = [];
 
   if (args.length) {
@@ -36,8 +45,8 @@ export const pretty = (type: keyof typeof logger) => (...args: string[]) => {
   console[type].apply(console, argArray);
 };
 
+pretty.trace = pretty('trace');
 pretty.debug = pretty('debug');
-pretty.log = pretty('log');
 pretty.info = pretty('info');
 pretty.warn = pretty('warn');
 pretty.error = pretty('error');

lib/client-logger/src/typings.d.ts

@@ -0,0 +1 @@
+declare module 'global';

lib/core/src/server/common/common-preset.js

@@ -9,3 +9,5 @@ export const babel = async (_, options) => {
     presets.apply('babelDefault', babelConfig(options), options)
   );
 };
+
+export const logLevel = () => 'info';

lib/core/src/server/manager/manager-webpack.config.js

@@ -21,7 +21,7 @@ import { resolvePathInStorybookCache } from '../utils/resolve-path-in-sb-cache';
 const coreDirName = path.dirname(require.resolve('@storybook/core/package.json'));
 const context = path.join(coreDirName, '../../node_modules');
 
-export default ({
+export default async ({
   configDir,
   configType,
   docsMode,
@@ -32,8 +32,10 @@ export default ({
   cache,
   previewUrl,
   versionCheck,
+  presets,
 }) => {
   const { raw, stringified } = loadEnv();
+  const logLevel = await presets.apply('logLevel', []);
   const isProd = configType === 'PRODUCTION';
   const refsTemplate = fse.readFileSync(path.join(__dirname, 'virtualModuleRef.template.js'), {
     encoding: 'utf8',
@@ -78,6 +80,7 @@ export default ({
           version,
           dlls: dll ? ['./sb_dll/storybook_ui_dll.js'] : [],
           globals: {
+            LOGLEVEL: JSON.stringify(logLevel),
             VERSIONCHECK: JSON.stringify(versionCheck),
             DOCS_MODE: docsMode, // global docs mode
             PREVIEW_URL: previewUrl, // global preview URL

lib/core/src/server/preview/iframe-webpack.config.js

@@ -39,6 +39,7 @@ export default async ({
   presets,
 }) => {
   const dlls = await presets.apply('webpackDlls', []);
+  const logLevel = await presets.apply('logLevel', []);
   const { raw, stringified } = loadEnv({ production: true });
   const babelLoader = createBabelLoader(babelOptions);
   const isProd = configType === 'PRODUCTION';
@@ -107,7 +108,9 @@ export default async ({
           files,
           options,
           version: packageJson.version,
-          globals: {},
+          globals: {
+            LOGLEVEL: JSON.stringify(logLevel),
+          },
           headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
           dlls,
           bodyHtmlSnippet: getPreviewBodyHtml(configDir, process.env),

yarn.lock

@@ -19631,7 +19631,7 @@ loglevel-plugin-prefix@^0.8.4:
   resolved "https://registry.yarnpkg.com/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz#2fe0e05f1a820317d98d8c123e634c1bd84ff644"
   integrity sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g==
 
-loglevel@^1.4.1, loglevel@^1.6.4, loglevel@^1.6.6:
+loglevel@^1.4.1, loglevel@^1.6.4, loglevel@^1.6.6, loglevel@^1.6.7:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
   integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==