refactor i18nCreateInterpolateElement

packages/js/src/helpers/i18n.js

@@ -1,4 +1,5 @@
 import { setLocaleData } from "@wordpress/i18n";
+import { createInterpolateElement } from "@wordpress/element";
 import { get } from "lodash";
 
 /**
@@ -26,3 +27,19 @@ export function setTextdomainL10n( textdomain, l10nNamespace = "wpseoYoastJSL10n
 		setLocaleData( translations, textdomain );
 	}
 }
+
+/**
+ * Wrapper function for `createInterpolateElement` to catch errors.
+ *
+ * @param {string} interpolatedString The interpolated string.
+ * @param {object} conversionMap The conversion map object.
+ * @returns {string} The interpolated string.
+ */
+export const i18nCreateInterpolateElement = ( interpolatedString, conversionMap ) => {
+	try {
+		return createInterpolateElement( interpolatedString, conversionMap );
+	} catch ( error ) {
+		console.error( "Error in translation for:", interpolatedString, error );
+		return interpolatedString;
+	}
+};

packages/js/src/settings/routes/site-basics.js

@@ -15,6 +15,7 @@ import {
 } from "../components";
 import { withDisabledMessageSupport, withFormikDummySelectField } from "../hocs";
 import { useDispatchSettings, useSelectSettings } from "../hooks";
+import { i18nCreateInterpolateElement } from "../../helpers/i18n";
 
 const ToggleFieldWithDisabledMessageSupport = withDisabledMessageSupport( ToggleField );
 const FormikSelectPageWithDummy = withFormikDummySelectField( FormikPageSelectField );
@@ -104,7 +105,7 @@ const SiteBasics = () => {
 			strong: <strong className="yst-font-semibold" />,
 		}
 	), [] );
-	const taglineDescription = useMemo( () => createInterpolateElement(
+	const taglineDescription = useMemo( () => i18nCreateInterpolateElement(
 		sprintf(
 			/**
 			 * translators: %1$s expands to an opening anchor tag.