Debugging guides
How to reproduce a Sentry frontend error locally
Sentry points to a call to amount.toFixed(2). The error says amount was null. A guard would stop the exception, but it would not tell you whether the invoice should show zero, a loading state or an unavailable total.
Find out what the invoice response contained and what the screen should display while the total is unavailable. Otherwise the guard may just replace a crash with a wrong invoice.
This guide uses a synthetic invoice. It starts with an event in Sentry and builds a local case; it does not import the Sentry session into StatePort.
Pick one event before generalising
Start with a particular event, not just the issue title. Record the release or build, route, error location and relevant browser context that are actually available. Look at the preceding actions and requests when a replay exists. Sentry Session Replay connects session observations with errors and technical context. Use the context actually retained for that event; do not assume every issue has a complete replay. 1, 2
Keep the event and replay tied to the same incident and release. Leave unavailable details marked unknown.
For the invoice example, an investigation note could look like this:
| Item | Evidence or hypothesis |
|---|---|
| Exception | Formatting code received a null value |
| Screen | Invoice details, after changing the billing period |
| Observed response | Total is null, if the captured response actually shows that |
| Hypothesis | Pending recalculation allows an invoice without a total |
| Expected behaviour | Keep the page usable and show a pending total |
| Missing evidence | Whether the null response was caused by recalculation or another server condition |
The last two rows need a product decision and further investigation. The exception itself does not answer them.
When the response body is missing
A network entry is not a guarantee that the full response body is available. Sentry has controls for collecting request and response bodies, and the material available depends on the application’s recording configuration. 3
If the total’s value is unknown, you can build a synthetic null-total fixture to explore the failure. Label it as a hypothesis. Do not call it the exact customer response.
When possible, ask the backend or support team for an approved test case with equivalent behaviour. Avoid copying a customer database or borrowing their active session just to reach the screen. A synthetic invoice with the relevant missing field is often enough to test the rendering assumption; it is not enough to explain every possible production cause.
Reproduce on the failing code first
Check out the relevant application version when it is available. Start the app locally and use authorised test authentication. Arrange the suspected input without applying the fix yet.
For example, an endpoint might return:
{
"invoiceId": "invoice-example",
"status": "recalculating",
"amount": null,
"currency": "EUR"
}Reach the details screen through the same meaningful action: change the billing period, rather than just loading a direct URL, if the transition is part of the hypothesis. Check that the failure occurs in the intended rendering path.
If it does not fail, the reproduction is not ready. Investigate the difference in code, state or input. Do not weaken the final check to make a convenient synthetic case resemble the report.
Try the null-total input in the smallest test that includes the failing formatter and the expected pending state. Keep that test if it reproduces the problem; a browser capture is only needed when the surrounding UI setup matters.
Save the pending-invoice case before it disappears
StatePort becomes relevant after you have a supported browser case worth retaining. Capture the failing flow in its managed browser, review the material and save a State Card. Test a reopen before discarding the temporary setup. 4
For the next code iteration, start the changed frontend and choose Local app on the Card. The local code runs with matching retained responses; unsupported or missing dependencies remain explicit limitations. This is a way to reuse the established case, not recover the lost production session from Sentry. 5
For this invoice, preserve the action that changes the period as well as the response that leaves the total pending. If a direct open and a period change have different results, that difference belongs in the reproduction notes.
Check the behaviour, not just the absence of an exception
A patch such as amount ?? 0 may remove the crash while displaying a false invoice total. A useful acceptance criterion would state that the page remains usable, the pending state is visible and no numeric total is presented as final until the data supports it.
Run that criterion before and after the patch, retaining both outcomes. Check a normal invoice too; a null guard can still break numeric formatting.
Then choose what needs a live integration check. If the patch changes a request or expects different server behaviour, check that part against the authorised backend environment. A pass with the old response only shows how the frontend handled that response.
Keep the production question open until it is answered
A local fix can establish that the frontend handles one known input. It does not establish how often production sends that input or whether a different release has the same problem. Use Sentry’s production evidence to investigate those questions after deployment, subject to your own release and monitoring process.
In the issue, keep the event reference next to the local fixture and its result. Mark the null-total payload as synthetic unless it was actually captured. That distinction matters when a reviewer asks whether the production cause was found.
If the period-change setup needs several browser steps, capture that case and verify it against StatePort’s current scope. If the input fits a small HTTP fixture, Playwright HAR replay may be the shorter route.
Sources
Written by StatePort. Documentation checked on 13 October 2026. The example is invented; no production investigation, benchmark or automatic Sentry import is claimed.