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
- Read the Contributing Guidelines
- Read the Documentation
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
+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;
}
}
}
}