Introducción

Esta es una entrada personal, algo así como una historia. Realmente JSON no salvó mi vida pero no podía poner un título como “De cómo cambié el content type para usar JSON en lugar de HTML y mandar cadenas complejas para evitar un error desconocido”.

La historia

Sucede que desde hace un tiempo mantengo un sitio de internet. Dicho sitio tiene muchas visitas (tampoco tantas, pero las tiene) y entonces un error significa pérdidas en dinero y cosas de esas.

El sitio tiene un editor WYSIWYG, esos de What you see is what you get o en pocas palabras un editor de HTML que permite ingresar, valga la redundancia, código HTML. Algo así como el editor de WordPress.

Pues todo iba funcionando de maravilla, hasta que un buen día dejó de hacerlo y sólo le pasaba a unos usuarios. Era un error totalmente desconocido, porque en el log se mostraba únicamente otro tipo de error.

Estaba usando Phroute, incluso ya hasta había culpado a la librería, Intenté mandar los formularios normalmente (porque usualmente usaba jQuery para hacerlo, sí, jQuery en 2018 pero no había otra opción amigable con Bootstrap 4).

Depurando y depurando me di cuenta que eso pasaba (o sea, el error) si el código HTML empezaba con la etiqueta <strong>. O si entre el mismo estaba la entidad  . No tengo idea de por qué pasaba esto, me llevé casi 3 semanas intentando nuevas cosas.

Incluso, antes de enviar el contenido HTML le hacía un remplazo al HTML codificado usando JavaScript, pero no funcionaba nada. También intenté buscar si era un problema con el editor, pero no pasaba nada.

Y así estuve hasta ayer, cuando al fin solucioné el error que ni siquiera yo sé cuál es. Lo que hice fue que en lugar de mandar el formulario usando formulario.serialize() decidí armar mi objeto en JavaScript, algo así:

const objeto = {
  html: "El contenido del editor WYSIWYG aquí",
};

Después lo codifiqué usando JSON.stringify, es decir, utilicé JSON para el intercambio de datos como aquella vez que hicimos un ejemplo de formulario con AngularJS.

Fue una coincidencia que se me ocurriera eso, o no sé. Pero mágicamente el error desapareció cuando codificaba con JSON del lado del cliente y decodificaba del lado del servidor.

Pero no todo fue así de fácil

Ah, cuando cambié a JSON el error seguía apareciendo. Ya estaba en mi máximo nivel de estrés, pero en eso revisé la consola de Chrome y analicé los paquetes… y vi que decía “Content type: html” o algo así (saben a lo que me refiero), por lo que dije “tal vez tenga que cambiar el tipo de contenido”

Así que en la petición AJAX de jQuery cambié el contentType para que fuera JSON. Y ahora sí, magia pura. Adiós error.

El posible error

Yo creo que era un error con las entidades HTML que había en el código, y tal vez eran mezcladas con la petición. O de algún modo eran marcadas como inseguras y el proveedor de hosting las bloqueaba, ni idea, no lo supe ni lo sabré. Y espero que nunca vuelva ese error.

¿Y por qué salvó mi vida?

Ya no sabía qué hacer con ese problema. De hecho estaba pensando en rescribir todo el sitio, o en cambiar a la librería que se encarga de las rutas. Cualquier cosa era buena, porque ya estaba enfadado con esos errores.

Así que JSON me salvó porque no tuve que rescribir nada, no me enojé más y ahora el sitio funciona como un encanto.

Mi recomendación

Esto incluso va para mí mismo y es que JSON se ha convertido casi en un estándar para intercambiar datos. Lo uso en todas mis aplicaciones, pero justamente para ese sitio dije “Ok vamos a hacerlo con jQuery que viene integrado con Bootstrap, enviando el formulario y ya”.

Así que, bueno, en conclusión usa JSON cada que puedas. Además, este formato tiene la ventaja de que conserva los tipos de datos y permite estructuras complejas.