Gravação de sessão no React Native com a UXCam: guia de configuração

Se você está lendo isto, provavelmente quer ver o que os usuários realmente fazem no seu app React Native. Onde eles hesitam? Quais toques não respondem? Por que abandonam um fluxo no meio? E há uma chance ainda maior de que você já tenha testado uma ferramenta feita para apps nativos e percebido que ela não combina bem com um projeto React Native.

A boa notícia: este guia explica o que é gravação de sessão, como ela funciona no React Native e como configurá-la com a UXCam. Um único SDK grava seus apps iOS e Android, incluindo projetos Expo. A mesma conta da UXCam também cobre o seu site com o SDK web da UXCam. Você vai aprender a nomear telas com o React Navigation, mascarar views sensíveis e ligar cada replay a eventos, usuários e falhas. Assim, cada gravação responde a uma pergunta real.

O que é gravação de sessão?

A gravação de sessão é uma reconstrução visual, passo a passo, de como uma pessoa usa o seu app. Ela registra cada toque, deslize, rolagem e troca de tela. O time vê a jornada real do usuário, e não só uma linha de métricas.

Em vez de adivinhar onde está o atrito, você assiste à experiência real. Você vê a hesitação antes de um botão, o campo que o teclado cobre e o terceiro toque em um botão que não responde. No React Native, isso pesa ainda mais. O mesmo JavaScript renderiza componentes nativos diferentes no iOS e no Android, e uma tela que funciona bem em um iPhone novo pode se comportar de outro jeito em um Android intermediário.

A UXCam transforma essas interações em gravações que respeitam a privacidade. Os times usam essas gravações para depurar problemas, melhorar fluxos e lançar funcionalidades com segurança. Você também não precisa adivinhar quais gravações assistir. A Tara, analista de IA da UXCam, analisa as suas sessões e mostra o que mudou e onde os usuários travam. Os replays servem de evidência.

Como a gravação de sessão funciona no React Native

O React Native desenha views nativas de verdade, mas as suas telas, o estado e a navegação ficam no JavaScript. Imagine que alguém vai da Home para Detalhes do produto no React Navigation. Nada no lado nativo anuncia uma nova tela, como um novo view controller ou Activity faria em um app totalmente nativo. Por isso, ferramentas que deduzem as telas pelo ciclo de vida nativo costumam registrar um app React Native inteiro como uma única tela comprida.

O SDK React Native da UXCam é o pacote react-native-ux-cam. Ele usa os SDKs nativos de iOS e Android da UXCam para gravar o que aparece na tela. Você nomeia as telas no seu código JavaScript.

Cada sessão gravada inclui:

• Vídeo da tela: o que o usuário viu, incluindo transições, modais e o teclado.

• Gestos: toques, deslizes, rolagens e toques longos, exibidos no replay e na linha do tempo da sessão.

• Nomes de tela: os nomes que você define no JavaScript. Eles dividem cada replay em telas, com o tempo gasto em cada uma.

• Eventos e propriedades do usuário: os eventos personalizados que você registra e os atributos que associa aos usuários, marcados no momento em que aconteceram.

• Problemas: falhas nativas, ANRs, travamentos de interface e rage taps, sinalizados automaticamente para você ir direto ao ponto.

A sessão termina quando o app vai para segundo plano, e é nesse momento que ela é enviada. Ela aparece no dashboard da UXCam em cerca de um minuto. O SDK é compatível com a Nova Arquitetura do React Native desde a versão 6.0.0. As versões mais recentes também melhoraram a captura de conteúdo em WebViews.

Planeje duas coisas desde o início. Primeiro, a nomeação automática de telas não é confiável no React Native, então você vai nomear as telas por conta própria. Com o React Navigation, isso leva poucas linhas. Segundo, só campos de senha e campos padrão de cartão de crédito são mascarados automaticamente. Todo o resto aparece no replay até você ocultar, e a seção de privacidade mais abaixo mostra as opções.

Como configurar a gravação de sessão no React Native com a UXCam

