Debugging React toFixed Crashes with STAROps: From Stack Traces to Fix Verification

The article walks through a complete frontend troubleshooting loop using Alibaba Cloud's STAROps platform and its RUM (Real User Monitoring) SDK on a React e-commerce demo application ( web-react-demo). A code change to discount display logic introduced a

TypeError: Cannot read properties of undefined (reading 'toFixed')

that broke the add-to-cart flow on the product detail page ( /products/:productId) and the simulated payment on the checkout page ( /checkout), while navigation remained functional.

Demo Application and RUM Setup

The demo app provides product browsing, add-to-cart, checkout, and simulated payment. It integrates @arms/rum-browser-react and initializes the React plugin via initReactPlugin(ArmsRum). Business components ProductOffer (product detail) and OrderSummary (checkout) are wrapped with the SDK's ErrorBoundary. When these components render incorrectly, the SDK captures both the JavaScript stack ( error.stack) and the React component stack ( errorInfo.componentStack), sending them together with each exception for later analysis alongside page, version, and SourceMap data.

Three versions are deployed, each with matching SourceMap uploads:

1.0.0 (baseline): null-safe formatting, operations succeed.

1.1.0 (regression): calls undefined.toFixed in the regression branch, causing crashes in the pricing components.

1.1.1 (fix): restores null-safety with (value ?? 0).toFixed(2), operations succeed again.

Identifying Affected Pages

Querying STAROps for the time window 2026-09-15 10:26–10:32 (Beijing time) returns 5 TypeError occurrences, all from version 1.1.0 with the same toFixed message:

Product detail page ( /products/:productId): 3 occurrences.

Checkout page ( /checkout): 2 occurrences.

Locating the Faulty Source Line

STAROps uses the JS stack's file/line/column positions to query the corresponding SourceMap, pinpointing the error to src/App.tsx line 271 inside the formatDiscount function:

export function formatDiscount(value?: number): string {
  if (release.stage === 'regression') {
    return value!.toFixed(2);
  }
  return (value ?? 0).toFixed(2);
}

In the regression branch, value is undefined when the discount field is missing. The TypeScript non-null assertion ! does not add a runtime guard, so toFixed throws. The fix replaces it with the nullish coalescing operator (value ?? 0).toFixed(2), treating missing discounts as zero.

Reconstructing Business Component Paths with React Component Stack

The JS stack alone shows only formatDiscount and DiscountAmount frames, plus React internals — it does not reveal the business parent components. The React component stack (captured by the RUM SDK's ErrorBoundary) fills this gap. STAROps reads the component stack and uses the build's SourceMap to demangle minified component names (e.g., Kh, Jh, $h) back to their original definitions.

For the product detail page, the component stack resolves to: ProductOffer (defined at App.tsx:284) → DiscountAmount (defined at App.tsx:276)

For the checkout page: OrderSummary (defined at App.tsx:331) → DiscountAmount (same definition at App.tsx:276)

Both paths converge on the shared DiscountAmount component, which calls formatDiscount at line 271. This explains why a single code defect impacts two distinct business flows.

Verifying the Fix with Business Events

After deploying version 1.1.1, the same STAROps conversation is used to ask whether the toFixed error still appears in the last hour, whether it occurs on the new version or only on 1.1.0, and whether cart_added (add-to-cart) and order_paid (simulated payment) events have recovered. The demo data shows:

Version 1.1.0: 3 product sessions and 2 checkout sessions all threw the exception.

Version 1.1.1: 3 product sessions completed cart_added, 2 checkout sessions completed order_paid, zero recurrences of the toFixed error.

Continuous Release Observation with Mission

To automate post-release health checks, a long-running Mission is created from the "RUM Release Observation" template for web-react-demo, running hourly (at minute 5). Each execution automatically detects new versions, compares them against the prior stable version across JS errors, page performance, and API latency, observes for 24 hours, and stores the report in the Mission.

The first automatic run (2026-09-15 12:05, duration ~4m38s) analyzed the past 24 hours, identifying 3 versions and 70 sessions. The report flagged:

Version 1.1.0: 11 toFixed errors affecting 10 sessions.

Version 1.1.1: no toFixed errors, but elevated p90 latency (~1.4s) on /api/orders and /api/quote (only 19 sessions so far, requiring further observation).

All execution records and reports remain in the same Mission for historical trend analysis.

Summary

The JS stack located the faulty line in formatDiscount; the React component stack revealed it was used by both ProductOffer and OrderSummary. The RUM SDK's React integration ensured that even errors caught by ErrorBoundary retained component context. After fixing the shared formatter, business-event metrics confirmed recovery, and a Mission now continuously monitors future releases for regressions and performance shifts.