Make Links rendered in the error overlay clickable [ 14017 ] (#14055)

Co-authored-by: TodorTotev <51530311+TodorTotev@users.noreply.github.com>

packages/react-dev-overlay/src/internal/container/Errors.tsx

@@ -53,6 +53,23 @@ function getErrorSignature(ev: SupportedErrorEvent): string {
   return ''
 }
 
+function makeClickable(text: string): JSX.Element[] | string {
+  // Regex Checks for http:// or https://
+  const linkRegex = /https?:\/\/[^\s/$.?#].[^\s]*/gi
+  if (!linkRegex.test(text)) return text
+  return text.split(' ').map((word, index, array) => {
+    if (linkRegex.test(word)) {
+      return (
+        <>
+          <a href={word}>{word}</a>
+          {index === array.length - 1 ? ' ' : ''}
+        </>
+      )
+    }
+    return index === array.length - 1 ? <>{word}</> : <>{word} </>
+  })
+}
+
 async function getErrorByType(
   ev: SupportedErrorEvent
 ): Promise<ReadyErrorEvent> {
@@ -242,7 +259,8 @@ export const Errors: React.FC<ErrorsProps> = function Errors({ errors }) {
               {isServerError ? 'Server Error' : 'Unhandled Runtime Error'}
             </h1>
             <p id="nextjs__container_errors_desc">
-              {activeError.error.name}: {activeError.error.message}
+              {activeError.error.name}:{' '}
+              {makeClickable(activeError.error.message)}
             </p>
             {isServerError ? (
               <div>
@@ -292,6 +310,9 @@ export const styles = css`
     margin: 0;
     margin-top: var(--size-gap-half);
   }
+  .nextjs-container-errors-header > p > a {
+    color: var(--color-ansi-red);
+  }
 
   .nextjs-container-errors-body > h5:not(:first-child) {
     margin-top: calc(var(--size-gap-double) + var(--size-gap));

test/integration/error-is-clickable/pages/first.js

@@ -0,0 +1,3 @@
+export default function Index() {
+  throw new Error('This error should be clickable. https://nextjs.org')
+}

test/integration/error-is-clickable/test/index.test.js

@@ -0,0 +1,34 @@
+/* eslint-env jest */
+
+import { findPort, killApp, launchApp } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+jest.setTimeout(1000 * 60 * 5)
+let app
+let appPort
+const appDir = join(__dirname, '..')
+
+describe('Clickable error link', () => {
+  beforeAll(async () => {
+    appPort = await findPort()
+    app = await launchApp(appDir, appPort, {
+      env: { __NEXT_TEST_WITH_DEVTOOL: 1 },
+    })
+  })
+  afterAll(() => killApp(app))
+
+  it('Shows error which is clickable and redirects', async () => {
+    const browser = await webdriver(appPort, '/first')
+
+    await browser.eval(`(function () {
+          document.querySelector("nextjs-portal")
+          .shadowRoot
+          .querySelector("#nextjs__container_errors_desc > a").click()
+          })()
+        `)
+    const url = await browser.url()
+
+    expect(url).toBe('https://nextjs.org/')
+  })
+})