Skip to content

Configure i18next to use warning logs instead of default info level

Currently I have many logs by i18next that make difficult to use the console:

enter image description here

I need i18next to use warning level instead of default info level, in order to be able to filter them.

Im checking docs but I dont see any option. My current configuration is:

i18n
  .use(XHR)
  .use(LanguageDetector)
  .init({
    debug: true,
    lng: 'en',
    keySeparator: false,
    addMissing: true,
    interpolation: {
      escapeValue: false
    },

    resources: {
      en: {
        translations: translationEng
    },
    ns: ['translations'],
    defaultNS: 'translations'
  })

Answer

You can disable debug: false, which will disable the default console.log stuff. And and an event listener missingKey on the i18n instance.

i18n
  .use(XHR)
  .use(LanguageDetector)
  .init({
    debug: false, // <-- disable default console.log
    lng: 'en',
    keySeparator: false,
    addMissing: true,
    interpolation: {
      escapeValue: false
    },

    resources: {
      en: {
        translations: translationEng
    },
    ns: ['translations'],
    defaultNS: 'translations'
  });

i18n.on('missingKey', (lng, namespace, key, fallbackValue) => {
   console.warn(lng, namespace, key, fallbackValue);
})

Based on this code

Other option is to use the options.missingKeyHandler to pass a custom handler for handing missing keys.

i18n
  .use(XHR)
  .use(LanguageDetector)
  .init({
    debug: false, // disable this
    lng: 'en',
    keySeparator: false,
    addMissing: true,
    interpolation: {
      escapeValue: false
    },

    resources: {
      en: {
        translations: translationEng
    },
    ns: ['translations'],
    defaultNS: 'translations',
    saveMissing: true, // must be enabled
    missingKeyHandler: (lng, ns, key, fallbackValue) => {
       console.warn(lng, ns, key, fallbackValue)
    }
  })

Based on this code