Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Host controls in the live video stage fail silently

Abierto Apto para principiantes
  • ¿Algo no está bien?
#205 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
84/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Empieza en apps/frontend/src/components/live/LiveStage.tsx comparando el manejo de errores del botón de acción del anfitrión con los controles del micrófono del reproductor que usan streamError y muestran problem. Comprueba la otra ruta de error que solo aparece en la consola, mencionada alrededor de la línea 472. Se considera terminado cuando las acciones fallidas del anfitrión muestran un mensaje comprensible junto al control, un reintento exitoso lo borra y el comportamiento del reproductor permanece sin cambios.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug good first issue help wanted UI & UX

In apps/frontend/src/components/live/LiveStage.tsx, the host's action buttons — letting a player speak, taking the floor back — swallow their errors into the console:

onClick={async () => {
  setBusy(true);
  try {
    await onClick();
  } catch (err) {
    console.error("[live] host action failed", err);   // nothing reaches the host
  } finally {
    setBusy(false);
  }
}}

The button goes busy, comes back, and nothing changes. No message, no retry, no indication the request failed at all.

Why it matters

This happens live, in front of a room. A host taps "let in" on a raised hand, the button flickers, and the player stays silent. The host has no idea whether they misclicked, whether the player's connection is bad, or whether the request failed — so they tap it again, and again.

Meanwhile the player is waiting to speak and can see their hand is still up.

There is already a correct pattern in the same file

The player-side mic controls handle this properly:

const run = async (action: () => Promise<unknown>, failure: string) => {
  setBusy(true);
  setProblem(null);
  try {
    await action();
  } catch (err) {
    setProblem(streamError(err, failure));   // shown to the user
  } finally {
    setBusy(false);
  }
};

streamError already turns a failed request into a readable message, and the component already renders problem. The host buttons just never got the same treatment.

What a fix looks like

Give the host actions the same error state the player controls have, and show the message near the control that failed rather than at the top of the stage — the host is looking at a list of participants, so an error floating elsewhere is easy to miss.

Worth checking the whole file for other places that only console.error. The two paths I know about are the host action button and one around line 472.

Definition of done
  • A failed host action shows a readable message, not just a console line
  • The message appears near the control the host used
  • The error clears on a successful retry
  • The player-side behaviour is unchanged

Good first issue: the working pattern is a few hundred lines below in the same file, so this is mostly applying something that already exists.

Lenguaje dominante
TypeScript
Estrellas
21
Forks
7
Merge medio
4 h 31 min
PR fusionados (30 d)
22

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TheCodeHeist-Coder/Rexial

Todos los issues de TheCodeHeist-Coder/Rexial

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.