Antes de começar, você vai precisar de uma conta na UXCam e da app key do seu dashboard. O projeto deve usar React Native 0.68 ou superior, ou Expo SDK 47 ou superior. Os builds precisam de deployment target iOS 12.0 ou superior e minSdkVersion 21 ou superior no Android.

1. Adicione o pacote: rode npm install react-native-ux-cam ou yarn add react-native-ux-cam. Depois rode pod install na pasta ios para vincular o SDK nativo de iOS.

2. Inicialize a UXCam uma vez: importe RNUxcam de react-native-ux-cam e inicie a UXCam em um useEffect no componente App raiz. Primeiro chame RNUxcam.optIntoVideoRecording(), que o vídeo da tela exige no iOS e no Android. Depois chame RNUxcam.startWithConfiguration() com a sua app key. O quick start de React Native da UXCam também recomenda duas configurações: enableAutomaticScreenNameTagging como false e enableImprovedScreenCapture como true.

3. Nomeie suas telas: chame RNUxcam.tagScreenName() em cada tela, normalmente dentro do useFocusEffect do React Navigation. A próxima seção mostra os padrões que funcionam melhor.

4. Confira a primeira sessão: rode o app em um dispositivo ou simulador e passe por três ou quatro telas durante uns 30 segundos. Depois mande o app para segundo plano. Isso encerra a sessão e inicia o envio, e a sessão aparece no dashboard em cerca de um minuto.

5. Personalize no dashboard: renomeie telas, defina regras de privacidade de vídeo, crie os eventos que importam e salve os filtros que o time mais vai usar.

Nada apareceu? Ative enableIntegrationLogging e amarre ao __DEV__, para ficar desligado nos builds de release. Depois confira os logs nativos no console do Xcode, no iOS, e no Logcat do Android Studio, no Android. Eles não aparecem no Metro, no VS Code nem no Cursor, o que pega muita gente de surpresa.

Procure as mensagens "Verification successful" e "Session uploaded". O guia de solução de problemas de React Native cobre as causas mais comuns. Elas vão de uma app key errada a um app que nunca vai para segundo plano durante os testes. Para ver todas as opções de configuração e exemplos de código, consulte o guia completo de integração com React Native.

Como nomear telas do React Native para replays mais claros

Um replay só é tão útil quanto os nomes de tela ao redor dele. Os nomes de tela dividem cada sessão em blocos na linha do tempo e alimentam os filtros por tela. Eles também abastecem mapas de calor, funis e a análise de jornadas.

No React Native, os nomes de tela são algo que você define de propósito. Suas telas são componentes JavaScript, então não disparam os eventos de ciclo de vida nativos dos quais a nomeação automática depende. Por isso, o guia de nomeação de telas da UXCam considera a nomeação automática pouco confiável no React Native. Ele recomenda fortemente a nomeação manual, com enableAutomaticScreenNameTagging definido como false.

Com o React Navigation, o padrão mais simples é chamar RNUxcam.tagScreenName() dentro do useFocusEffect, envolvido em useCallback. Assim, o nome é registrado sempre que a tela ganha foco, inclusive quando o usuário volta para ela. Muitos times colocam isso em um pequeno hook useScreenTracking e chamam o hook no topo de cada tela.

Prefere concentrar tudo em um só lugar? Adicione um handler onStateChange ao NavigationContainer, leia o nome da rota atual a partir de uma navigation ref e registre esse nome sempre que ele mudar. Em qualquer caso, use nomes legíveis, como Detalhes do produto ou Pagamento do checkout, e não nomes de componentes. São esses os nomes que o time de produto vai buscar e filtrar.

Abas e modais pedem um cuidado a mais. Nomeie cada tela de aba separadamente, com algo como Aba Home. Senão todas as abas ficam sob uma única tela, e a linha do tempo, os mapas de calor e os funis misturam tudo. Nomeie os modais quando eles ficam visíveis, para que apareçam como telas próprias.

Deixe IDs dinâmicos fora dos nomes. Detalhes do produto - Eletrônicos é um bom nome de tela. Já Detalhes do produto - 12345 transforma uma tela em milhares e fragmenta os seus dados. Se o nome de uma tela depende de dados que você busca, registre o nome depois que esses dados chegarem.

