Stack trace analysis
I'm getting a TypeError in production when users try to submit the checkout form. It only happens when the shipping address is optional and left blank. Here's the stack trace.
3:14 PMI can see the issue. The error occurs because the code tries to access a property on a null shipping address object. Let me break down the trace:
3:14 PMCannot read properties of null (reading 'street')
The formatAddress function assumes the address parameter is always defined. When shipping is optional and left blank, null is passed. Add a null check at the top of formatAddress before accessing properties.
function formatAddress(address: Address | null): string {
if (!address) return ""
return `${address.street}, ${address.city}, ${address.state} ${address.zip}`
}That makes sense. We also have a similar pattern in the billing address formatter — should I fix that too?
3:17 PMYes, definitely. I checked the codebase and found the same pattern in 3 places. Here's the second one that's also vulnerable:
3:18 PMUnsafe property access on nullable billingAddress in formatBillingLabel
Same pattern as the checkout bug. The billingAddress can be null when a user has not entered billing details. Use optional chaining and a fallback string.
function formatBillingLabel(address: Address | null): string {
return address?.street
? `${address.street}, ${address.city}`
: "No billing address"
}Got it. I'll apply the same pattern to all 3 locations. Is there a way to prevent this from happening again?
3:20 PMEnable strict null checks in your tsconfig.json if not already enabled. Set "strictNullChecks": true. This will surface all nullable property accesses at compile time. You should also add a lint rule for no-unsafe-member-access from @typescript-eslint to catch these in CI.
3:21 PM