Lecciones aprendidas al solucionar un problema con el carrito de compras

Rate this content
Bookmark

Los errores de producción pueden ser complicados, especialmente cuando no se pueden reproducir fácilmente o no ocurren con frecuencia. En esta charla, repasaremos un caso de estudio de un problema de coincidencia de cantidad en el carrito de compras y los pasos de solución de problemas que tomamos para resolverlo. Luego, basándonos en ese problema, aprenderemos algunas lecciones que todos podemos aplicar como desarrolladores frontend.

This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

Hussein es un desarrollador de personal en Shopify con 10 años de experiencia en desarrollo completo y siete años trabajando específicamente con React.

El problema era que los clientes reportaban recibir una cantidad diferente de productos a los que realmente habían pedido en la aplicación de mercado de restaurantes, construida en React y Redux.

Inicialmente, revisaron el pedido en el backend, los registros del servidor y los correos electrónicos enviados al proveedor para asegurarse de que los números fueran correctos, concluyendo que los datos estaban correctos y que el error era del cliente.

Utilizaron Fullstory, una herramienta de análisis que permite grabar las sesiones de usuario, donde pudieron ver el error ocurriendo en producción, observando discrepancias en las cantidades de los productos en el carrito de compras.

La solución fue utilizar lo que el cliente ve al momento de pagar o en el carrito de compras como la fuente de verdad, ignorando los datos del servidor si había discrepancias, asegurando así que la versión que ve el cliente es lo que realmente obtienen.

Las principales lecciones fueron que la fuente de verdad no siempre es el servidor, es importante asumir que el error podría ser propio, y que las grabaciones de pantalla son útiles para identificar problemas en aplicaciones de frontend.

Hussein aplica las lecciones aprendidas para evitar repetir errores similares en Shopify, donde la escala y las consecuencias financieras serían mucho mayores, y comparte estos conocimientos con otros desarrolladores.

Hussien Khayoon
Hussien Khayoon
9 min
02 Dec, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute las lecciones aprendidas al solucionar un problema con el carrito de compras en una aplicación de mercado de restaurantes. El error era difícil de reproducir pero ocurrió con más frecuencia a medida que la aplicación crecía. La investigación involucró verificar los registros del frontend y utilizar herramientas como Sentry y Fullstory. La solución consistió en utilizar la vista del cliente al finalizar la compra como fuente de verdad y enfatizar la importancia de las pruebas y la responsabilidad financiera.

1. Lecciones aprendidas de solucionar un problema con el carrito de compras

Short description:

Voy a hablar sobre las lecciones aprendidas de solucionar un problema con el carrito de compras. Hoy hablaremos sobre React y trabajar con un ecosistema. Compartiré un error que encontré en una aplicación de mercado de restaurantes. Tenía un flujo de comercio electrónico estándar, pero ocurrió un problema extraño.

Voy a hablar hoy sobre las lecciones aprendidas de solucionar un problema con el carrito de compras. Así que, la mayoría de nosotros hemos utilizado carritos de compras. Mi nombre es Hussein. Soy un desarrollador de personal en Shopify y he estado trabajando en el desarrollo completo durante unos 10 años ahora. React durante siete. He cometido todos los errores posibles con React. Ahí está mi Twitter, si quieres seguirme. Fanático del Chelsea, desafortunadamente.

¿Por qué esta charla? Así que, hoy estamos hablando mucho sobre React. Muchos de nosotros usamos React. Codificamos en React. Pero la realidad es que siempre trabajas con un ecosistema. Siempre. Entonces, ya sea el navegador en el que estás usando React, las API web, como viste muchas de las escuchas de eventos. Tratas con clientes, si das un paso atrás. Todos tratamos con clientes en nuestro código. Y siempre tenemos un dominio comercial. Específicamente yo, ahora estoy en comercio electrónico. Entonces, todos tratamos con eso. Entonces, trabajas en un ecosistema, lo que agrega complejidad a tu aplicación, lo que a su vez agrega errores a tu aplicación. Y hoy estoy hablando de uno de esos errores que tuve. Así que, solo un breve contexto sobre este error. No fue en Shopify, fue en una startup en la que trabajé antes en 2019. Era una aplicación de mercado de restaurantes, construida en React y Redux, cientos de usuarios, millones en GMV, no tan grande, en comparación con Shopify, por supuesto. Teníamos alrededor de 50 empleados, alrededor de 10 a 15 eran desarrolladores de tecnología. Entonces, hay un camino feliz en la aplicación, que es bastante estándar en el comercio electrónico. Inicias sesión, agregas artículos a tu carrito, proporcionas información de envío, pagas, recibes ese dinero y luego recibes tus artículos. Bastante estándar, ¿verdad? Como esto es lo que hacen la mayoría de los sitios de comercio electrónico. Eso es lo que teníamos. Pero luego tuvimos un problema muy extraño aquí.

2. Solución de problemas del error del carrito de compras

Short description:

Una vez al mes o menos, un cliente informaba un error en el que recibían menos artículos de los que habían pedido. Verificamos el pedido en el backend, los registros del servidor y los correos electrónicos al proveedor. Nuestros datos en la base de datos coincidían con todo, por lo que el cliente cometió un error. Es importante tener en cuenta las suposiciones al solucionar errores.

