Repository: next.js
Issue: Next Produces Client-Side Stack Traces With Server-Side Code
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Not relevant, but ...

    Operating System:
      Platform: linux
      Arch: x64
      Version: #85-Ubuntu SMP Fri Jul 7 15:25:09 UTC 2023
    Binaries:
      Node: 20.3.0
      npm: 9.6.7
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.16
      eslint-config-next: 13.4.16
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue or a replay of the bug

Please see repro: it's so simple no repo is needed

### To Reproduce

I originally filed this as a bug against Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=1453907), because I had no idea Next was causing it.  The following repro steps are taken from there:

1. npx create-next-app@latest
2. Open src/pages/index.tsx in the text editor and insert `throw new Error()` in the beginning of 'function Home(...)'.
3. Run the server with `npm run dev`.
4. Open Chrome, open devtools, navigate to localhost:3000.

In DevTools console, I then see the following error stack:

Uncaught Error
    at Home (webpack-internal:///./src/pages/index.tsx:22:11)
    at renderWithHooks (/usr/.../node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/usr/.../node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/usr/.../node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/usr/.../node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    ...

When I click on any of the file links, they do not open in DevTools; instead, they try to open a tab in Chrome.


### Describe the Bug

When you click on a link in a stack trace (in a browser's developer tools console), you expect to be taken to the line responsible.  But (apparently) Next includes server-side code in the stack trace (that it gives to the client), resulting in stack trace lines/links that go nowhere.

Here's more from the Chrome ticket:

> Upon further investigation, it looks like the error happens during server side rendering and the web server forwards the error (including the stack!) to the front-end to throw the error in the front-end (with the server stack). Since DevTools has not seen the server side files, it cannot show them, and instead tries to open the server-provided URL as a new tab in the browser.
> 
> Note that Firefox does not show the server error stack because Error.stack does not seem to be writable there.
> 
> There does not seem to be much DevTools can do there - we do not support server debugging.
> 
> 
> If there's not much the dev tools can do, wouldn't it be better to not provide links at all, instead of providing broken links?
> 
> 
> The linkification of strings that look like stack traces is best effort in DevTools. We don't know for sure whether the links will be reliable or not.
> 
> Simon, Jaro, WDYT about only linkifying URLs for which we already have a UISourceCode?
> 
> 
> Well, we do not know if the links are broken. If React provided valid links, it would be useful if they were clickable. I tend to think that providing broken links is an issue on React's side.
> 
> 
> The problem here is that part of the `Error.stack` content contains a stack trace from the Node.js server, while you are debugging the React client (in the browser).
> 
> 
> Our recommendation is to open a bug against next.js - they should not provide broken links to DevTools.
> 
> For completeness, here is the next.js code that forces server side error stacks on client side exceptions:
> https://github.com/vercel/next.js/blob/37c40b79c5232775bbc971dc3a6e91daeb3aa401/packages/react-dev-overlay/src/internal/helpers/nodeStackFrames.ts#L49

### Expected Behavior

Error stacks thrown by the client should not contain server-side code.

### Which browser are you using? (if relevant)

Chrome 

### How are you deploying your application? (if relevant)

n/a