The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →If one render failure appears twice in your error dashboard, check whether the same error is being submitted by both a React error boundary and a browser-wide error handler. React documents that a boundary-caught error can bubble to window in development, where window.onerror or an error listener may capture it again. In production, caught errors do not bubble that way. Choose one reporting path for boundary-caught errors, or use your monitoring SDK’s documented controls to prevent overlap.
Why one caught error can create two reports
A class error boundary can use componentDidCatch(error, info) to report a descendant’s rendering error. A separate global browser handler or monitoring SDK may also capture errors at the window level. React’s documented behavior differs by build mode: caught errors bubble to window in development, but not in production. When both the boundary and a global handler submit events, development can therefore show two reports for one failure. React’s Component reference describes this behavior.
A development-only duplicate is consistent with that documented bubbling behavior; it does not, by itself, establish that production users receive duplicate events. Check the actual events and capture paths rather than treating every duplicate as a React defect.
Find every active reporting path
Before adding suppression logic, trace which parts of the application can send an event to the monitoring service. Include both code you wrote and automatic instrumentation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- Error boundaries: Look for reporting calls in
componentDidCatchand in wrappers around boundary components. - Browser-level capture: Check assignments to
window.onerrorand calls towindow.addEventListener('error', ...). - SDK and root instrumentation: Review automatic integrations, root-level callbacks, and centralized event-processing hooks enabled by the installed SDK.
- Framework reporting: Inspect route-level boundaries and any application or framework hooks that submit telemetry.
SDK APIs and defaults vary by vendor and version. Confirm callback names and behavior against the documentation for the version your application actually uses; do not assume that a sample for another release describes your setup. Sentry’s React guidance discusses boundary reporting and centralized processing, but the exact behavior should be checked for the installed SDK. Sentry React documentation
Choose one owner for caught render errors
There are two useful patterns. Pick one as the authoritative reporting path for errors caught by a boundary. Leaving both paths active without a verified suppression mechanism is what creates ambiguity and can create duplicates in development.
| Approach | What it offers | What to verify |
|---|---|---|
| Boundary-owned capture | componentDidCatch has the error and React component-stack information, making ownership of caught render errors explicit. |
Confirm that global or SDK capture does not also submit the same development error. |
| Centralized or global capture | Reporting policy stays in an SDK or root instrumentation layer, which can simplify cross-cutting observability. | Account for development bubbling and ensure errors already handled by a boundary are not submitted again. |
If both layers must remain, use a suppression or event-identity mechanism documented by the monitoring vendor and verify its semantics for your SDK version. React does not define a universal fingerprint or deduplication time window. Avoid inventing a shared message-based key: identical messages can come from separate failures, and one failure may carry different context in different capture layers.
Report from a class boundary without mixing responsibilities
Keep fallback-state logic and reporting side effects separate. React recommends that static getDerivedStateFromError remain pure; use componentDidCatch for side effects such as logging. The example below shows where a boundary-owned report belongs. Replace the illustrative reportError call with your chosen SDK’s documented API.
Free tools Windows power users keep installed
One-click scans. No signup required.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
reportError(error, {
componentStack: info.componentStack,
});
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}Send info.componentStack along with the error when your reporting path supports it. The component stack shows the React component ancestry involved in the failure. Component names may be minified in production, so source maps are important if you need readable production reports. JavaScript also allows throwing values that are not Error instances; reporting code should accept an unknown thrown value instead of assuming that error.stack always exists.
Keep React Router fallback UI separate from telemetry
React Router’s route-module ErrorBoundary renders the closest route fallback. Its documentation says these boundaries are not intended for error reporting. Treat route fallback rendering and telemetry as separate responsibilities: inspect the route’s loader, action, or component error path, then check whether an application-level reporting hook or SDK also submits the same failure. Do not assume a route boundary’s fallback behavior is equivalent to a generic class boundary’s componentDidCatch reporting path. React Router error boundary guide
Test the behavior in development and production
Use the same intentional descendant render failure to check both build modes. Inspect the monitoring dashboard or SDK event output and identify which capture layer submitted each event; the visible fallback alone does not show whether telemetry was duplicated.
- In development, trigger a render error in a child covered by the boundary. Check whether the boundary reports it and whether a window-level handler or SDK reports it too.
- In a production build, trigger the same controlled failure and compare the reporting paths. React’s documented bubbling difference means the result may differ from development.
- After choosing an owner, repeat both checks and confirm that the boundary-caught render failure produces the intended event and context, without an unintended second submission.
Also test other error sources separately. A test of a render failure does not demonstrate that the application captures event-handler, asynchronous, server-rendering, or framework-route failures.
Best Value
Know which errors boundaries do not catch
React error boundaries cover descendant rendering, lifecycle, and constructor failures. They do not handle every error in an application. React documents that boundaries do not catch errors from event handlers, server-side rendering, the boundary itself, or ordinary asynchronous callbacks such as setTimeout. The documented exception is an error thrown inside a startTransition function returned by useTransition. React’s Component reference
Those excluded errors need an appropriate separate reporting path. Keep that broader coverage in mind when assigning ownership: choosing a boundary as the sole reporter for caught render failures does not make it a universal error handler.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
