Show proxy errors in the main logs

Author: isaacroldan

packages/app/src/cli/services/dev/processes/setup-dev-processes.ts

@@ -268,7 +268,7 @@ export const startProxyServer: DevProcessFunction<{
   rules: {[key: string]: string}
   localhostCert?: LocalhostCert
 }> = async ({abortSignal, stdout}, {port, rules, localhostCert}) => {
-  const {server} = await getProxyingWebServer(rules, abortSignal, localhostCert)
+  const {server} = await getProxyingWebServer(rules, abortSignal, localhostCert, stdout)
   outputInfo(
     `Proxy server started on port ${port} ${localhostCert ? `with certificate ${localhostCert.certPath}` : ''}`,
     stdout,

packages/app/src/cli/utilities/app/http-reverse-proxy.ts

@@ -1,8 +1,10 @@
 import {AbortController} from '@shopify/cli-kit/node/abort'
 import {outputDebug, outputContent, outputToken, outputWarn} from '@shopify/cli-kit/node/output'
 import Server from 'http-proxy'
+import {useConcurrentOutputContext} from '@shopify/cli-kit/node/ui/components'
 import * as http from 'http'
 import * as https from 'https'
+import {Writable} from 'stream'
 
 export interface LocalhostCert {
   key: string
@@ -14,18 +16,19 @@ export async function getProxyingWebServer(
   rules: {[key: string]: string},
   abortSignal: AbortController['signal'],
   localhostCert?: LocalhostCert,
+  stdout?: Writable,
 ) {
   // Lazy-importing it because it's CJS and we don't want it
   // to block the loading of the ESM module graph.
   const {default: httpProxy} = await import('http-proxy')
   const proxy = httpProxy.createProxy()
 
-  const requestListener = getProxyServerRequestListener(rules, proxy)
+  const requestListener = getProxyServerRequestListener(rules, proxy, stdout)
 
   const server = localhostCert ? https.createServer(localhostCert, requestListener) : http.createServer(requestListener)
 
   // Capture websocket requests and forward them to the proxy
-  server.on('upgrade', getProxyServerWebsocketUpgradeListener(rules, proxy))
+  server.on('upgrade', getProxyServerWebsocketUpgradeListener(rules, proxy, stdout))
 
   abortSignal.addEventListener('abort', () => {
     outputDebug('Closing reverse HTTP proxy')
@@ -37,12 +40,17 @@ export async function getProxyingWebServer(
 function getProxyServerWebsocketUpgradeListener(
   rules: {[key: string]: string},
   proxy: Server,
+  stdout?: Writable,
 ): (req: http.IncomingMessage, socket: import('stream').Duplex, head: Buffer) => void {
   return function (req, socket, head) {
     const target = match(rules, req, true)
     if (target) {
       return proxy.ws(req, socket, head, {target}, (err) => {
-        outputWarn(`Error forwarding websocket request: ${err}`)
+        useConcurrentOutputContext({outputPrefix: 'proxy', stripAnsi: false}, () => {
+          const error = err instanceof AggregateError && err.errors.length > 0 ? err.errors[err.errors.length - 1] : err
+          outputWarn(`Error forwarding websocket request: ${error.message}`, stdout)
+          outputWarn(`└  Unreachable target "${target}" for path: "${req.url}"`, stdout)
+        })
       })
     }
     socket.destroy()
@@ -52,12 +60,17 @@ function getProxyServerWebsocketUpgradeListener(
 function getProxyServerRequestListener(
   rules: {[key: string]: string},
   proxy: Server,
+  stdout?: Writable,
 ): http.RequestListener | undefined {
   return function (req, res) {
     const target = match(rules, req)
     if (target) {
       return proxy.web(req, res, {target}, (err) => {
-        outputWarn(`Error forwarding web request: ${err}`)
+        useConcurrentOutputContext({outputPrefix: 'proxy', stripAnsi: false}, () => {
+          const error = err instanceof AggregateError && err.errors.length > 0 ? err.errors[err.errors.length - 1] : err
+          outputWarn(`Error forwarding web request: ${error.message}`, stdout)
+          outputWarn(`└  Unreachable target "${target}" for path: "${req.url}"`, stdout)
+        })
       })
     }