add helper to catch errors for interpolated strings

Yoast · Dec 31, 2024 · 9e486b6 · 9e486b6
1 parent 01c6afd
commit 9e486b6
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 10 deletions.
diff --git a/packages/helpers/package.json b/packages/helpers/package.json
@@ -23,6 +23,7 @@
   "license": "GPL-3.0",
   "private": false,
   "dependencies": {
+    "@wordpress/element": "^6.14.0",
     "@wordpress/i18n": "^1.2.3",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",

diff --git a/packages/helpers/src/i18n-create-interpolate-element.js b/packages/helpers/src/i18n-create-interpolate-element.js
@@ -0,0 +1,24 @@
+import { createInterpolateElement } from "@wordpress/element";
+import { sprintf } from "@wordpress/i18n";
+
+/**
+ * Create an interpolated element from a translated string and catches errors.
+ *
+ * @param {string} translatedString The translated string to be interpolated.
+ * @param {[string]} args The arguments to be interpolated into the translated string.
+ * @param {object} conversionMap The conversion map for the interpolated values.
+ *
+ * @returns {object} The interpolated element.
+ */
+export const i18nCreateInterpolateElement = ( translatedString, args, conversionMap ) => {
+	try {
+		return createInterpolateElement(
+			sprintf(
+				translatedString,
+				...args
+			), conversionMap );
+	} catch ( error ) {
+		console.error( "Error in translation for:", translatedString );
+		return translatedString;
+	}
+};
diff --git a/packages/helpers/src/index.js b/packages/helpers/src/index.js
@@ -26,3 +26,4 @@ export { makeOutboundLink } from "./makeOutboundLink";
 export { default as validateFacebookImage } from "./social-preview-image-validation/facebookValidation";
 export { default as validateTwitterImage } from "./social-preview-image-validation/twitterValidation";
 export * from "./hiddenInputHelper";
+export * from "./i18n-create-interpolate-element";
diff --git a/packages/js/src/settings/routes/site-basics.js b/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 "@yoast/helpers";
 
 const ToggleFieldWithDisabledMessageSupport = withDisabledMessageSupport( ToggleField );
 const FormikSelectPageWithDummy = withFormikDummySelectField( FormikPageSelectField );
@@ -104,16 +105,15 @@ const SiteBasics = () => {
 			strong: <strong className="yst-font-semibold" />,
 		}
 	), [] );
-	const taglineDescription = useMemo( () => createInterpolateElement(
-		sprintf(
-			/**
-			 * translators: %1$s expands to an opening anchor tag.
-			 * %2$s expands to a closing anchor tag.
-			 */
-			__( "This field updates the %1$stagline in your WordPress settings%2$s.", "wordpress-seo" ),
-			"<a>",
-			"</a>"
-		),
+
+
+	const taglineDescription = useMemo( () => i18nCreateInterpolateElement(
+		/**
+		 * translators: %1$s expands to an opening anchor tag.
+		 * %2$s expands to a closing anchor tag.
+		 */
+		__( "This field updates the %1$stagline in your WordPress settings%2$s.", "wordpress-seo" ),
+		[ "<a>", "</a>" ],
 		{
 			// eslint-disable-next-line jsx-a11y/anchor-has-content
 			a: <a href={ `${ generalSettingsUrl }#blogdescription` } target="_blank" rel="noopener noreferrer" />,

diff --git a/yarn.lock b/yarn.lock
@@ -8479,6 +8479,20 @@
     react "^18.2.0"
     react-dom "^18.2.0"
 
+"@wordpress/element@^6.14.0":
+  version "6.14.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/element/-/element-6.14.0.tgz#d29a837d7a01c62d206bb2ae44c27a4f199736c1"
+  integrity sha512-vZPm2ekv9B7fMcv/slyu/p8lV44EPa6RRHOk04ldNUpsrjC6ph6Q4wpuI5WzLEX7p1u71c8ZOuroEuRvdFxMcA==
+  dependencies:
+    "@babel/runtime" "7.25.7"
+    "@types/react" "^18.2.79"
+    "@types/react-dom" "^18.2.25"
+    "@wordpress/escape-html" "*"
+    change-case "^4.1.2"
+    is-plain-object "^5.0.0"
+    react "^18.3.0"
+    react-dom "^18.3.0"
+
 "@wordpress/element@^6.7.0":
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/@wordpress/element/-/element-6.7.0.tgz#8d8ac6568909135b8b86131ee689a2724f36df05"
@@ -8493,6 +8507,13 @@
     react "^18.3.0"
     react-dom "^18.3.0"
 
+"@wordpress/escape-html@*":
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/escape-html/-/escape-html-3.14.0.tgz#ef7007b4edc71a3b00b93bc1870057ae4ddad2ea"
+  integrity sha512-tLzQk7VQse1TF/StFe6vt4zdPCWV9LFRPhseC46tbBxAlm/+v6gmaJP501voA/vPQOJSZrYyA5iXGQhA8cJsRw==
+  dependencies:
+    "@babel/runtime" "7.25.7"
+
 "@wordpress/escape-html@^1.12.2":
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/@wordpress/escape-html/-/escape-html-1.12.2.tgz#dcc92178bacc69952cde9bb8fb1cbbea9deb2cc3"