kazupon/vue-i18n

Should never blow up

bbsimonbb opened this issue · 1 comments

Clear and concise description of the problem

If I inadvertenly supply undefined to a call to $t, my app blows up. The exception in the console gives absolutely no trace as to where in my code the problem is. The only hope is to develop very incrementally, checking constantly, like in the good old days of angular.

Suggested solution

Calls to $t are so frequent, sanity has obliged me to wrap them with my own plugin that catches, and returns XXX as the translation. When XXX pops to screen, I have a chance of locating my problem. I would really really like to see this as the default behaviour. I18n is never in a try catch block, so, to my mind, should never throw an exception.

Alternative

For the time being, I'm using this plugin to wrap calls to $t()

const tryI18n = {
    install(app, options) {
      app.config.globalProperties.$x = (key) => {
        try{
            return app.__VUE_I18N__.global.t(key)
        }
        catch(ex){
            console.log(`Exception translating key: ${key}`)
            return "XXX";
        }
      }
    },
  }

Additional context

No response

Validations

+1. When this error occurs it's impossible to tell that the issue is coming from vue-i18n. Thank you @bbsimonbb for the plugin suggestion. I will try that technique until this issue is resolved.

Here's a slight improvement over the plugin added above: $t() can accept multiple arguments, not just one, so accounting for that by passing through arguments:

export default {

    install(app, options) {

        app.config.globalProperties.$translate = function() {
            const key = arguments[0];

            try {
                if (key === undefined || key === null) {
                    throw new Error();
                }

                return app.__VUE_I18N__.global.t.apply(null, arguments);
            }
            catch (ex) {
                console.warn(`Exception translating key: ${key}`);
                return key;
            }
        }

    }

}