Support for onFailedLoading API

🚀 Feature Proposal

I would like to be able to register a callback to the onFailedLoading i18next event. We cannot use the global i18n instance to do this because .init() is called before we are able to register the callback.

// _app.tsx
function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    function handleFailedLoading() {
      logger.error('failed to load translations');
    }

    // This callback will never be called because the i18n instance
    // has already attempted to load the translation data. The event
    // would have already fired before this is registered.
    i18n.on('failedLoading', handleFailedLoading);

    return () => {
      i18n.off('failedLoading', handleFailedLoading);
    }
  }, [])

  //...
}

Motivation

We had a bug on our end that caused translations not to be loaded. We would like to be able to add logging/alerting when this happens.

Example

The example above already shows one way we might use this. I am guessing that next-i18next would need to provide some way in appWithTranslation to allow us to hook into the time between when the i18n instance is created and when it is initialized. Maybe a third argument that takes a callback that is passed the i18n instance before init?

export default appWithTranslation(MyApp, null, (i18n) => {
  i18n.on('failedLoading', handleFailedLoading)
});

Updating this

https://github.com/i18next/next-i18next/blob/a6affe3e0c5bf7471233e626ec2ce3d04ad1e4c4/src/createClient/browser.ts#L10-L15

To something like this:

  if (!instance.isInitialized) {
    config?.use?.forEach(x => instance.use(x))
    i18nCallback?.(instance)
    initPromise = instance.init(config)
  } else {
    i18nCallback?.(instance)
    initPromise = Promise.resolve(i18n.t)
  }

[adrai]

Is that something you would consider?

Usually, if there is the need of listening to failedLoading events or other custom api, there is also a backend plugin like i18next-http-backend in use… this means the config is unserializable anyway. btw: not only the appWithTranslation is affected, but also the serverSideTranslation call

[adrai]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

There are many ways to help this project 🙏