Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 23.5 — Monitoring and Error Reporting
React · Example 2 of 4 React 19+

onUncaughtError: no boundary, the whole tree is gone

An uncaught render error unmounts everything inside the root: a blank page. Report it with the release and route, and show a message outside React (or, better, add error boundaries so it never gets this far). Without the callback, React would print Uncaught Error: Cart total is NaN plus advice to the console, where no one in production would see it.

In production you can't see your users' consoles, so errors must report themselves: React 19's root callbacks (onCaughtError, onUncaughtError, onRecoverableError) plus window error and unhandledrejection listeners send every crash to an error tracker, source maps turn its minified stack traces back into your code, and analytics and logs are collected with consent and without personal data.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 5 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Write a main.jsx that reports all three kinds of React root errors and both window error events to a function report(kind, error, extra).

02

Write a scrubUrl(url) function that removes the email and token query parameters before a page view is sent to analytics, and test it with /reset?email=asha@example.com&token=abc&step=2.

Explain it without notes

01

What are onCaughtError, onUncaughtError and onRecoverableError, and when does each run?

02

Which errors do error boundaries miss, and how do you report them?

03

How do source maps make production error reports useful, and how should you deploy them?

04

How would you add analytics to a React app while respecting user privacy?

onUncaughtError: no boundary, the whole tree is gone React 19+

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

[tracker] {"level":"fatal","message":"Cart total is NaN","component":"Cart","release":"shop@1.4.2","path":"/cart"}
root is empty: true
fallback: Something went wrong. Please reload.