El bug por caracteres invisibles que rompía facturación • Hablemos de Frontend

En facturación electrónica, los nombres no deben contener caracteres especiales. Sin embargo, empezaron a aparecer errores al emitir comprobantes donde todo parecía correcto… hasta que no lo era.

❓ El problema

Algunos nombres venían con caracteres invisibles:

Tabs y saltos de línea
Caracteres de control Unicode
Espacios que no se ven en pantalla

El texto se veía bien en la UI, pero internamente rompía la validación.

🤔 El código para detectar el problema

const CLEAN_TABS_NEWLINES = /[\t\r\n]/g
const CLEAN_CONTROL_CHARS = /\p{Cc}/gu
const CLEAN_SPACES = /[\u00A0\u2000-\u200D\u2060\uFEFF]/g

const VALID_NAME_REGEX = /^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑüÜ .,:&"'+°_-]+$/

💡La solución: sanitizar antes de validar

const sanitizeText = (value?: string) =>
	value
		?.replace(CLEAN_TABS_NEWLINES, ' ')
		?.replace(CLEAN_CONTROL_CHARS, '')
		?.replace(CLEAN_SPACES, ' ')
		?.replace(/\s+/g, ' ')
		?.trim()

Aplicando la sanitización en la validación:

name: yup
	.string()
	.transform(sanitizeText)
	.required('Nombre requerido')
	.matches(VALID_NAME_REGEX, 'El nombre no puede contener caracteres especiales')

🫡 ¿Por qué funciona?

Elimina caracteres invisibles
Normaliza espacios
Valida sobre texto limpio
Evita rechazos en facturación

✅ Conclusión

Nunca valides texto sin sanitizarlo primero, especialmente en procesos estrictos como facturación.

Los bugs más peligrosos no se ven… hasta que afectan el negocio.

¡Gracias por leer!