Improve error/warnings reporting

Author: deftomat

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -100,7 +100,7 @@ function printInstructions(appName, urls, useYarn) {
   console.log();
 }
 
-function createCompiler(webpack, config, appName, urls, useYarn, useTypeScript, reload) {
+function createCompiler(webpack, config, appName, urls, useYarn, useTypeScript, devSocket) {
   // "Compiler" is a low-level interface to Webpack.
   // It lets us listen to some events and provide our own custom messages.
   let compiler;
@@ -136,28 +136,15 @@ function createCompiler(webpack, config, appName, urls, useYarn, useTypeScript,
       });
     });
 
-    compiler.hooks.forkTsCheckerReceive.tap('fork-ts-checker-done', msgs => {
-      const format = (message) => `${message.file}\n${typescriptFormatter(message, true)}`;
+    compiler.hooks.forkTsCheckerReceive.tap('afterTypeScriptCheck', (diagnostics, lints) => {
+      const allMsgs = [...diagnostics, ...lints];
+      const format = message =>`${message.file}\n${typescriptFormatter(message, true)}`;
 
       tsMessagesResolver({
-        errors: msgs.filter(msg => msg.severity === 'error').map(format),
-        warnings: msgs.filter(msg => msg.severity === 'warning').map(format)
+        errors: allMsgs.filter(msg => msg.severity === 'error').map(format),
+        warnings: allMsgs.filter(msg => msg.severity === 'warning').map(format),
       });
     });
-
-    compiler.hooks.afterCompile.tap('afterCompile', async compilation => {
-      // If any errors already exist, skip this.
-      if (compilation.errors.length > 0) {
-        return;
-      }
-
-      const messages = await tsMessagesPromise;
-      compilation.errors.push(...messages.errors);
-      compilation.warnings.push(...messages.warnings);
-      if (messages.errors.length > 0 || messages.warnings.length > 0) {
-        reload();
-      }
-    });
   }
 
   // "done" event fires when Webpack has finished recompiling the bundle.
@@ -179,9 +166,20 @@ function createCompiler(webpack, config, appName, urls, useYarn, useTypeScript,
         chalk.yellow('Files successfully emitted, waiting for typecheck results...')
       );
 
-      const tsMessages = await tsMessagesPromise;
-      statsData.errors.push(...tsMessages.errors);
-      statsData.warnings.push(...tsMessages.warnings);
+      const messages = await tsMessagesPromise;
+      statsData.errors.push(...messages.errors);
+      statsData.warnings.push(...messages.warnings);
+      // Push errors and warnings into compilation result
+      // to show them after page refresh triggered by user.
+      stats.compilation.errors.push(...messages.errors);
+      stats.compilation.warnings.push(...messages.warnings);
+
+      if (messages.errors.length > 0) {
+        devSocket.errors(messages.errors);
+      } else if (messages.warnings.length > 0) {
+        devSocket.warnings(messages.warnings);
+      }
+
       process.stdout.clearLine();
       process.stdout.cursorTo(0);
     }

packages/react-dev-utils/typescriptFormatter.js

@@ -45,12 +45,15 @@ function formatter(message, useColors) {
   }
 
   const severity = hasGetters ? message.getSeverity() : message.severity;
+  const types = { diagnostic: 'TypeScript', lint: 'TSLint' };
 
   return [
-    messageColor.bold(`Type ${severity.toLowerCase()}: `) +
+    messageColor.bold(`${types[message.type]} ${severity.toLowerCase()}: `) +
       (hasGetters ? message.getContent() : message.content) +
       '  ' +
-      messageColor.underline(`TS${message.code}`),
+      messageColor.underline(
+        (message.type === 'lint' ? 'Rule: ' : 'TS') + message.code
+      ),
     '',
     frame,
   ].join(os.EOL);

packages/react-dev-utils/webpackHotDevClient.js

@@ -140,19 +140,15 @@ function handleWarnings(warnings) {
     }
   }
 
+  printWarnings();
+
   // Attempt to apply hot updates or reload.
   if (isHotUpdate) {
     tryApplyUpdates(function onSuccessfulHotUpdate() {
-      // Only print warnings if we aren't refreshing the page.
-      // Otherwise they'll disappear right away anyway.
-      printWarnings();
       // Only dismiss it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
       ErrorOverlay.dismissBuildError();
     });
-  } else {
-    // Print initial warnings immediately.
-    printWarnings();
   }
 }
 

packages/react-scripts/scripts/start.js

@@ -96,9 +96,12 @@ checkBrowsers(paths.appPath, isInteractive)
     const appName = require(paths.appPackageJson).name;
     const useTypeScript = fs.existsSync(paths.appTsConfig);
     const urls = prepareUrls(protocol, HOST, port);
-    const reloadFn = () => devServer.sockWrite(devServer.sockets, 'content-changed');
+    const devSocket = {
+      warnings: warnings => devServer.sockWrite(devServer.sockets, 'warnings', warnings),
+      errors: errors => devServer.sockWrite(devServer.sockets, 'errors', errors),
+    };
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn, useTypeScript, reloadFn);
+    const compiler = createCompiler(webpack, config, appName, urls, useYarn, useTypeScript, devSocket);
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);