[cli] Add request counter to --debug logs (#6510)

Follow up to #6508. Adds a request "counter" that increments for every API request, matching how `front` does it.

Also tweaks the `output.time()` output a bit by rendering the timestamp in gray, and with `[]` brackets. If the time diff is < 1000ms then the full milliseconds will be printed intstead of the seconds.

<img width="710" alt="Screen Shot 2021-07-22 at 2 45 39 PM" src="https://user-images.githubusercontent.com/71256/126713843-db70ed9c-4752-4ca9-8f54-313c4cb44914.png">

packages/cli/src/util/client.ts

@@ -48,6 +48,7 @@ export default class Client extends EventEmitter {
   output: Output;
   config: GlobalConfig;
   localConfig: VercelConfig;
+  private requestIdCounter: number;
 
   constructor(opts: ClientOptions) {
     super();
@@ -57,6 +58,7 @@ export default class Client extends EventEmitter {
     this.output = opts.output;
     this.config = opts.config;
     this.localConfig = opts.localConfig;
+    this.requestIdCounter = 1;
   }
 
   retry<T>(fn: RetryFunction<T>, { retries = 3, maxTimeout = Infinity } = {}) {
@@ -67,7 +69,7 @@ export default class Client extends EventEmitter {
     });
   }
 
-  async _fetch(_url: string, opts: FetchOptions = {}) {
+  _fetch(_url: string, opts: FetchOptions = {}) {
     const parsedUrl = parseUrl(_url, true);
     const apiUrl = parsedUrl.host
       ? `${parsedUrl.protocol}//${parsedUrl.host}`
@@ -104,17 +106,16 @@ export default class Client extends EventEmitter {
     }
 
     const url = `${apiUrl ? '' : this.apiUrl}${_url}`;
-    const outputTime = await this.output.time(res => {
+    const requestId = this.requestIdCounter++;
+    return this.output.time(res => {
       if (res) {
-        return `← ${res.status}: ${res.headers.get('x-vercel-id')}`;
+        return `#${requestId} ← ${res.status} ${
+          res.statusText
+        }: ${res.headers.get('x-vercel-id')}`;
       } else {
-        return `→ ${opts.method || 'GET'} ${url} ${
-          JSON.stringify(opts.body) || ''
-        }`;
+        return `#${requestId} → ${opts.method || 'GET'} ${url}`;
       }
     }, fetch(url, { ...opts, headers, body }));
-
-    return outputTime;
   }
 
   fetch(url: string, opts: { json: false }): Promise<Response>;

packages/cli/src/util/output/create-output.ts

@@ -149,7 +149,9 @@ function _createOutput({ debug: debugEnabled = false }: OutputOptions = {}) {
       const r = await promise;
       const endLabel = typeof label === 'function' ? label(r) : label;
       const duration = Date.now() - start;
-      debug(`${endLabel}: ${(duration / 1000).toFixed(2)}s`);
+      const durationPretty =
+        duration < 1000 ? `${duration}ms` : `${(duration / 1000).toFixed(2)}s`;
+      debug(`${endLabel} ${chalk.gray(`[${durationPretty}]`)}`);
       return r;
     }