Shorten minified error URL to reduce production bundle size (mobxjs#4677)

* Shorten minified error URL

* simpler check

* simpler code

* wording

Author: kubk

.changeset/fix-minified-error-link.md

@@ -0,0 +1,5 @@
+---
+"mobx": patch
+---
+
+Shorten minified error URL to reduce production bundle size.

.gitignore

@@ -6,6 +6,7 @@ coverage
 test/babel-tests.js
 test/typescript/typescript-tests.js
 dist/
+/docs/errors.md
 **/.idea/*
 !/.idea/icon.png
 !/.idea/vcs.xml

packages/mobx/src/errors.ts

@@ -1,4 +1,4 @@
-const niceErrors = {
+export const niceErrors = {
     0: `Invalid value for configuration 'enforceActions', expected 'never', 'always' or 'observed'`,
     1(annotationType, key: PropertyKey) {
         return `Cannot apply '${annotationType}' to '${key.toString()}': Field not found.`
@@ -87,7 +87,7 @@ export function die(error: string | keyof typeof errors, ...args: any[]): never
         typeof error === "number"
             ? `[MobX] minified error nr: ${error}${
                   args.length ? " " + args.map(String).join(",") : ""
-              }. Find the full error at: https://github.com/mobxjs/mobx/blob/main/packages/mobx/src/errors.ts`
+              }. See http://mobx.js.org/errors`
             : `[MobX] ${error}`
     )
 }

packages/mobx/src/internal.ts

@@ -6,7 +6,7 @@ With this file that will still happen,
 but at least in this file we can magically reorder the imports with trial and error until the build succeeds again.
 */
 export * from "./utils/global"
-export * from "./errors"
+export { die } from "./errors"
 export * from "./utils/utils"
 export * from "./api/decorators"
 export * from "./core/atom"

website/i18n/en.json

@@ -64,6 +64,10 @@
         "title": "Decorators",
         "sidebar_label": "Decorators {🚀}"
       },
+      "errors": {
+        "title": "MobX error codes",
+        "sidebar_label": "Error codes"
+      },
       "faq/migrate-to-6": {
         "title": "Migrating from MobX 4/5"
       },

website/package.json

@@ -1,7 +1,9 @@
 {
   "scripts": {
     "examples": "docusaurus-examples",
+    "prestart": "node scripts/generate-error-docs.js",
     "start": "docusaurus-start",
+    "prebuild": "node scripts/generate-error-docs.js",
     "build": "docusaurus-build",
     "publish-gh-pages": "docusaurus-publish",
     "write-translations": "docusaurus-write-translations",

website/scripts/generate-error-docs.js

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+const { writeFileSync } = require("fs")
+const { relative, resolve } = require("path")
+
+const repoRoot = resolve(__dirname, "../..")
+const errorsPath = resolve(repoRoot, "packages/mobx/src/errors.ts")
+const outputPath = resolve(repoRoot, "docs/errors.md")
+
+globalThis.__DEV__ = true
+const { niceErrors } = require(errorsPath)
+
+function formatMarkdownCell(message) {
+    let value = message
+
+    if (typeof message === "function") {
+        // Render dynamic errors with visible placeholders instead of real runtime values
+        const match = message.toString().match(/^[^(]*\(([^)]*)\)/)
+        const params = match ? match[1] : ""
+        const names = params.split(",").map(name => name.trim()).filter(Boolean)
+        const args = names.map(name => `{${name}}`)
+        value = message(...args).replace("String", args[0])
+    }
+
+    // Keep the generated table valid Markdown
+    return String(value).replace(/\r?\n/g, "<br />").replace(/\|/g, "\\|")
+}
+
+function renderDocs(errors) {
+    const rows = Object.keys(errors)
+        .sort((left, right) => Number(left) - Number(right))
+        .map(code => `| ${code} | ${formatMarkdownCell(errors[code])} |`)
+        .join("\n")
+
+    return `---
+title: MobX error codes
+sidebar_label: Error codes
+hide_title: true
+custom_edit_url: https://github.com/mobxjs/mobx/edit/main/packages/mobx/src/errors.ts
+---
+
+<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBD4KQ7&placement=mobxjsorg" id="_carbonads_js"></script>
+
+# MobX error codes
+
+In development builds, MobX throws full error messages. Production builds replace known messages with short numeric codes to keep the published bundle smaller.
+
+| Code | Message |
+| ---- | ------- |
+${rows}
+`
+}
+
+const docs = renderDocs(niceErrors)
+writeFileSync(outputPath, docs)
+
+console.log(`Generated ${relative(repoRoot, outputPath)} from ${relative(repoRoot, errorsPath)}`)

website/sidebars.json

@@ -22,6 +22,7 @@
       "understanding-reactivity",
       "subclassing",
       "analyzing-reactivity",
+      "errors",
       "computeds-with-args",
       "mobx-utils",
       "custom-observables",