Skip to content

Commit

Permalink
Fix missing error message in terminal for bound args serialization er…
Browse files Browse the repository at this point in the history
…ror (#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).
  • Loading branch information
unstubbable authored Dec 4, 2024
1 parent eb4cd43 commit 432d119
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 14 deletions.
25 changes: 12 additions & 13 deletions packages/next/src/server/app-render/encryption.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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 () => {
Expand Down

0 comments on commit 432d119

Please sign in to comment.