Pular para o conteúdo principal
Os Drains do Vercel oferecem suporte para Web Vitals através do Speed Insights drain. Essas métricas podem servir como sinais para entregar uma ótima experiência de usuário na web. Para começar a receber Web Vitals no AppSignal, habilite Speed Insights, adicione o pacote @vercel/speed-insights ao seu projeto e crie um Speed Insights drain.

​
1. Habilite o Speed Insights

Na página da sua organização, clique no projeto para o qual você gostaria de habilitar o Speed Insights. Em seguida, clique na aba Speed Insights, onde será apresentado um diálogo Enable Speed Insights. Captura de tela do diálogo "Enable Speed Insights" na UI do Vercel Clique em Purchase para habilitar o Speed Insights.

​
2. Adicione @vercel/speed-insights ao seu projeto

Adicione o pacote @vercel/speed-insights ao seu projeto e inclua o componente <SpeedInsights /> no seu app. 
npm install @vercel/speed-insights
Isso adicionará um script à página e começará a rastrear os Web Vitals. Para instruções mais detalhadas, acesse a página de documentação do Vercel.

​
3. Configure o Speed Insights drain

Em um projeto do Vercel, navegue até a página Settings > Drains e clique em Add Drain. Captura de tela da etapa "Add Drain" na UI do Vercel Selecione Speed Insights como o tipo de drain e clique em Next. Captura de tela da etapa "Add Drain" na UI do Vercel Adicione um nome descritivo para o drain, como ‘AppSignal speed insights drain’. A opção Specific projects junto com seu projeto deve estar pré-selecionada na seção Projects. Se não estiver, certifique-se de selecionar apenas o projeto para o qual você habilitou o Speed Insights. Clique em Next. Captura de tela da etapa "Configure drain" na UI do Vercel Para o destination, insira a URL a seguir substituindo <api_key> pela push API key de nível de app do AppSignal, que pode ser encontrada em App settings: 
https://appsignal-endpoint.net/metrics/speed-insights?api_key=<api_key>
Você pode encontrar mais informações sobre AppSignal API keys na seção de autenticação do endpoint público da API do AppSignal.
Pressionar Test enviará um trace de teste ao AppSignal. Clique em Create Drain. Em uma configuração bem-sucedida, um novo magic dashboard será criado para você com os Web Vitals do Next.js.