[code-infra] Setup error message minification

[Janpot]

Port core error minification infrastructure:

• Built on top of [code-infra] Allow specifying a custom error formatter module for error minifcation material-ui#45291
• Add error extractor in babel
• Extract all errors, make the behavior opt-out with

  throw /* minify-error-disabled */ new Error('unminified error message');

• Remove unused babel macros plugin
• Add production-error page in the docs, use <FormattedErrorMessage /> inside of the mdx to render the formatted error message
  • Statically prerenders all pages for errors. The args are passed through searchParams so they can only be interpolated client side.
• example
• example with inerpolation

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	8e6427d
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/683866ecde0dc70008307889
😎 Deploy Preview	https://deploy-preview-1463--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[michaldudak]

It looks good, aside from a typo I found.
@atomiks, do you see anything missing from this implementation?

In the future, we could create an error throw helper function to ensure consistency in our messages.
I'm wondering how big the bundle size savings will be and if the minification is really worth the hassle.

[Janpot]

I'm wondering how big the bundle size savings will be and if the minification is really worth the hassle.

Ideally we'd have the bundle size checker in base repo. I can fix that up and port next? We could also postpone merging this PR until then if you want,

[michaldudak]

I checked it manually and it turns out that this PR (with the lastest master merged in) produces a larger package than what's on master.

I ran pnpm build and pnpm pack in the package directory with the following results:

This PR:
package (tgz): 332555 bytes
esm directory (unpacked): 1315505 bytes

master:
package (tgz): 329511 bytes (3044 bytes less)
esm directory (unpacked): 1307340 bytes (8165 bytes less)

I expect it to look different when we add more components and have more error messages, but for now there seems to be no point in making this change (unless my methodology is wrong).

We can also have additional gains in the minifier-less implementation by creating the error helper I mentioned in #1463 (review)

[Janpot]

(unless my methodology is wrong)

The installed size will indeed be larger as it contains a new function and the error codes alongside the dev messages. But that's not what ends up in user's applications. You need to bundle the package with process.env.NODE_ENV set to 'production' and check the result. That's why I proposed we clean up and port the bundle size checker from core.

[Janpot]

Putting this on hold until we've ported the bundle size checker and can assess the impact.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@1463

commit: 8e6427d

[mui-bot]

Bundle size report

Total Size Change:^{${\tiny{\color{green}▼}}$}-9.42KB^(-0.65%) - Total Gzip Change:^{${\tiny{\color{green}▼}}$}-778B^(-0.16%)
Files: 41 total (0 added, 0 removed, 36 changed)

@base-ui-components/react/separator parsed:^{${\tiny{\color{red}▲}}$}+150B^(+3.50%) gzip:^{${\tiny{\color{red}▲}}$}+101B^(+5.50%)
@base-ui-components/react parsed:^{${\tiny{\color{green}▼}}$}-4.71KB^(-1.54%) gzip:^{${\tiny{\color{green}▼}}$}-741B^(-0.80%)
@base-ui-components/react/menu parsed:^{${\tiny{\color{green}▼}}$}-800B^(-0.70%) gzip:^{${\tiny{\color{green}▼}}$}-145B^(-0.38%)
@base-ui-components/react/context-menu parsed:^{${\tiny{\color{green}▼}}$}-753B^(-0.67%) gzip:^{${\tiny{\color{green}▼}}$}-147B^(-0.40%)
@base-ui-components/react/select parsed:^{${\tiny{\color{green}▼}}$}-513B^(-0.46%) gzip:^{${\tiny{\color{green}▼}}$}-67B^(-0.18%)
@base-ui-components/react/navigation-menu parsed:^{${\tiny{\color{green}▼}}$}-366B^(-0.43%) gzip:^{${\tiny{\color{green}▼}}$}-35B^(-0.12%)
@base-ui-components/react/accordion parsed:^{${\tiny{\color{green}▼}}$}-307B^(-1.33%) gzip:^{${\tiny{\color{green}▼}}$}-27B^(-0.34%)

Show 29 more bundle changes

