Cómo informar un buen error del navegador

Informar a los proveedores de navegadores sobre los problemas que encuentras en su navegador es fundamental para mejorar la plataforma web.

Pete LePage
Robert Nyman

Informar un buen error no es difícil, pero requiere un poco de trabajo. El objetivo es facilitar la búsqueda de lo que no funciona, llegar a la causa raíz y, lo más importante, encontrar una forma de solucionarlo. Los errores que progresan rápidamente tienden a ser fáciles de reproducir con un comportamiento esperado claro.

Verificar que sea un error

El primer paso es averiguar cuál debería ser el comportamiento "correcto".

¿Cuál es el comportamiento correcto?

Consulta los documentos relevantes de la API en MDN o intenta encontrar especificaciones relacionadas. Esta información puede ayudarte a decidir qué API no funciona realmente, en qué parte y cuál es el comportamiento esperado.

¿Funciona en otro navegador?

Por lo general, el comportamiento que difiere entre los navegadores tiene mayor prioridad como problema de interoperabilidad, especialmente cuando el navegador que contiene el error es el que está fuera de lugar. Intenta realizar las pruebas en las versiones más recientes de Chrome, Firefox, Safari y Edge, posiblemente con una herramienta como BrowserStack.

Si es posible, comprueba que la página no se comporte intencionalmente de manera diferente debido al detector del usuario-agente. En las Herramientas para desarrolladores de Chrome, intenta configurar la cadena User-Agent en otro navegador.

¿Se rompió en una versión reciente?

¿Funcionó como se esperaba en el pasado, pero se produjo un error en una versión reciente del navegador? Se puede actuar sobre esas “regresiones” con mucha más rapidez, en especial si proporcionas un número de versión en el que funcionó y una versión en la que falló. Las herramientas como BrowserStack pueden facilitar la verificación de versiones anteriores del navegador y la herramienta bisect-builds (para Chromium) permite buscar el cambio de manera muy eficiente.

Si un problema es una regresión y se puede reproducir, por lo general, la causa raíz se puede encontrar y solucionar rápidamente.

¿Hay otras personas que tengan el mismo problema?

Si experimentas problemas, es muy probable que otros desarrolladores también lo hagan. Primero, intenta buscar el error en Stack Overflow. Esto puede ayudarte a traducir un problema abstracto en una API dañada específica y puede ayudarte a encontrar una solución a corto plazo hasta que se corrija el error.

¿Se informó antes?

Una vez que tengas una idea de cuál es el error, es momento de comprobar si ya se informó a través de una búsqueda en la base de datos de errores del navegador.

Si encuentras un error existente que describe el problema, agrega tu apoyo destacando, marcado como favorito o comentando el error. Además, en muchos sitios, puedes agregarte a la lista de Cc y recibir actualizaciones cuando cambie el error.

Si decides comentar el error, incluye información sobre cómo afecta a tu sitio web. Evita agregar comentarios con estilo "+1", ya que los rastreadores de errores suelen enviar correos electrónicos por cada comentario.

Informar el error

Si el error no se informó antes, es momento de informárselo al proveedor del navegador.

Cómo crear un caso de prueba minimizado

Mozilla tiene un excelente artículo sobre cómo crear un caso de prueba minimizado. Para resumir, si bien una descripción del problema es un gran comienzo, no hay nada como proporcionar una demostración vinculada en el error que muestra el problema. Para maximizar las posibilidades de un progreso rápido, el ejemplo debe contener el mínimo código posible necesario para demostrar el problema. Una muestra de código mínima es lo primero que puedes hacer para aumentar las probabilidades de que se solucione el error.

Estas son algunas sugerencias para minimizar un caso de prueba:

  • Descarga la página web, agrega <base href="https://original.url"> y verifica que el error exista de forma local. Esto puede requerir un servidor HTTPS activo si la URL usa HTTPS.
  • Prueba los archivos locales en las compilaciones más recientes de tantos navegadores como puedas.
  • Intenta condensar todo en 1 solo archivo.
  • Quita el código (comenzando por lo que sabes que no es necesario) hasta que desaparezca el error.
  • Usa el control de versión para guardar tu trabajo y deshacer los errores.

Cómo alojar un caso de prueba reducido

Si estás buscando un buen lugar para alojar tu caso de prueba reducido, hay varios lugares útiles disponibles:

Ten en cuenta que varios de esos sitios muestran contenido en un iframe, lo que puede provocar que las funciones o los errores se comporten de manera diferente.

Presenta tu problema

Una vez que tengas el caso de prueba minimizado, estarás listo para informar el error. Ve al sitio de seguimiento de errores correcto y crea un problema nuevo.

Proporciona una descripción clara y los pasos necesarios para reproducir el problema

Primero, proporciona una descripción clara para ayudar a los ingenieros a comprender rápidamente cuál es el problema y clasificarlo.

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

A continuación, proporciona los pasos detallados necesarios para reproducir el problema. Aquí es donde entra en juego tu caso de prueba minificado.

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

Y, por último, describe el resultado esperado y el real.

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

Para obtener más información, consulta los lineamientos de escritura de informes de errores en MDN.

Contenido adicional: Agrega una captura de pantalla o una presentación en pantalla del problema

Si bien no es necesario, en algunos casos, puede ser útil agregar una captura de pantalla o una presentación en pantalla del problema. Esto es muy útil en casos en los que los errores pueden requerir pasos extraños para reproducirse. Ser capaz de ver lo que ocurre en una presentación o en una captura de pantalla puede ser útil.

Incluye detalles del entorno

Algunos errores se pueden reproducir solo en ciertos sistemas operativos o solo en tipos específicos de pantallas (por ejemplo, con valores bajos o altos de DPI). Asegúrate de incluir los detalles de los entornos de pruebas que usaste.

Envía el error

Por último, envía el error. Luego, recuerda estar pendiente de tu correo electrónico para ver si hay respuestas al error. Por lo general, durante la investigación y cuando se corrige el error, los ingenieros pueden tener preguntas adicionales o, si tienen dificultades para reproducir el problema, pueden comunicarse con ellos.