Replace a hardcoded error message with a scalable copy system

WHAT THIS TESTS: This question evaluates whether you treat UI copy as data rather than code. A senior engineer should demonstrate a migration path from a hardcoded literal to a centralized, versioned, and potentially localized copy layer that designers or content managers can update without a full code deployment. The interviewer wants to see awareness of key-based indirection, runtime resolution, namespace separation, and guardrails that prevent regression.

A GOOD ANSWER COVERS: First, identify every component rendering the old generic message and replace the literal with a semantic key such as error.friendly_message. Second, extract the copy into a structured JSON file under a namespace like common or errors so the application can load it asynchronously. Third, introduce an internationalization library such as i18next, configure a backend plugin to fetch the JSON namespace on demand, and set up interpolation so dynamic values like error codes still render correctly. Fourth, implement a fallback strategy so missing keys degrade gracefully rather than showing blank UI. Fifth, add developer experience guardrails such as an ESLint rule that bans hardcoded user-facing strings and a pre-commit hook or CLI tool that extracts new keys into the JSON files automatically. Sixth, if relevant, mention integrating a translation management system like Locize so designers can edit copy in a web UI and publish changes independently.

COMMON WRONG ANSWERS: A red flag is suggesting a simple global constants file in JavaScript that still lives in the repository and requires a build and deploy for every text change. Another weak pattern is performing a manual find-and-replace across dozens of files without introducing keys, which creates duplication and makes future updates just as painful. Candidates also stumble by ignoring fallback behavior, proposing a system where a missing key crashes the component or renders an empty string. Finally, overlooking dynamic content such as variables or pluralization shows shallow familiarity with real-world copy requirements.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle A/B testing different error messages without code changes, which leads to feature flags or remote config tied to the same key resolution layer. They might also ask how to support right-to-left languages or plural forms, which tests whether you chose a library with ICU or i18next-style plural rules. Another common follow-up is how you would prevent layout breakage when a translated string is thirty percent longer, which touches on responsive design and truncation policies.

ONE CONCRETE EXAMPLE: Suppose a React application currently shows An error occurred in a catch block. You create a key errors.generic in an errors.json namespace and replace the JSX with t(errors.generic). You configure i18next with the HTTP backend plugin so errors.json loads on demand, and you set fallbackLng to en so users always see English if a translation is missing. You add eslint-plugin-i18next to ban untranslated strings in JSX, and you wire the JSON files to Locize so the designer can update the friendly message in a browser and publish it to the CDN immediately. The next time the designer tweaks the tone, no pull request is required.