@base-ui-components/react/fieldset parsed:^{${\tiny{\color{red}▲}}$}+150B^(+2.53%) gzip:^{${\tiny{\color{red}▲}}$}+89B^(+3.60%)
@base-ui-components/react/use-render parsed:^{${\tiny{\color{red}▲}}$}+150B^(+3.91%) gzip:^{${\tiny{\color{red}▲}}$}+99B^(+5.94%)
@base-ui-components/react/form parsed:^{${\tiny{\color{red}▲}}$}+111B^(+1.93%) gzip:^{${\tiny{\color{red}▲}}$}+77B^(+3.13%)
@base-ui-components/react/meter parsed:^{${\tiny{\color{red}▲}}$}+71B^(+0.96%) gzip:^{${\tiny{\color{red}▲}}$}+46B^(+1.52%)
@base-ui-components/react/progress parsed:^{${\tiny{\color{red}▲}}$}+62B^(+0.83%) gzip:^{${\tiny{\color{red}▲}}$}+42B^(+1.38%)
@base-ui-components/react/menubar parsed:^{${\tiny{\color{red}▲}}$}+35B^(+0.18%) gzip:^{${\tiny{\color{red}▲}}$}+28B^(+0.38%)
@base-ui-components/react/input parsed:^{${\tiny{\color{red}▲}}$}+34B^(+0.31%) gzip:^{${\tiny{\color{red}▲}}$}+19B^(+0.43%)
@base-ui-components/react/checkbox-group parsed:^{${\tiny{\color{red}▲}}$}+31B^(+0.26%) gzip:^{${\tiny{\color{red}▲}}$}+15B^(+0.31%)
@base-ui-components/react/field parsed:^{${\tiny{\color{red}▲}}$}+31B^(+0.23%) gzip:^{${\tiny{\color{red}▲}}$}+17B^(+0.32%)
@base-ui-components/react/avatar parsed:^{${\tiny{\color{red}▲}}$}+25B^(+0.35%) gzip:^{${\tiny{\color{red}▲}}$}+24B^(+0.83%)
@base-ui-components/react/number-field parsed:^{${\tiny{\color{green}▼}}$}-284B^(-0.98%) gzip:^{${\tiny{\color{green}▼}}$}-21B^(-0.20%)
@base-ui-components/react/checkbox parsed:^{${\tiny{\color{green}▼}}$}-254B^(-1.36%) gzip:^{${\tiny{\color{green}▼}}$}-22B^(-0.31%)
Base UI checkbox parsed:^{${\tiny{\color{green}▼}}$}-254B^(-1.36%) gzip:^{${\tiny{\color{green}▼}}$}-21B^(-0.30%)
@base-ui-components/react/popover parsed:^{${\tiny{\color{green}▼}}$}-242B^(-0.28%) gzip:^{${\tiny{\color{green}▼}}$}-8B^(-0.03%)
@base-ui-components/react/scroll-area parsed:^{${\tiny{\color{green}▼}}$}-241B^(-1.53%) gzip:^{${\tiny{\color{green}▼}}$}-17B^(-0.30%)
@base-ui-components/react/tabs parsed:^{${\tiny{\color{green}▼}}$}-177B^(-0.74%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(-0.01%)
@base-ui-components/react/preview-card parsed:^{${\tiny{\color{green}▼}}$}-162B^(-0.27%) gzip:^{${\tiny{\color{green}▼}}$}-49B^(-0.24%)
@base-ui-components/react/toolbar parsed:^{${\tiny{\color{green}▼}}$}-161B^(-0.82%) gzip:^{${\tiny{\color{red}▲}}$}+8B^(+0.12%)
@base-ui-components/react/switch parsed:^{${\tiny{\color{green}▼}}$}-149B^(-1.02%) gzip:^{${\tiny{\color{green}▼}}$}-15B^(-0.27%)
@base-ui-components/react/tooltip parsed:^{${\tiny{\color{green}▼}}$}-147B^(-0.23%) gzip:^{${\tiny{\color{green}▼}}$}-40B^(-0.18%)
@base-ui-components/react/radio parsed:^{${\tiny{\color{green}▼}}$}-145B^(-0.97%) gzip: 0B^(0.00%)
@base-ui-components/react/toast parsed:^{${\tiny{\color{green}▼}}$}-126B^(-0.48%) gzip:^{${\tiny{\color{green}▼}}$}-13B^(-0.14%)
@base-ui-components/react/alert-dialog parsed:^{${\tiny{\color{green}▼}}$}-121B^(-0.23%) gzip:^{${\tiny{\color{green}▼}}$}-12B^(-0.07%)
@base-ui-components/react/slider parsed:^{${\tiny{\color{green}▼}}$}-96B^(-0.39%) gzip:^{${\tiny{\color{green}▼}}$}-8B^(-0.09%)
@base-ui-components/react/dialog parsed:^{${\tiny{\color{green}▼}}$}-93B^(-0.18%) gzip:^{${\tiny{\color{red}▲}}$}+3B^(+0.02%)
@base-ui-components/react/collapsible parsed:^{${\tiny{\color{green}▼}}$}-83B^(-0.46%) gzip:^{${\tiny{\color{red}▲}}$}+9B^(+0.14%)
@base-ui-components/react/toggle parsed:^{${\tiny{\color{green}▼}}$}-75B^(-0.83%) gzip:^{${\tiny{\color{red}▲}}$}+4B^(+0.11%)
@base-ui-components/react/toggle-group parsed:^{${\tiny{\color{green}▼}}$}-5B^(-0.04%) gzip:^{${\tiny{\color{red}▲}}$}+16B^(+0.30%)
@base-ui-components/react/radio-group parsed:^{${\tiny{\color{green}▼}}$}-2B^(-0.01%) gzip:^{${\tiny{\color{red}▲}}$}+14B^(+0.18%)

Details of bundle changes

Generated by 🚫 dangerJS against 8e6427d

[michaldudak]

Since the bundle size checker is running, we can continue with this. The size saving aren't enormous (-0.80% gzipped for the whole library), but they might get slightly more significant as we create more components that throw more errors. I tested an alternative approach, but it's much worse: #2050

One additional thing we need here is for the build to fail if error messages haven't been extracted.

[Janpot]

but they might get slightly more significant as we create more components that throw more errors.

It would also enable more verbose error messages for a better DX. in case you were holding back atm 🙂. We can keep this on hold for a bit longer as well as far as I'm concerned to let the lib get a little more stable.

One additional thing we need here is for the build to fail if error messages haven't been extracted.

Currently CI should fail by checking changes, do you want to build this into the build step directly?

[michaldudak]

in case you were holding back atm 🙂

No, that's fine :) There are size savings already, so we can move forward with this. I'd like to merge #2049 first, though, so the messages are consistent.

Currently CI should fail by checking changes

OK, that's enough.