Make Links rendered in the error overlay clickable [ 14017 ] (#14055)
Co-authored-by: TodorTotev <51530311+TodorTotev@users.noreply.github.com>
This commit is contained in:
parent
edbb32cac9
commit
23eb267499
3 changed files with 59 additions and 1 deletions
|
@ -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));
|
||||
|
|
3
test/integration/error-is-clickable/pages/first.js
Normal file
3
test/integration/error-is-clickable/pages/first.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
export default function Index() {
|
||||
throw new Error('This error should be clickable. https://nextjs.org')
|
||||
}
|
34
test/integration/error-is-clickable/test/index.test.js
Normal file
34
test/integration/error-is-clickable/test/index.test.js
Normal file
|
@ -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/')
|
||||
})
|
||||
})
|
Loading…
Reference in a new issue