Best practice for handling API errors with angular translate - angularjs

Question

I have an API <> SPA architecture.
But I don't know exactly where to put translations, specially when errors are send.
I would prefer to just have translated text (i18n etc) at my angular app. The API should only send out english texts.
But I don't know how to
Imagine an Error message like this: (nodejs+restify)
server.get('/api/', function (req, res, next) {
return next(new server.errors.UnauthorizedError('You are not authorized'));
});
This will send a 401 with json in body.
If the API only speaks english, how can I translate it at best at the SPA?
How can I put this to, one of these translation approaches:
<span>{{message | translate}}</span>
or
<span>{{lang.message}}</span>
Of course I use the $translateProvider at Angular and have a locate files with translation in it.
Is there no other way by sending language keys? Like this:
server.get('/api/', function (req, res, next) {
return next(new server.errors.UnauthorizedError('NOT_AUTHORIZED_ERROR'));
});
With this I could have a locate-en.json file like:
{
errors: {
NOT_AUTHORIZED_ERROR: "You are not authorized"
}
}
I find this kind of uncommon.

Answer 1

You have 2 options: either you presume that your client knows upfront all the errors the API can throw. This is usually only the case if both API and the client are implemented by the same team. In that case, let your API return an error object, that contains a code:
{
"code": "unauthorized",
"message": "some reason in english, usefull for debugging/logging"
}
Then use this code to translate the error client side:
<span>{{error.code | translate}}</span>
The second option is to let the API translate the error message. Use this option if the API can evolve (and throw new errors) without the knowledge of the client. Of course, in this case you're limitted to the languages the API supports.

Answer 2

How about put dictonary with code and message into $translateProvider and read the error from local storage, like this:
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
error : 'messageEN'
})
$translateProvider.translations('de', {
error : 'messageDE'
})
$translateProvider.preferredLanguage('en');
// remember language
$translateProvider.useLocalStorage();
}]);