Feat: error-decoder

src/components/ErrorDecoder.tsx

@@ -0,0 +1,94 @@
+import {useMemo} from 'react';
+import {useRouter} from 'next/router';
+
+function replaceArgs(
+  msg: string,
+  argList: Array<string | undefined>,
+  replacer = '[missing argument]'
+): string {
+  let argIdx = 0;
+  return msg.replace(/%s/g, function () {
+    const arg = argList[argIdx++];
+    // arg can be an empty string: ?invariant=377&args[0]=&args[1]=count
+    return arg === undefined || arg === '' ? replacer : arg;
+  });
+}
+
+// When the message contains a URL (like https://fb.me/react-refs-must-have-owner),
+// make it a clickable link.
+function urlify(str: string): React.ReactNode {
+  const urlRegex = /(https:\/\/fb\.me\/[a-z\-]+)/g;
+
+  const segments = str.split(urlRegex);
+
+  return segments.map((message, i) => {
+    if (i % 2 === 1) {
+      return (
+        <a key={i} target="_blank" rel="noopener noreferrer" href={message}>
+          {message}
+        </a>
+      );
+    }
+    return message;
+  });
+}
+
+// `?invariant=123&args[]=foo&args[]=bar`
+// or `// ?invariant=123&args[0]=foo&args[1]=bar`
+function parseQueryString(
+  query: ReturnType<typeof useRouter>['query']
+): Array<string | undefined> {
+  const args: Array<string | undefined> = [];
+
+  Object.entries(query).forEach(([key, value]) => {
+    if (key.startsWith('args[')) {
+      args.push(Array.isArray(value) ? value[0] : value);
+    }
+  });
+
+  return args;
+}
+
+interface ErrorDecoderProps {
+  errorMessages: string | null;
+}
+
+export default function ErrorDecoder({errorMessages}: ErrorDecoderProps) {
+  const {isReady, query} = useRouter();
+
+  const msg = useMemo(() => {
+    if (!errorMessages?.includes('%s')) {
+      return errorMessages;
+    }
+
+    if (typeof window !== 'undefined' && isReady) {
+      return replaceArgs(
+        errorMessages,
+        parseQueryString(query),
+        '[missing argument]'
+      );
+    }
+
+    return replaceArgs(errorMessages, [], '[parsing argument]');
+  }, [errorMessages, isReady, query]);
+
+  if (!msg) {
+    return (
+      <p>
+        When you encounter an error, you{"'"}ll receive a link to this page for
+        that specific error and we{"'"}ll show you the full error text.
+      </p>
+    );
+  }
+
+  return (
+    <div>
+      <p>
+        <b>The full text of the error you just encountered is:</b>
+      </p>
+      <code className="block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg">
+        <b>{urlify(msg)}</b>
+      </code>
+    </div>
+  );
+}

src/content/index.md

@@ -4,4 +4,4 @@ title: React
 permalink: index.html
 ---
 
-{/* See HomeContent.js */}
+{/* See HomeContent.js */}

src/pages/[[...markdownPath]].js

@@ -111,6 +111,7 @@ export async function getStaticProps(context) {
 
   // Read MDX from the file.
   let path = (context.params.markdownPath || []).join('/') || 'index';
+
   let mdx;
   try {
     mdx = fs.readFileSync(rootDir + path + '.md', 'utf8');
@@ -216,10 +217,14 @@ export async function getStaticProps(context) {
   const fm = require('gray-matter');
   const meta = fm(mdx).data;
 
+  // Serialize MDX into JSON.
+  const content = JSON.stringify(children, stringifyNodeOnServer);
+  toc = JSON.stringify(toc, stringifyNodeOnServer);
+
   const output = {
     props: {
-      content: JSON.stringify(children, stringifyNodeOnServer),
-      toc: JSON.stringify(toc, stringifyNodeOnServer),
+      content,
+      toc,
       meta,
     },
   };

src/pages/errors/[error_code].tsx

@@ -0,0 +1,85 @@
+import {Page} from 'components/Layout/Page';
+import {MDXComponents} from 'components/MDX/MDXComponents';
+import ErrorDecoder from 'components/ErrorDecoder';
+import sidebarLearn from 'sidebarLearn.json';
+import type {RouteItem} from 'components/Layout/getRouteMeta';
+import {GetStaticPaths, GetStaticProps, InferGetStaticPropsType} from 'next';
+
+const {MaxWidth, p: P} = MDXComponents;
+
+interface ErrorDecoderProps {
+  errorCode: string;
+  errorMessages: string;
+}
+
+export default function ErrorDecoderPage({
+  errorMessages,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <Page
+      toc={[]}
+      meta={{title: 'Error Decoder'}}
+      routeTree={sidebarLearn as RouteItem}
+      section="unknown">
+      <MaxWidth>
+        <P>
+          In the minified production build of React, we avoid sending down full
+          error messages in order to reduce the number of bytes sent over the
+          wire.
+        </P>
+        <P>
+          We highly recommend using the development build locally when debugging
+          your app since it tracks additional debug info and provides helpful
+          warnings about potential problems in your apps, but if you encounter
+          an exception while using the production build, this page will
+          reassemble the original error message.
+        </P>
+        <ErrorDecoder errorMessages={errorMessages} />
+      </MaxWidth>
+    </Page>
+  );
+}
+
+export const getStaticProps: GetStaticProps<ErrorDecoderProps> = async ({
+  params,
+}) => {
+  const errorCodes = await (
+    await fetch(
+      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+    )
+  ).json();
+
+  const code =
+    typeof params?.error_code === 'string' ? params?.error_code : null;
+  if (!code || !errorCodes[code]) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      errorCode: code,
+      errorMessages: errorCodes[code],
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const errorCodes = await (
+    await fetch(
+      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+    )
+  ).json();
+
+  const paths = Object.keys(errorCodes).map((code) => ({
+    params: {
+      error_code: code,
+    },
+  }));
+
+  return {
+    paths,
+    fallback: 'blocking',
+  };
+};

src/pages/errors/index.tsx

@@ -0,0 +1,2 @@
+import ErrorDecoderPage from './[error_code]';
+export default ErrorDecoderPage;