O guia de nomeação com bibliotecas de navegação da UXCam cobre outros cenários. No React Native Navigation da Wix, o componentDidAppear resolve. No Expo Router, você nomeia as telas no layout raiz com useSegments. Para telas feitas com WebViews, o guia de nomeação em WebViews mostra como nomear páginas a partir das mudanças de URL. Quando a URL não muda, você pode usar uma ponte JavaScript.

Qualquer que seja a abordagem, confira o resultado em uma sessão de debug. Cada tela deve aparecer uma única vez, com duração acima de zero segundo e sem entradas Unknown ou nomes de componentes. Uma tela de 0s normalmente indica dois registros no mesmo frame, muitas vezes por causa de uma nova renderização. Registros com menos de 300 milissegundos de diferença também se fundem, então use debounce em trocas rápidas de aba.

Gravação de sessão em apps Expo

A UXCam funciona em projetos Expo com uma condição: ela não roda dentro do Expo Go. O SDK da UXCam inclui código nativo de iOS e Android, e o Expo Go só carrega os módulos nativos que já vêm com ele. Então use um development build ou o EAS Build. É assim que a maioria dos apps Expo em produção já é gerada.

Na prática, você instala o EAS CLI e roda eas build:configure. Em seguida, adiciona o react-native-ux-cam com o mesmo código de inicialização mostrado acima. Crie um development build com eas build --profile development para iOS ou Android e inicie o servidor com npx expo start --dev-client. A partir daí, a UXCam inicializa com acesso completo aos seus módulos nativos.

Vale conhecer dois erros. Se aparecer "RNUxcam is null" ou "undefined", o app está rodando no Expo Go. Se o build falhar por falta de um módulo nativo, rode npx expo prebuild e gere o build de novo.

Todo o resto deste guia continua valendo. Nomeie as telas, mascare as views sensíveis e registre os eventos que importam. Apps com Expo Router podem fazer a nomeação uma vez no layout raiz. O guia de instalação com Expo da UXCam traz o passo a passo completo e uma tabela com os erros mais comuns.

Benefícios da gravação de sessão da UXCam para o seu app React Native

A gravação de sessão da UXCam mostra como as pessoas usam o seu app React Native nas duas plataformas, com uma única integração. Veja o que você ganha:

• Configuração que combina com React Native: um pacote para iOS e Android e poucas linhas no componente raiz. A gravação começa sem marcar cada botão, e a Nova Arquitetura e os development builds do Expo são compatíveis.

• Telas que acompanham a sua navegação: nomeie telas a partir do React Navigation, do Expo Router ou da navegação da Wix. Os replays se dividem nas telas de que o time realmente fala.

• Privacidade no próprio aparelho: campos de senha e de cartão são mascarados automaticamente. Regras no dashboard, oclusões na configuração e mascaramento por view escondem o resto antes que a sessão saia do celular.

• Problemas ligados a sessões reais: falhas nativas, ANRs, travamentos de interface e rage taps aparecem sinalizados no replay. Você vê exatamente o que levou até eles.

• Insights antes de você perguntar: a Tara trabalha sobre os mesmos dados capturados automaticamente. Ela mostra o que mudou e onde os usuários travam, e você começa por uma descoberta, não por uma lista vazia de sessões.

Principais componentes de uma sessão da UXCam

A gravação de sessão da UXCam vem com filtros, etiquetas, notas e análise de eventos. O time encontra as sessões que importam, pula para o momento certo e resolve os problemas junto no dashboard. Cada sessão também mostra quem é o usuário: localização, dispositivo, versão do sistema e do app, falhas, travamentos e as suas propriedades personalizadas. Você tem o contexto antes de dar o play.

Barra de informações da sessão

O painel no topo do replay mostra o alias ou o ID do usuário, localização, dispositivo, horário da sessão e rótulos. Se houve uma falha ou um travamento de interface, a UXCam sinaliza automaticamente. Clique no indicador para abrir os logs técnicos e diagnosticar o problema rapidamente.

Linha do tempo detalhada (aba Atividade)

