Fix missing error message in terminal for bound args serialization error (#73508)

This is a small follow-up to #73471. The error message got lost when
assigning the custom stack (the message is usually also part of the
stack). This was only noticeable in the Terminal though; the dev overlay
showed the error correctly. We're now adding assertions on the CLI
output to the e2e test.

In addition, the custom stack slicing is replaced with
`Error.captureStackTrace` (h/t @eps1lon).

Author: unstubbable

packages/next/src/server/app-render/encryption.ts

@@ -73,33 +73,32 @@ async function encodeActionBoundArg(actionId: string, arg: string) {
 export async function encryptActionBoundArgs(actionId: string, args: any[]) {
   const { clientModules } = getClientReferenceManifestForRsc()
 
-  // An error stack that's created here looks like this:
-  // Error:
-  //     at encryptActionBoundArg
-  //     at <actual userland call site>
-  const stack = new Error().stack!.split('\n').slice(2).join('\n')
+  // Create an error before any asynchrounous calls, to capture the original
+  // call stack in case we need it when the serialization errors.
+  const error = new Error()
+  Error.captureStackTrace(error, encryptActionBoundArgs)
 
-  let error: Error | undefined
+  let didCatchError = false
 
   // Using Flight to serialize the args into a string.
   const serialized = await streamToString(
     renderToReadableStream(args, clientModules, {
       onError(err) {
         // We're only reporting one error at a time, starting with the first.
-        if (error) {
+        if (didCatchError) {
           return
         }
 
-        // Use the original error message...
-        error = err instanceof Error ? err : new Error(String(err))
-        // ...and attach the previously created stack, because err.stack is a
-        // useless Flight Server call stack.
-        error.stack = stack
+        didCatchError = true
+
+        // Use the original error message together with the previously created
+        // stack, because err.stack is a useless Flight Server call stack.
+        error.message = err instanceof Error ? err.message : String(err)
       },
     })
   )
 
-  if (error) {
+  if (didCatchError) {
     if (process.env.NODE_ENV === 'development') {
       // Logging the error is needed for server functions that are passed to the
       // client where the decryption is not done during rendering. Console

test/e2e/app-dir/use-cache-close-over-function/use-cache-close-over-function.test.ts

@@ -7,7 +7,7 @@ import {
 } from 'next-test-utils'
 
 describe('use-cache-close-over-function', () => {
-  const { next, isNextDev, skipped } = nextTestSetup({
+  const { next, isNextDev, isTurbopack, skipped } = nextTestSetup({
     files: __dirname,
     skipDeployment: true,
     skipStart: process.env.NEXT_TEST_MODE !== 'dev',
@@ -43,6 +43,21 @@ describe('use-cache-close-over-function', () => {
           10 |     return Math.random() + fn()
           11 |   }"
       `)
+
+      if (isTurbopack) {
+        expect(next.cliOutput).toInclude(`
+ ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
+  [function fn]
+   ^^^^^^^^^^^
+    at createCachedFn (./app/client/page.tsx:8:3)`)
+      } else {
+        // TODO(veil): line:column is wrong with Webpack.
+        expect(next.cliOutput).toInclude(`
+ ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
+  [function fn]
+   ^^^^^^^^^^^
+    at createCachedFn (./app/client/page.tsx:25:132)`)
+      }
     })
 
     it('should show the error overlay for server-side usage', async () => {
@@ -70,6 +85,21 @@ describe('use-cache-close-over-function', () => {
           8 |     return Math.random() + fn()
           9 |   }"
       `)
+
+      if (isTurbopack) {
+        expect(next.cliOutput).toInclude(`
+ ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
+  [function fn]
+   ^^^^^^^^^^^
+    at createCachedFn (./app/server/page.tsx:6:3)`)
+      } else {
+        // TODO(veil): line:column is wrong with Webpack.
+        expect(next.cliOutput).toInclude(`
+ ⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
+  [function fn]
+   ^^^^^^^^^^^
+    at createCachedFn (./app/server/page.tsx:23:132)`)
+      }
     })
   } else {
     it('should fail the build with an error', async () => {