Add relationship between issuer and module to traces (#28192)

packages/next/build/compiler.ts

@@ -1,4 +1,5 @@
 import { webpack } from 'next/dist/compiled/webpack/webpack'
+import { Span } from '../telemetry/trace'
 
 export type CompilerResult = {
   errors: string[]
@@ -35,16 +36,16 @@ function closeCompiler(compiler: webpack.Compiler | webpack.MultiCompiler) {
 }
 
 export function runCompiler(
-  config: webpack.Configuration | webpack.Configuration[]
+  config: webpack.Configuration,
+  { runWebpackSpan }: { runWebpackSpan: Span }
 ): Promise<CompilerResult> {
   return new Promise((resolve, reject) => {
     const compiler = webpack(config)
-    compiler.run(
-      (
-        err: Error,
-        statsOrMultiStats: { stats: webpack.Stats[] } | webpack.Stats
-      ) => {
-        closeCompiler(compiler).then(() => {
+    compiler.run((err: Error, stats: webpack.Stats) => {
+      const webpackCloseSpan = runWebpackSpan.traceChild('webpack-close')
+      webpackCloseSpan
+        .traceAsyncFn(() => closeCompiler(compiler))
+        .then(() => {
           if (err) {
             const reason = err?.toString()
             if (reason) {
@@ -53,21 +54,11 @@ export function runCompiler(
             return reject(err)
           }
 
-          if ('stats' in statsOrMultiStats) {
-            const result: CompilerResult = statsOrMultiStats.stats.reduce(
-              generateStats,
-              { errors: [], warnings: [] }
-            )
-            return resolve(result)
-          }
-
-          const result = generateStats(
-            { errors: [], warnings: [] },
-            statsOrMultiStats
-          )
+          const result = webpackCloseSpan
+            .traceChild('webpack-generate-error-stats')
+            .traceFn(() => generateStats({ errors: [], warnings: [] }, stats))
           return resolve(result)
         })
-      }
-    )
+    })
   })
 }

packages/next/build/index.ts

@@ -570,7 +570,7 @@ export default async function build(
     let result: CompilerResult = { warnings: [], errors: [] }
     // We run client and server compilation separately to optimize for memory usage
     await runWebpackSpan.traceAsyncFn(async () => {
-      const clientResult = await runCompiler(clientConfig)
+      const clientResult = await runCompiler(clientConfig, { runWebpackSpan })
       // Fail build if clientResult contains errors
       if (clientResult.errors.length > 0) {
         result = {
@@ -578,7 +578,7 @@ export default async function build(
           errors: [...clientResult.errors],
         }
       } else {
-        const serverResult = await runCompiler(configs[1])
+        const serverResult = await runCompiler(configs[1], { runWebpackSpan })
         result = {
           warnings: [...clientResult.warnings, ...serverResult.warnings],
           errors: [...clientResult.errors, ...serverResult.errors],

packages/next/build/webpack-config.ts

@@ -894,6 +894,7 @@ export default async function getBaseWebpackConfig(
   const emacsLockfilePattern = '**/.#*'
 
   let webpackConfig: webpack.Configuration = {
+    parallelism: Number(process.env.NEXT_WEBPACK_PARALLELISM) || undefined,
     externals: !isServer
       ? // make sure importing "next" is handled gracefully for client
         // bundles in case a user imported types and it wasn't removed

packages/next/build/webpack/plugins/profiling-plugin.ts

@@ -101,9 +101,11 @@ export class ProfilingPlugin {
           return module.userRequest.split('.').pop()
         })()
 
+        const issuerModule = compilation?.moduleGraph?.getIssuer(module)
+
         const span = trace(
           `build-module${moduleType ? `-${moduleType}` : ''}`,
-          compilerSpan.id
+          issuerModule ? spans.get(issuerModule)?.id : compilerSpan.id
         )
         span.setAttribute('name', module.userRequest)
         spans.set(module, span)