Sintomas
Ao integrar o Napster Companion Web SDK em uma aplicação Next.js (ou outra baseada em React), o agente se conecta com sucesso no primeiro carregamento, mas falha em todos os recarregamentos subsequentes. Erros relacionados a uma falha de conexão WebSocket aparecem no console do navegador.
Causa raiz
Os tokens de sessão do Napster são de uso único e de curta duração. Se o seu aplicativo buscar um token apenas uma vez (por exemplo, em tempo de build, ou armazenando-o em um JSON arquivo ou variável de ambiente) e reutilizá-lo em várias sessões ou recarregamentos de página, o token ficará inválido na próxima vez que for usado, fazendo com que a negociação (handshake) do WebSocket falhe.
Isso geralmente acontece quando um token é fixado em uma configuração, armazenado em cache em um estado que persiste entre hot reloads, ou gerado uma única vez no lado do servidor e incorporado como uma propriedade estática.
Resolução
Gere um novo token a cada carregamento de página, chamando o endpoint do token em tempo de execução, imediatamente antes de inicializar o SDK. Nunca salve ou reutilize tokens entre sessões.
useEffect (React) ou hook de ciclo de vida equivalente que seja executado na montagem do componente — nunca em uma variável de nível de módulo compartilhada, em getStaticProps, e nunca no armazenamento local.Correção passo a passo
- Localize onde seu aplicativo recupera o token de sessão. Se ele estiver armazenado em uma variável, arquivo ou propriedade estática, essa é a origem do problema.
- Mova a chamada de busca do token para o ciclo de vida de montagem do seu componente (por exemplo, dentro de
useEffect(() = { ... }, [])no React ouonMountedno Vue). - Passe o token recém-obtido diretamente para
NapsterCompanionApiSdk.init({ token, ... }), sem armazená-lo em nenhum lugar entre as chamadas. - Garanta que sua função de limpeza (o valor de retorno de
useEffect) destrua a instância do SDK, para que a próxima montagem comece de forma limpa. - Recarregue a página duas vezes para confirmar que o agente é iniciado com sucesso em ambos os carregamentos.
Observações adicionais
Esse problema não é exclusivo do Next.js — qualquer framework que mantenha estado em cache no nível do módulo entre hot reloads (Vite, Remix, etc.) pode apresentar o mesmo comportamento. A correção é a mesma: trate o token como uma credencial de uso único, que deve ser obtida de forma nova a cada inicialização do SDK.