Error thrown to opt out of server rendering inside Suspense boundary is logged

[foxable]

Link to the code that reproduces this issue

https://github.com/foxable/reproduction-next-suspense-server-error

To Reproduce

1. Start the application in development mode
2. Open http://localhost:3000/

Current vs. Expected behavior

I'm using @tanstack/react-query to perform client-side requests (these requests must be client-side in my case). By default, queries implemented by useSuspenseQuery are also executed on the server, which I want to prevent.

Following the React Suspense documentation, I opted out of server rendering inside a Suspense boundary by throwing an error on the server.

I expected this error not to be logged by Next.js, but it does:

 ⨯ src/app/page.tsx (10:15) @ queryFn
 ⨯ Error: Should only run on client
    at queryFn (./src/app/page.tsx:14:23)
    at Home (./src/app/page.tsx:8:93)
digest: "3812373436"
   8 |     queryFn: async () => {
   9 |       if (typeof window === "undefined") {
> 10 |         throw new Error("Should only run on client");
     |               ^
  11 |       }
  12 |
  13 |       return new Promise((resolve) =>

Unfortunately, this adds a lot of noise to the logs for something which should not be considered an error.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sat, 27 Jul 2024 16:49:55 +0000
  Available memory (MB): 31796
  Available CPU cores: 16
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.22
  pnpm: 9.6.0
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

No response

[samcx]

@foxable Can you clarify what kind of "noise" you are seeing?

[foxable]

@samcx Sure, the noise comes from the stack traces being logged on the Next.js server. I included an example in my initial post.

In my application, I'm using a lot of suspense queries (basically on every page). So there will appear a lot of errors from suspense queries which are intentionally skipped on the server. While I can use a descriptive error message for these, the logs will still be full of them, which makes it hard to find actual errors.

It would be helpful if Next.js either did not log these errors at all, because they are expected and follow specified behavior for React Suspense. An alternative could be to allow defining filters for errors to be logged by Next.js, so I would be able to define a filter rule for the expected error. But I'm open for other suggestions as well.

[samcx]

@foxable These stack traces have been improving a lot (I think this improvements come from React).

On the latest canary and React 19, it's a lot more descriptive.

At the moment, we only have flags for adding logging and completely hiding it → https://nextjs.org/docs/app/api-reference/next-config-js/logging.

[samcx]

I opted out of server rendering inside a Suspense boundary by throwing an error on the server. I expected this error not to be logged by Next.js, but it does:

You haven't opted out of the server here—a Client Component is still "present" on the server, but using the use client directive allows you to additionally access the client. A Client Component or Server Component are essentially both React Server Components.

The Suspense docs are just showing a way to opt out of "rendering" the entire component, but the code is still running on the server (executes till you get to the throw).

I'll be moving this out of issues into discussions as this is technically a feature request, not a present issue in Next.js.