A linha do tempo mostra a jornada completa entre telas e ações. Os blocos representam as telas que você nomeou, e cada bloco mostra quanto tempo o usuário ficou ali. Clique em qualquer interação para ir direto àquele ponto do replay. Ícones marcam toques, gestos, rage taps e eventos personalizados, então você percorre uma sessão longa sem assistir a tudo.

Filtros avançados para encontrar sessões importantes

Os filtros mostram as sessões certas na hora. Você pode filtrar por:

• Ações do usuário (toques, deslizes, rolagens e telas visitadas)

• Problemas técnicos (falhas, travamentos de interface)

• Atributos do usuário (dispositivo, localização, sistema operacional, versão do app e as suas propriedades personalizadas)

• Características da sessão (duração, nível de engajamento)

Também dá para excluir testadores internos. Filtre sinais de frustração, como rage taps e gestos sem resposta, para ver onde estão os problemas de usabilidade e em qual plataforma.

Etiquetar sessões

As etiquetas ajudam a encontrar e agrupar sessões em torno de um problema. Adicione uma etiqueta como "bug no checkout" ou uma mensagem de erro específica. Qualquer pessoa do time consegue, então, reduzir milhares de sessões às que mostram aquele problema. As etiquetas também mantêm produto, design, QA e engenharia alinhados.

Deixe notas para alinhar o time

As notas permitem marcar um momento direto na linha do tempo do replay, descrever o que deu errado ou sugerir uma melhoria. Quem abrir a sessão depois já recebe esse contexto, mesmo em outro fuso horário.

Analise eventos

A análise de eventos leva você de um evento personalizado direto ao momento em que ele aconteceu no replay. É o caminho mais rápido para entender o comportamento em torno de ações-chave, como compras, etapas de onboarding ou pagamentos recusados. Assista às sessões ligadas a um evento ou vá para os relatórios e veja a tendência por trás dele.

Privacidade e segurança na gravação de sessão com React Native

A gravação de sessão registra o que os usuários veem, então coloque a privacidade na integração desde o primeiro dia. A UXCam mascara o conteúdo no próprio aparelho. Tudo o que é ocultado some antes do envio da sessão e nunca chega aos servidores da UXCam. A UXCam está em conformidade com a GDPR e a CCPA, e a página de segurança e privacidade explica como os dados são armazenados e processados.

Por padrão, campos TextInput com secureTextEntry e campos padrão de cartão de crédito são mascarados automaticamente. Todo o resto continua visível no replay até você ocultar, de nomes e endereços a saldos de conta. Planeje o mascaramento junto com a nomeação das telas.

A opção mais rápida não exige código. No dashboard da UXCam, abra Settings e depois Video Recording Privacy. Escolha Record, Occlude ou Blur para todas as telas ou para telas específicas. Você pode ajustar o raio de desfoque e escolher se os gestos são gravados. As regras do dashboard têm prioridade: uma regra para uma tela específica vence uma regra global, e as duas vencem as regras do SDK.

No código, a UXCam recomenda colocar as regras de privacidade na configuração, para que fiquem ativas desde o primeiro frame. O array occlusions aceita três tipos de regra: uma sobreposição com cor, um desfoque com raio ou uma regra que oculta todos os campos de texto. Cada regra recebe uma lista de nomes de tela e a opção hideGestures. Os tipos se chamam OcclusionType.Overlay, OcclusionType.Blur e OccludeAllTextFields.

É aqui que bons nomes de tela se pagam pela segunda vez. Uma única regra para Login e Dados de pagamento cobre essas telas por qualquer caminho que o usuário faça. Há uma diferença entre plataformas. No Android, a lista de telas é ignorada para OccludeAllTextFields, que passa a valer para todas as telas, e o escopo por tela desse tipo só funciona no iOS.

Para um componente específico, passe a ref dele para RNUxcam.occludeSensitiveView(), por exemplo em um campo de número de cartão ou de documento. Inputs personalizados que envolvem um TextInput precisam repassar a ref para a view interna. O SDK atual também traz o componente UXCamOccludedView. Coloque-o em volta de qualquer área sensível, e ele registra a oclusão pelo ciclo de vida da view nativa, sem esperar um callback de montagem do JavaScript.