Una vez al mes o menos, como una vez al mes o menos, un cliente informaba un error específico, y decían que recibieron menos artículos de los que realmente habían pedido. ¿Qué significa eso? Entonces, la aplicación es un poco diferente ahora. Así que tuve que hacer un poco de trabajo de captura de pantalla. Aquí puedes ver, por ejemplo, cinco cajas de piña, es lo que pidieron. Entonces, un cliente, por ejemplo, diría que en realidad recibieron seis o siete cajas, no cinco. Muy extraño, muy malo. ¿Qué hacemos entonces? En la vida de una startup, hicimos lo mismo que cualquier desarrollador haría. Verificar el pedido en el backend. Asegurarnos de que los números fueran correctos. Revisamos los registros del servidor, para ver si había errores y si los números coincidían. Verificamos los correos electrónicos que enviamos al proveedor, ¿eran el número correcto? Y lo que vimos es que resulta que nuestros números en la database coinciden con todo. Así que le dijimos al cliente, estás equivocado. Nuestros data son correctos, qué lástima. ¿Entiendes a lo que me refiero? Entonces cometiste un error, básicamente. Y por eso es importante hablar sobre nuestras suposiciones cuando tenemos errores. Esto te da un poco de contexto sobre lo que estábamos pensando en ese momento.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Cómo hacer un juego web tú solo
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
Cómo hacer un juego web tú solo
This talk guides you on how to make a web game by yourself, emphasizing the importance of focusing on tasks that interest you and outsourcing the rest. It suggests choosing a game engine that allows distribution on the web and aligns with your understanding and enjoyment. The talk also highlights the significance of finding fun in the creative process, managing scope, cutting features that don't align with the game's direction, and iterating to the finish line. It concludes by discussing the options for publishing the game on the web and leveraging unique web features.
Despliegue Atómico para Hipsters de JavaScript
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Despliegue Atómico para Hipsters de JavaScript
This Talk discusses atomic deployment for JavaScript and TypeScript, focusing on automated deployment processes, Git hooks, and using hard links to copy changes. The speaker demonstrates setting up a bare repository, configuring deployment variables, and using the post-receive hook to push changes to production. They also cover environment setup, branch configuration, and the build process. The Talk concludes with tips on real use cases, webhooks, and wrapping the deployment process.
Tu Ritmo con GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
31 min
Tu Ritmo con GraphQL
The Talk discusses the value proposition of GraphQL and its ability to solve common pain points in API development. It highlights the importance of making informed decisions when choosing GraphQL clients, servers, and schema builders. The Talk also emphasizes the need to focus on the best developer experience in the present rather than seeking a perfect long-term solution. Additionally, it mentions the future of the Urkel GraphQL client and the reasons for dropping ReScript support. Overall, the Talk provides insights into the current state and future trends of GraphQL development.
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
React Advanced 2021React Advanced 2021
6 min
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
Top Content
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.
Uso de UDP en el navegador para conexiones más rápidas entre cliente/servidor
JS GameDev Summit 2023JS GameDev Summit 2023
21 min
Uso de UDP en el navegador para conexiones más rápidas entre cliente/servidor
Top Content
This talk introduces geckos.io, a real-time client-server communication library using UDP and WebRTC. The speaker discusses the benefits of UDP for real-time multiplayer games and explains how geckos.io enables UDP connections between browsers and Node.js servers. The deployment process for geckos.io involves opening UDP ports and handling signaling through an HTTP request. The speaker demonstrates how geckos.io works with Docker and showcases the ability to host multiple servers on the same machine. Overall, this talk provides an overview of geckos.io and its applications in real-time communication.

Workshops on related topic

Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
Managers Are From Mars, Devs Are From Venus
TechLead Conference 2024TechLead Conference 2024
111 min
Managers Are From Mars, Devs Are From Venus
Workshop
Mo Khazali
Mo Khazali
Una Guía para Desarrolladores sobre Cómo Comunicar, Convencer y Colaborar Efectivamente con los Stakeholders
Es una historia tan antigua como el tiempo: la colaboración entre desarrolladores y stakeholders de negocios ha sido durante mucho tiempo un desafío, con una falta de comunicación clara que a menudo deja a ambas partes frustradas. Los mejores desarrolladores pueden comprender profundamente las necesidades de sus contrapartes de negocios, comunicar efectivamente la estrategia técnica sin perder a la audiencia no técnica y convencer al negocio de tomar las decisiones correctas. Trabajando en una consultoría, he fallado y tenido éxito en arquitectar y “vender” visiones técnicas, aprendiendo muchas lecciones en el camino.Ya sea que trabajes en una empresa de productos, seas consultor/freelancer, o quieras aventurarte más allá de ser solo un desarrollador, la capacidad de convencer y comunicar claramente con los stakeholders puede diferenciarte en la industria tecnológica. Esto se vuelve aún más importante con el auge de GenAI y el mercado de desarrolladores cada vez más competitivo, ya que la resolución de problemas y la comunicación efectiva son clave para posicionarte.En esta masterclass, compartiré ejemplos del mundo real, tanto buenos como malos, y te guiaré a través de poner la teoría en práctica mediante dojos.
Cómo crear experiencias de edición que tu equipo amará
React Advanced 2021React Advanced 2021
168 min
Cómo crear experiencias de edición que tu equipo amará
Workshop
Lauren Etheridge
Knut Melvær
2 authors
El contenido es una parte crucial de lo que construyes en la web. Las tecnologías web modernas aportan mucho a la experiencia del desarrollador en términos de construir sitios impulsados por contenido, pero ¿cómo podemos mejorar las cosas para los editores y creadores de contenido? En este masterclass aprenderás cómo usar Sanity.io para abordar la modelización de contenido estructurado, y cómo construir, iterar y configurar tu propio CMS para unificar los modelos de datos con experiencias de edición eficientes y agradables. Está dirigido a desarrolladores web que desean ofrecer mejores experiencias de contenido para sus equipos de contenido y clientes.