[SOLVED] Get i18next to fallback to 'NO TRANSLATION'

Get i18next to fallback to 'NO TRANSLATION'

The i18next translation library by default seems to fallback to the translation key if no translation was found for the key, e.g.

// No translation defined for CANCEL yet
i18next.t('CANCEL') // Returns 'CANCEL'

If no translation is found for the key, I would prefer to fallback to a distinctive message that makes it obvious that we've missed a translation or mistyped a translation key. Preferably mentioning the key in the message e.g.

i18next.t('CANCEL') // Returns 'No translation found for "CANCEL"'

Some sort of fallback callback function would be ideal because then we could also log to console/remote service any missing translations.

How can I achieve something like this using the i18next library?

Solution

So it turns out i18next accepts a handler in the options, while initializing it lets you set the value for the missing keys.

i18n.init({
    ...
    
    parseMissingKeyHandler: (key: string) => {
        return `No translation found for "${key}"`;
    }
})