Handle HTTP response

I received a 502 from the user profile endpoint. Consume the response and map the JSON to the client model for display: profile.id, profile.name, profile.avatarUrl. If the response contains validation errors, show them inline; if it’s a server error, surface a friendly retryable message and log the raw response for debugging.

Before I wire this response handler into the component, make it easy for QA to test: list the possible HTTP status cases and what the UI will show for each, extract the fields the UI cares about at top, and flag any ambiguous error messages that would confuse support engineers when they read the logs.

I fetched the profile and the UI rendered avatarUrl as null although the API team says the field is always present. I’m afraid my parser is swallowing nested properties or the server returned a different shape for some users. I can’t tell whether to adjust my mapping or request a schema fix. What is the most likely misread here and the immediate test I should run to decide the fix?

Across projects I frequently patch response handlers to accommodate slightly different shapes: sometimes profile.avatar is a string, sometimes an object, sometimes missing. Those fixes pile up and tests become brittle. What habit or contract should I adopt to stop churning on these mappings, and what small guard or tool will enforce consistent shapes without blocking progress?