Quer ocultar todos os campos de texto enquanto uma tela sensível está aberta? Chame RNUxcam.occludeAllTextFields(true) e desligue de novo quando o usuário sair. O guia de oclusão e o guia de oclusão por view trazem exemplos para formulários, modais e listas dinâmicas.

WebViews pedem um plano próprio. Você pode adicionar a classe uxcam-occlude aos elementos HTML sensíveis ou injetar CSS quando não controla a página. Mas o mascaramento por elemento cai por cerca de um segundo enquanto a WebView carrega uma nova página. Ele também não enxerga iframes de outra origem, como widgets de pagamento ou formulários de SSO.

Em fluxos de pagamento, saúde e outros dados regulados, oculte a WebView inteira passando a ref dela para occludeSensitiveView. Essa máscara é aplicada de forma nativa no contêiner e permanece durante as navegações. Você ainda pode registrar um evento por etapa para manter a visibilidade do funil. O guia de oclusão em WebViews explica os prós e contras.

Às vezes não deve existir nenhum frame, por exemplo durante uma autenticação biométrica. Chame RNUxcam.pauseScreenRecording() nesse trecho e resumeScreenRecording() depois. A sessão continua, mas nada é capturado enquanto a gravação está pausada. Prefira a oclusão quando você ainda quiser os gestos e o tempo daquela tela.

O consentimento também importa, e o SDK inclui os usuários por padrão. RNUxcam.optOutOverall() interrompe e apaga a sessão atual e desativa a gravação para aquele usuário. Para reativar, chame optInOverall(), e optInOverallStatus() retorna o estado atual.

Essa escolha volta ao padrão depois de uma reinstalação. Então guarde a decisão do usuário e aplique ao iniciar o app, ou só inicie a UXCam depois que a pessoa concordar. O guia de opt-in e opt-out mostra um fluxo de consentimento completo. Identifique os usuários com um ID interno, e não com e-mail ou telefone, e mantenha dados pessoais fora das propriedades de eventos e de usuários.

Adicione eventos, identidade do usuário e contexto de falhas

As telas mostram para onde os usuários vão; os eventos mostram o que eles fazem. RNUxcam.logEvent() recebe o nome do evento e, se você quiser, até 20 propriedades, como plano ou preço. Os valores podem ser texto, número ou booleano.

Nomes e chaves de propriedades diferenciam maiúsculas de minúsculas, então combine uma convenção cedo. O guia de eventos da UXCam recomenda nomes em snake_case, como checkout_completed. Deixe valores dinâmicos nas propriedades, e não no nome. Cada evento aparece como um marcador na linha do tempo do replay, então filtrar por payment_failed leva você direto ao momento em que aconteceu.

Alguns sinais não exigem código nenhum. Rage taps e travamentos de interface são detectados automaticamente e registrados como eventos. Um travamento é registrado quando a thread principal fica sem responder por dois segundos ou mais. Filtrar por qualquer um deles é uma das formas mais rápidas de encontrar usuários frustrados em um app grande.

Como a UXCam captura gestos e telas automaticamente, você também pode criar smart events depois, no dashboard, sem lançar uma nova versão.

Quando um chamado de suporte cita um usuário específico, você quer as sessões dele, e não um alias aleatório. RNUxcam.setUserIdentity() troca o alias que a UXCam gera a partir do ID de instalação pelo seu próprio ID de usuário. Chame essa função assim que a pessoa fizer login.

RNUxcam.setUserProperty() adiciona atributos como tipo de assinatura ou cargo. Você pode usar até 100 chaves de propriedade por app, e elas viram filtros e segmentos para os seus replays. Para informações sobre uma única sessão, como o grupo de um teste A/B ou uma marcação de QA, use RNUxcam.setSessionProperty(). O guia de propriedades de usuário traz os detalhes.

No lado das falhas, a UXCam captura automaticamente as falhas nativas de iOS e Android, junto com ANRs e travamentos de interface. Cada uma fica ligada ao seu replay na área Issues do dashboard.

