Skip to content

[errors] use console style for ErrorDecoder #8291

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rickhanlonii wants to merge 1 commit into
base: main
Choose a base branch
from
+55 −8
Open

[errors] use console style for ErrorDecoder #8291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 42 additions & 5 deletions src/components/MDX/ErrorDecoder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import {useEffect, useState} from 'react';
import {useErrorDecoderParams} from '../ErrorDecoderContext';
import cn from 'classnames';
import {IconError} from '../Icon/IconError';

function replaceArgs(
msg: string,
Expand Down Expand Up @@ -108,12 +109,48 @@ export default function ErrorDecoder() {
}, [errorCode, hasParams, errorMessage]);

return (
<code
<div
className={cn(
'whitespace-pre-line block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg',
'console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg mt-5',
isReady ? 'opacity-100' : 'opacity-0'
)}>
<b>{message}</b>
</code>
)}
translate="no"
dir="ltr">
<div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
<div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
<div
className="bg-gray-300 dark:bg-gray-70"
style={{width: '15px', height: '17px'}}
/>
</div>
<div className="flex text-sm px-4">
<div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
Console
</div>
<div className="px-4 py-2 flex">
<div
className="me-2 bg-gray-300 dark:bg-gray-70"
style={{width: '60px', height: '17px'}}
/>
<div
className="me-2 hidden md:block bg-gray-300 dark:bg-gray-70"
style={{width: '60px', height: '17px'}}
/>
<div
className="hidden md:block bg-gray-300 dark:bg-gray-70"
style={{width: '60px', height: '17px'}}
/>
</div>
</div>
</div>
<div className="grid grid-cols-1 divide-y divide-gray-300 dark:divide-gray-70 text-base">
<div className="ps-4 pe-2 pt-1 pb-2 grid grid-cols-[18px_auto] font-mono rounded-b-md bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5">
<IconError className="self-start mt-1.5 text-[.7rem] w-6" />
<div className="px-2 pt-1 whitespace-break-spaces text-code leading-tight">
{message}
</div>
</div>
</div>
</div>
);
}
16 changes: 13 additions & 3 deletions src/pages/errors/[errorCode].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,33 @@ interface ErrorDecoderProps {
content: string;
toc: string;
meta: any;
isCustom: boolean;
}

export default function ErrorDecoderPage({
errorMessage,
errorCode,
content,
toc,
isCustom,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const parsedContent = useMemo<React.ReactNode>(
() => JSON.parse(content, reviveNodeOnClient),
[content]
);
const parsedToc = useMemo(
() => (isCustom ? JSON.parse(toc, reviveNodeOnClient) : []),
[toc, isCustom]
);

return (
<ErrorDecoderContext value={{errorMessage, errorCode}}>
<Page
toc={[]}
toc={parsedToc}
meta={{
title: errorCode
? `Minified React error #${errorCode}`
: 'Minified Error Decoder',
? `React error #${errorCode}`
: 'React Error Decoder',
}}
routeTree={sidebarLearn as RouteItem}
section="unknown">
Expand Down Expand Up @@ -117,11 +124,13 @@ export const getStaticProps: GetStaticProps<ErrorDecoderProps> = async ({
// Read MDX from the file.
let path = params?.errorCode || 'index';
let mdx;
let isCustom = true;
try {
mdx = fs.readFileSync(rootDir + '/' + path + '.md', 'utf8');
} catch {
// if [errorCode].md is not found, fallback to generic.md
mdx = fs.readFileSync(rootDir + '/generic.md', 'utf8');
isCustom = false;
}

const {content, toc, meta} = await compileMDX(mdx, path, {code, errorCodes});
Expand All @@ -131,6 +140,7 @@ export const getStaticProps: GetStaticProps<ErrorDecoderProps> = async ({
content,
toc,
meta,
isCustom,
errorCode: code,
errorMessage: code ? errorCodes[code] : null,
},
Expand Down