Hydration error link is appended multiple times in app-dir (#44741)

It looks like we get the same error each time when React is retrying. This adds a check so the link is only appended the first time.

Before
![image](https://user-images.githubusercontent.com/25056922/211514056-d34ab8bc-65ec-42ea-a891-ca1ce5fd07de.png)

After
![image](https://user-images.githubusercontent.com/25056922/211514266-181b8fd4-cc72-42c9-b3fb-53cb6a326fee.png)

Fixes NEXT-356

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-error-handler.ts

@@ -54,7 +54,12 @@ if (typeof window !== 'undefined') {
       return
     }
 
-    if (isHydrationError(error)) {
+    if (
+      isHydrationError(error) &&
+      !error.message.includes(
+        'https://nextjs.org/docs/messages/react-hydration-error'
+      )
+    ) {
       error.message += `\n\nSee more info here: https://nextjs.org/docs/messages/react-hydration-error`
     }
 

test/development/acceptance-app/ReactRefreshLogBox.test.ts

@@ -1341,4 +1341,24 @@ describe('ReactRefreshLogBox app', () => {
 
     await cleanup()
   })
+
+  test('Hydration errors should get error link', async () => {
+    const { session, browser, cleanup } = await sandbox(next)
+
+    await session.patch(
+      'app/page.js',
+      `
+    "use client"
+    export default function Page() {
+      return <p>{typeof window === 'undefined' ? "hello" : "world"}</p>
+    }
+    `
+    )
+
+    await browser.refresh()
+    await session.waitForAndOpenRuntimeError()
+    expect(await session.getRedboxDescription()).toMatchSnapshot()
+
+    await cleanup()
+  })
 })

test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ReactRefreshLogBox app Hydration errors should get error link 1`] = `
+"Error: Text content does not match server-rendered HTML.
+
+See more info here: https://nextjs.org/docs/messages/react-hydration-error"
+`;
+
 exports[`ReactRefreshLogBox app Should not show __webpack_exports__ when exporting anonymous arrow function 1`] = `
 "index.js (4:16) @ default