Síntomas
Al integrar la aplicación Napster Companion Web SDK en una aplicación Next.js (o similar basada en React), el agente se conecta correctamente en la primera carga, pero falla en cada recarga posterior. En la consola del navegador aparecen errores que hacen referencia a un fallo de conexión WebSocket.
Causa raíz
Los tokens de sesión de Napster son deuso único y vida corta. Si su aplicación genera un token una sola vez (por ejemplo, en tiempo de compilación, o lo almacena en un archivoJSONo en una variable de entorno) y lo reutiliza en varias sesiones o recargas de página, el token quedará obsoleto para el momento en que se vuelva a usar, lo que provoca que falle el proceso de conexión (handshake) de WebSocket.
Esto ocurre con frecuencia cuando un token queda codificado en una configuración, se almacena en un estado que persiste entre recargas en caliente (hot reload), o se genera una sola vez en el servidor y se incrusta como una prop estática.
Resolución
Genere un token nuevo encada carga de página, llamando al endpoint del token en tiempo de ejecución, inmediatamente antes de inicializar el SDK. Nunca almacene ni reutilice tokens entre sesiones.
useEffect(React) o un gancho de ciclo de vida equivalente que se ejecute al montar el componente; no en una variable compartida a nivel de módulo, ni engetStaticProps, ni en almacenamiento local.Corrección paso a paso
- Ubique el lugar donde su aplicación obtiene el token de sesión. Si se almacena en una variable, un archivo o una prop estática, ese es el origen del problema.
- Mueva la llamada de obtención del token al ciclo de vida de su componente (por ejemplo, dentro de
useEffect(() = { ... }, [])en React, o deonMounteden Vue). - Pase el token recién obtenido directamente a
NapsterCompanionApiSdk.init({ token, ... }), sin almacenarlo en ningún lugar entre llamadas. - Asegúrese de que su función de limpieza (el valor de retorno de
useEffect) destruya la instancia del SDK, de modo que el siguiente montaje comience limpio. - Recargue la página dos veces para confirmar que el agente se inicializa correctamente en ambas cargas.
Notas adicionales
Este problema no es exclusivo de Next.js: cualquier framework que almacene en caché el estado a nivel de módulo durante las recargas en caliente (Vite, Remix, etc.) puede presentar el mismo comportamiento. La solución es la misma: trate el token como una credencial de un solo uso que debe obtenerse de forma nueva en cada inicialización del SDK.