feat(module-federation): improve console output for remote build errors

[bouncehead13]

Current Behavior

When running nx serve for a module federation application, if one of the static remotes fail you get output that looks as such

> nx run shell:serve:development


 NX  Starting module federation dev-server for shell with 13 remotes


 NX  Building 13 static remotes...

/<user-path>/node_modules/@nx/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js:140
                throw new Error(`Remote failed to start. A complete log can be found in: ${remoteBuildLogFile}`);
                ^

Error: Remote failed to start. A complete log can be found in: /<user-path>/.nx/workspace-data/2024-06-26T21_21_37_744Z-build.log
    at ChildProcess.<anonymous> (/<user-path>/node_modules/@nx/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js:140:23)
    at Object.onceWrapper (node:events:632:26)
    at ChildProcess.emit (node:events:517:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:292:12)

Node.js v18.20.3

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Running target serve for project shell failed

The cause of the failure is not immediately obvious. The output is cryptic and seems like a fatal error occurred, not one from the project source code. The failure could happen for many reasons such as updating a package that is not compatible with all remotes.

Expected Behavior

With the changes proposed in this PR, we get a much more improved output that's easier to read and much more obvious what happened in the project source code.

1. Replace the throw statement with a promise rejection which outputs a clean Nx Error
2. When an error is detected from webpack, output that snippet directly into the console. No need to open and scroll through the entire log file searching for the error.

 NX  Starting module federation dev-server for shell with 13 remotes


 NX  Building 13 static remotes...

m (id hint: vendors) 134 KiB [rendered] reused as split chunk (cache group: defaultVendors)
chunk (runtime: mover) 8762.js 13.4 KiB [rendered]
chunk (runtime: mover) 8798.js 14.9 KiB [rendered]
chunk (runtime: mover) 8802.js (id hint: vendors) 20.1 KiB [rendered] reused as split chunk (cache group: defaultVendors)
chunk (runtime: mover) 8930.js (id hint: vendors) 121 KiB [rendered] split chunk (cache group: defaultVendors)
chunk (runtime: mover) 8974.css, 8974.js 150 KiB (javascript) 252 bytes (consume-shared) 25.6 KiB (css/mini-extract) [rendered]
chunk (runtime: mover) 42 bytes reused as split chunk (cache group: default)
chunk (runtime: mover) 9199.js 17.4 KiB [rendered]
chunk (runtime: mover) 9227.js 7.02 KiB [rendered]
chunk (runtime: mover) 9241.js 10.7 KiB [rendered]
chunk (runtime: mover) 9279.js (id hint: vendors) 209 KiB [rendered] split chunk (cache group: defaultVendors)
chunk (runtime: mover) 9289.js (id hint: vendors) 228 KiB [rendered] reused as split chunk (cache group: defaultVendors)
chunk (runtime: mover) 9354.js 15 bytes [rendered]
chunk (runtime: mover) 9356.js 14.5 KiB [rendered]
chunk (runtime: mover) 9426.js (id hint: vendors) 26.8 KiB [rendered] reused as split chunk (cache group: defaultVendors)
chunk (runtime: mover) 9500.js 1.05 KiB [rendered]
chunk (runtime: mover) 9637.js 78.1 KiB (javascript) 84 bytes (consume-shared) [rendered] reused as split chunk (cache group: default)
chunk (runtime: mover) 9716.js (id hint: vendors) 59.5 KiB [rendered] split chunk (cache group: defaultVendors)
chunk (runtime: mover) 9807.js 16.2 KiB [rendered]
chunk (runtime: mover) 9888.js 7.42 KiB [rendered]

ERROR in ./apps/app1/src/../../../index.tsx:20:20
TS2322: Type '"foo"' is not assignable to type 'Tones'.
    18 |   return (
    19 |     <div data-component-id="Banner">
  > 20 |       <ComponentA tone={'foo'} >
       |                   ^^^^
    21 |         <div className="space-y-2">
    22 |           <div className="pr-2">

webpack compiled with 1 error (bd60f37cf54db8e4)


 NX   Remote failed to start. A complete log can be found in: /<user-path>/.nx/workspace-data/2024-06-26T21_27_40_438Z-build.log



——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Running target serve for project shell failed

Related Issue(s)

N/A

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
nx-dev	⬜️ Ignored (Inspect)	Visit Preview	Jun 26, 2024 9:42pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit eea60a3. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 6 targets

• nx affected --targets=e2e,e2e-ci --base=86412cb99a4a435cd60adc046d4ce0ffa45f10f7 --head=eea60a30f369574718371369ef46023b09056e62 --parallel=1
• nx affected --targets=lint,test,build --base=86412cb99a4a435cd60adc046d4ce0ffa45f10f7 --head=eea60a30f369574718371369ef46023b09056e62 --parallel=3
• nx run-many -t check-imports check-commit check-lock-files check-codeowners documentation --parallel=1 --no-dte
• nx-cloud record -- nx format:check --base=86412cb99a4a435cd60adc046d4ce0ffa45f10f7 --head=eea60a30f369574718371369ef46023b09056e62
• nx documentation --no-dte
• nx affected -t e2e-macos-ci --parallel=1 --base=86412cb99a4a435cd60adc046d4ce0ffa45f10f7 --head=eea60a30f369574718371369ef46023b09056e62

---

Sent with 💌 from NxCloud.