i18n on a per request basis?

[m1212e]

I use superforms to validate my forms. I want to display i18n error messages. The app supports multiple languages at once so one request may be from an english user while another one may be from a german one. I want typebox to return localized errors based on the value of a variable which changes in a per request context. How can I do this?

[sinclairzx81]

@m1212e Hi,

The way to approach this would be to call the SetErrorFunction before generating any errors for the request. The following sets up translations for a couple of errors for French and Japanese. Note you can call SetErrorFunction before calling .Errors(), which will have the error generator call the currently set function.

import { SetErrorFunction, DefaultErrorFunction, ErrorFunctionParameter, ValueErrorType } from '@sinclair/typebox/errors'

// fr-CH
export function French(param: ErrorFunctionParameter) {
  switch(param.errorType) {
    case ValueErrorType.String: return 'Chaîne attendue'
    case ValueErrorType.Number: return 'Nombre attendu'
    case ValueErrorType.Boolean: return 'Booléen attendu'
    // ... and so on
    default: return DefaultErrorFunction(param)
  }
}
// ja-JP
export function Japanese(param: ErrorFunctionParameter) {
  switch(param.errorType) {
    case ValueErrorType.String: return '期待される文字列'
    case ValueErrorType.Number: return '期待される数'
    case ValueErrorType.Boolean: return '期待されるブール値'
    // ... and so on
    default: return DefaultErrorFunction(param)
  }
}

// ------------------------------------------------------------------
// Usage
// ------------------------------------------------------------------

import { Value } from '@sinclair/typebox/value'
import { Type } from '@sinclair/typebox'

const T = Type.String()

SetErrorFunction(Japanese) // set error function before generating errors

console.log(Value.Errors(T, 1234).First())
// {
//   type: 54,
//   schema: { type: 'string', [Symbol(TypeBox.Kind)]: 'String' },
//   path: '',
//   value: 1234,
//   message: '期待される文字列',
//   errors: []
// }


SetErrorFunction(French) // set error function before generating errors

console.log(Value.Errors(T, 1234).First())
// {
//   type: 54,
//   schema: { type: 'string', [Symbol(TypeBox.Kind)]: 'String' },
//   path: '',
//   value: 1234,
//   message: 'Chaîne attendue',
//   errors: []
// }

Note that you will need to create translations for each language you want to support. You can either implement a function for each language which is set on each request, or implement a singular function that references a language manifest / metadata for each kind of error. From experience, just implementing a function for each language is generally easier (especially when dealing with parameterized errors)

Additional information on setting up the error functions can be found at the link below.

https://github.com/sinclairzx81/typebox#error-function

Hope this helps
S

[m1212e]

That helps thanks! I assume SetErrorFunction sets this in a global way so calls in different places would be affected too, right? So e.g. if I have a handler which does some async stuff and is potentially generating errors before and after the await I need to set the language twice since during the await another handler might have changed the value?

SetErrorFunction(French)
console.log(Value.Errors(T, 1234).First())
await somethingElse()
SetErrorFunction(French) // <-- set again since it might have changed
console.log(Value.Errors(T, 1234).First())

[sinclairzx81]

@m1212e Hiya

That helps thanks! I assume SetErrorFunction sets this in a global way so calls in different places would be affected too, right?

Yes, that's correct, it is global. Note that it is common in scenarios like this to set up a application specific validation pipeline for this, one where you don't call the TypeBox validation methods directly, rather you call some user defined function that would set the ErrorFunction based on other infrastructure you have. In this regard, you would view TypeBox validation as something that gets integrated into a wider infrastructure (web server, or other)

Hope this helps
S