Exceções de JavaScript funcionam de outro jeito. O runtime do React Native trata essas exceções antes que cheguem à camada nativa, então elas não aparecem como falhas. O SDK React Native também não tem uma chamada reportExceptionEvent(). O guia de falhas da UXCam sugere uma solução simples.

Envolva o handler global de erros do React Native, o ErrorUtils.setGlobalHandler. Nessa função, registre um evento js_error com o nome do erro, a mensagem e se ele foi fatal. Depois repasse o erro para o handler anterior. A mesma chamada de logEvent funciona no componentDidCatch de um error boundary ou em um bloco catch. Filtre por js_error, e você tem o replay por trás de cada erro de JavaScript.

Você também usa o Firebase Crashlytics ou outra ferramenta de falhas? Então decida na inicialização qual ferramenta fica responsável pelas falhas, porque dois handlers podem entrar em conflito. Para deixar as falhas com a outra ferramenta, defina enableCrashHandling como false na configuração da UXCam. No iOS, isso também desliga a captura de ANRs e de travamentos.

Em qualquer caso, RNUxcam.urlForCurrentSession() retorna o link da sessão atual. Anexe esse link a um relatório de falha, a um ticket de bug ou a uma conversa de suporte.

Impacto no desempenho e controle da gravação

Muitos desenvolvedores fazem a mesma pergunta antes de adicionar qualquer SDK: "A gravação de sessão vai deixar meu app React Native mais lento?"

A UXCam grava nos seus SDKs nativos de iOS e Android, e não no seu bundle JavaScript. Ela envia as sessões quando o app vai para segundo plano, e não enquanto os usuários estão interagindo. Você pode ler mais sobre como o SDK foi construído em por que a UXCam tem um dos SDKs com melhor desempenho. Como em qualquer SDK, meça o efeito antes de liberar para todo mundo, com um build de release em um Android de entrada.

Controle o que é gravado

As sessões terminam quando o app vai para segundo plano. As APIs de controle de gravação dão um controle mais fino além disso.

RNUxcam.stopSessionAndUploadData() encerra e envia uma sessão quando você quiser. Isso é útil quando o usuário termina um fluxo sem sair do app. A função também aceita um callback para quando o envio termina.

Depois de uma parada, startNewSession() volta a gravar, e isRecording() informa o estado atual. Você também pode iniciar a UXCam de forma condicional, por exemplo só depois que o usuário der consentimento.

Mantenha sessões de teste fora dos dados de produção

Use app keys diferentes para desenvolvimento e produção, como recomenda o guia de React Native da UXCam. Carregue as chaves de variáveis de ambiente ou do seu pipeline de CI e nunca coloque as chaves no repositório. Outra opção é iniciar a UXCam só nos builds de release.

Adicione também filtros no dashboard que excluem testadores internos. Os replays ficam focados em usuários reais, e o analytics fica livre do ruído de testes.

Problemas comuns de React Native que a gravação de sessão resolve

Alguns problemas de React Native são difíceis de pegar só com logs ou analytics. A gravação de sessão ajuda a diagnosticar casos como estes:

• Toques que não respondem: áreas de Pressable sobrepostas, uma view invisível posicionada em cima de um botão ou uma área de toque pequena demais. Os rage taps no replay mostram exatamente onde os usuários insistem.

• Teclado cobrindo campos: o KeyboardAvoidingView se comporta de forma diferente no iOS e no Android. Os replays mostram usuários rolando e tocando para alcançar um campo escondido.

• Conflitos de gestos: uma linha com swipe dentro de uma lista rolável, ou um gesto de voltar que disputa espaço com um carrossel horizontal. O usuário acaba repetindo o mesmo gesto.

• Comportamento de listas: áreas em branco em uma FlatList durante uma rolagem rápida, ou imagens que carregam devagar em aparelhos Android mais antigos.

• Travamentos e telas lentas: trabalho pesado na thread principal pode congelar a interface. A UXCam sinaliza o travamento, e o replay mostra o que o usuário fazia quando o app parou de responder.

• Diferenças entre plataformas: o mesmo JavaScript renderiza componentes nativos diferentes. Seletores de data, modais e pedidos de permissão podem se comportar de outro jeito no iOS e no Android.

