Add error message page

Author: markerikson

website/sidebars.json

@@ -75,7 +75,8 @@
             "api/createSelector",
             "api/matching-utilities",
             "api/other-exports",
-            "api/codemods"
+            "api/codemods",
+            { "type": "link", "label": "Error Messages", "href": "/errors" }
           ]
         }
       ]

website/src/pages/errors.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import Layout from '@theme/Layout'
+import { useLocation } from '@docusaurus/router'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import styles from './styles.module.css'
+import errorCodes from '../../../errors.json'
+
+function Errors() {
+  const location = useLocation()
+  const context = useDocusaurusContext()
+  const { siteConfig = {} } = context
+  const errorCode = new URLSearchParams(location.search).get('code')
+  const error = errorCodes[errorCode]
+
+  return (
+    <Layout
+      title={`${siteConfig.title} - ${siteConfig.tagline}`}
+      description={siteConfig.tagline}
+    >
+      <main className={styles.mainFull}>
+        <h1>Production Error Codes</h1>
+        <p>
+          When Redux Toolkit is built and running in production, error text is
+          replaced by indexed error codes to save on bundle size. These errors
+          will provide a link to this page with more information about the error
+          below.
+        </p>
+        {error && (
+          <React.Fragment>
+            <p>
+              <strong>
+                The full text of the error you just encountered is:
+              </strong>
+            </p>
+            <code className={styles.errorDetails}>{error}</code>
+          </React.Fragment>
+        )}
+
+        <h2>All Error Codes</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Code</th>
+              <th>Message</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Object.keys(errorCodes).map((code) => (
+              <tr>
+                <td>{code}</td>
+                <td>{errorCodes[code]}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </main>
+    </Layout>
+  )
+}
+
+export default Errors

website/src/pages/styles.module.css

@@ -80,3 +80,32 @@
   font-size: 30px;
   margin-bottom: 55px;
 }
+
+.mainFull {
+  padding: 34px 16px;
+  width: 100%;
+  max-width: var(--ifm-container-width);
+  margin: 0px auto;
+}
+.mainFull h1 {
+  font-size: 3rem;
+  color: var(--ifm-heading-color);
+  font-weight: var(--ifm-heading-font-weight);
+  line-height: var(--ifm-heading-line-height);
+}
+
+.mainFull p {
+  margin-bottom: var(--ifm-leading);
+  margin-top: 0;
+}
+
+
+.errorDetails {
+  color: #ff6464;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 30px 0;
+  font-weight: bold;
+  background-color: rgba(255, 100, 100, 0.1);
+  display: block;
+}