Matthew Hancock 92eb1fa701
feat(module-federation): improve console output for remote build errors (#26711)
## 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

Co-authored-by: Hancock, Matthew <Matthew_Hancock@comcast.com>
2024-07-24 09:37:18 +01:00
..

Nx - Smart Monorepos · Fast CI

{{links}}


Nx: Smart Monorepos · Fast CI

Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.

This package is an Angular plugin for Nx.

{{content}}