• Regressões depois de uma atualização over-the-air: se você envia mudanças de JavaScript com o EAS Update, a versão do app não muda. Registre o ID da atualização como propriedade da sessão e compare as sessões de antes e depois.

• Abandono no onboarding: os replays mostram por que os usuários desistem de fluxos com várias etapas, de um texto confuso a um pedido de permissão na hora errada.

Boas práticas de gravação de sessão no React Native

Estas práticas ajudam você a tirar o máximo da gravação de sessão, da configuração à análise e ao trabalho em equipe.

1. Nomeie telas e mascare views sensíveis antes do lançamento

Nomes de tela e regras de privacidade são mais fáceis de acertar antes da primeira versão em produção. Nomeie todas as telas e confira se cada uma aparece uma única vez com uma duração real. Depois grave uma sessão de debug pelos fluxos de login, pagamento e perfil e confirme que nada sensível fica visível. Teste no iOS e no Android, porque algumas opções de oclusão mudam de uma plataforma para outra.

2. Registre eventos-chave para ter contexto

A gravação de sessão fica muito mais útil com dados de eventos ao lado. Registre um conjunto enxuto de ações que definem sucesso no seu app, como cadastros, compras e pagamentos recusados. Inclua os erros de JavaScript que você registra no handler global. Com as propriedades dos eventos junto dos replays, fica mais fácil validar a adoção de funcionalidades, investigar ações que falharam e confirmar decisões de design.

3. Use funis para diagnosticar abandonos

Os funis mostram onde os usuários abandonam fluxos importantes, como onboarding, checkout ou cadastro. Como a UXCam conecta os funis à gravação de sessão, você vai da etapa em que os usuários desistiram direto para as sessões deles e vê o atrito que encontraram. Um número de conversão vira uma correção específica.

4. Assista a sessões das duas plataformas e de vários aparelhos

Apps React Native costumam mudar de comportamento conforme o tamanho da tela, a capacidade de processamento e a versão do sistema. Filtre por plataforma e dispositivo e assista a replays de celulares pequenos, tablets e aparelhos Android mais antigos. Você vai encontrar problemas de layout, conflitos de gestos e lentidões que os testes internos com aparelhos de última geração não pegam.

5. Deixe a Tara apontar as sessões que valem a pena

Assistir a sessões aleatórias não escala. A Tara, analista de IA da UXCam, trabalha sobre os dados que a UXCam já captura. Ela mostra o que mudou depois de um lançamento, quais telas frustram os usuários e quais segmentos se comportam de outro jeito. As sessões relevantes já vêm junto. Se o seu time usa assistentes de IA, como o Claude ou o Cursor, o servidor MCP da UXCam leva esses mesmos dados até eles.

6. Envolva os times de produto, design e QA

A gravação de sessão rende mais quando todos os times usam, e a engenharia é só o começo. Gerentes de produto conferem se as novas funcionalidades funcionam como deveriam. Designers observam padrões reais de interação. O QA reproduz bugs assistindo ao replay, em vez de adivinhar os passos. Quando todo mundo trabalha a partir das mesmas sessões, as decisões ficam mais rápidas e se apoiam no comportamento real dos usuários.

Crie uma experiência melhor com a UXCam

A UXCam dá aos times de React Native uma visão clara de como os usuários se movem pelos apps iOS e Android. A mesma conta cobre o seu site com o analytics web da UXCam. A Tara mostra o que mudou e onde os usuários travam antes que você pergunte. Os replays e os mapas de calor mostram o porquê, e os dashboards e funis medem se as suas correções funcionaram.

A configuração leva poucas linhas no componente raiz, um nome por tela e uma revisão de privacidade nas views sensíveis. Comece a usar a UXCam e assista hoje mesmo à primeira sessão do seu app React Native.

Você também pode se interessar por:

Relatório de falhas no React Native: melhores ferramentas e técnicas

Gravação de sessão no Flutter com a UXCam

10 ferramentas de gravação de sessão mobile para times de produto e devs

As melhores ferramentas de analytics para apps