fix: make dev-server error message appear only once when CT is not co…

…nfigured (cypress-io#17090)

packages/server-ct/index.ts

@@ -4,13 +4,16 @@ import openProject from '@packages/server/lib/open_project'
 import chalk from 'chalk'
 import human from 'human-interval'
 import _ from 'lodash'
+import Debug from 'debug'
 
 export * from './src/project-ct'
 
 export * from './src/server-ct'
 
 export * from './src/socket-ct'
 
+const debug = Debug('cypress:server-ct:index')
+
 const Updater = require('@packages/server/lib/updater')
 
 const registerCheckForUpdates = () => {
@@ -33,6 +36,8 @@ export const start = async (projectRoot: string, args: Record<string, any>) => {
     registerCheckForUpdates()
   }
 
+  debug('start server-ct on ', projectRoot)
+
   // add chrome as a default browser if none has been specified
   return browsers.ensureAndGetByNameOrPath(args.browser)
   .then((browser: Cypress.Browser) => {
@@ -47,8 +52,12 @@ export const start = async (projectRoot: string, args: Record<string, any>) => {
       browsers: [browser],
     }
 
+    debug('create project')
+
     return openProject.create(projectRoot, args, options)
     .then((project) => {
+      debug('launch project')
+
       return openProject.launch(browser, spec, {
         onBrowserClose: () => {
           console.log(chalk.blue('BROWSER EXITED SAFELY'))

packages/server/lib/errors.js

@@ -965,6 +965,21 @@ const getMsgByType = function (type, arg1 = {}, arg2, arg3) {
 
         ${chalk.yellow(arg2)}
       `
+    case 'CT_NO_DEV_START_EVENT':
+      return stripIndent`\
+        To run component-testing, cypress needs the \`dev-server:start\` event. 
+
+        Implement it by adding a \`on('dev-server:start', () => startDevServer())\` call in your pluginsFile.
+        ${arg1 ?
+        stripIndent`\
+        You can find the \'pluginsFile\' at the following path:
+
+        ${arg1}
+        ` : ''}
+        Learn how to set up component testing:
+
+        https://on.cypress.io/component-testing
+        `
     default:
   }
 }

packages/server/lib/modes/interactive-ct.js

@@ -1,5 +1,6 @@
 const serverCt = require('@packages/server-ct')
 const { getBrowsers } = require('../browsers/utils')
+const errors = require('../errors')
 
 const browsersForCtInteractive = ['chrome', 'chromium', 'edge', 'electron', 'firefox']
 
@@ -22,7 +23,14 @@ const run = async (options) => {
 
   options.browser = options.browser || returnDefaultBrowser(browsersForCtInteractive, installedBrowsers)
 
-  return serverCt.start(options.projectRoot, options)
+  return serverCt.start(options.projectRoot, options).catch((e) => {
+    // Usually this kind of error management is doen inside cypress.js start
+    // But here we bypassed this since we don't use the window of the gui
+    // Handle errors here to avoid multiple errors appearing.
+    return errors.logException(e).then(() => {
+      process.exit(1)
+    })
+  })
 }
 
 module.exports = {

packages/server/lib/plugins/dev-server.js

@@ -3,6 +3,7 @@ require('../cwd')
 const EE = require('events')
 const debug = require('debug')('cypress:ct:dev-server')
 const plugins = require('../plugins')
+const errors = require('../errors')
 
 const baseEmitter = new EE()
 
@@ -32,8 +33,7 @@ const API = {
 
   start ({ specs, config }) {
     if (!plugins.has('dev-server:start')) {
-      // TODO: add link to the documentation in the error message
-      throw new Error('It is required to register dev-server plugin that implements `dev-server:start` event for component testing.')
+      return errors.throw('CT_NO_DEV_START_EVENT', config.pluginsFile)
     }
 
     return plugins.execute('dev-server:start', { specs, config })