SUI-Components / sui

Monorepo for SUI (Simple User Interface) packages.
169 stars 33 forks source link

feat(packages/sui-i18n): Upgrade to node-polyglot v2.5.0 #1739

Open oriolpuig opened 6 months ago

oriolpuig commented 6 months ago

Description

With this Pull Request, we have migrated from node-polyglot@0.4.3 to the last one node-polyglot@2.5.0. The main reason to upgrade it is to be able to log the translation issues from outside by providing an onMissingKey function callback. As you will see in the example section, you could send metrics or trace logs and prevent translation issues in your web app.

Before continuing, I suggest you read issue #1731 to learn more about the current problem and how to reproduce it in all of our marketplaces. A quick resume is to avoid those console:

image

I proposed 3 approaches/scenarios to achieve it:

Scenario 3️⃣ is the one that people wanted.

So, when you create a 18n instance:

Related Issue

fix #1731

Example

How to track translation errors from outside.


// First, create a onMissingKeyCallback function to do your stuff
function onMissingKeyCallback(key, opts, currentLocale, tokenRegex, pluralRules) {
  // Here you can send some metrics to DataDog
  logger.metric(...)

  // Also you can log an error and trace it in OpenSearch to know which key is causing the error
  try {
    throw new Error(`Missing translation for key: ${key} on language ${currentLocale}`)
   } catch (err) {
    logger.error({
      name: 'your_log_name',
      message: err.message,
      stack: err.stack
    })
  }

  return key
}

// Second, modify or create your adapter and pass your onMissingKey function
const adapter = new PolyglotAdapter({onMissingKey: onMissingKeyCallback})

// And third, pass this adapter to your i18n instance
const i18n = new I18n({adapter})

How to avoid writing console.warn into browser console

// First, modify or create your adapter and pass the logMissingKey with false value
const adapter = new PolyglotAdapter({logMissingKey: false})

// At the end, pass this adapter to your i18n instance
const i18n = new I18n({adapter})

TODO

oriolpuig commented 6 months ago

Next week I'll try to publish a beta and test it on one of our websites 🚀!