Keep sane with React & Microfrontends in production
summary
A runnable microfrontend shell with Next.js and micro frontends for header profile and footer demonstrates concrete fixes: wrap each microfrontend in an error boundary, catch async failures in fetch catch blocks, and attach high‑cardinality metadata like package name package version and user ID plus component source to each error. Errors and UI error models are sent to New Relic, Terraform provisions alert policies and an email channel, and the demo shows errors contained to a microfrontend and alerts firing in production.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:05Talk overview
- 3:31Debugging production incident
- 9:09What are microfrontends
- 10:56Microfrontend observability
- 13:49Demo setup observability
- 17:46Error boundaries in microfrontends
- 20:16Tracking high-cardinality errors
- 23:24Querying errors in New Relic
- 25:32Automating alerts with Terraform
- 29:25Key takeaways
- 30:51Q&A
related talks
30mMicro Frontends in React — a State of the Art Approach
32mMicrofrontends with React
25mReact developer? How are your production skills?
15mBreaking Down Monoliths: Microfrontend Architecture with React
32mMicrofrontends with Prisma ORM and NextJS
48mProper Error Handling with React/Redux
35mGoing fullstack React(ive)
30mHow to push a ReactJS application in production...