sentry icon indicating copy to clipboard operation
sentry copied to clipboard

The Web Vitals subpanel in the Performance panel has no data

Open SouthLink opened this issue 1 year ago • 9 comments

Environment

self-hosted (https://develop.sentry.dev/self-hosted/)

Steps to Reproduce

I am using sentry self-hosted for web performance data and would like to use them for INP performance metrics:

Here is the version of the framework I am using: next.js 14.0.0 react 18.0.0 "@sentry/nextjs":"^7.109.0", "@sentry/react":"^7.109.0", "@sentry/tracing": "^7.109.0",

sentry hosting platform : 24.3.0

I am using the above SDK to analyze the web performance data but found that the Web Vitals panel in the Performance panel has no data but the Performance panel is accepting the data just fine

Also, my SDK version was updated to 7.109.0, but no data was collected for INP metrics.

Here is my sentry configuration

// sentry.client.config

import * as Sentry from "@sentry/nextjs";

if (process.env.NODE_ENV === "production" || process.env.NEXT_PUBLIC_SERVER_ENV === "test") {
  Sentry.init({
    dsn: "https://[email protected]/xxx",
    sampleRate: 0.2,
    tracesSampleRate: 0.1,
    profilesSampleRate: 0.3,
    environment: process.env.NODE_ENV,
    replaysSessionSampleRate: 0,
    replaysOnErrorSampleRate: 0.1,
    integrations: [
      // new Sentry.Replay(),
      new Sentry.browserTracingIntegration({
        beforeNavigate: (context) => {
          return {
            ...context,
            name: location.pathname
              .replace(/id=\d+/, "id=id")
              .replace(/\/\d+/g, "/:id")
              .replace(/\/tag\/.*/, "/tag/:id"),
          };
        },
        enableInp: true,
      }),
      new Sentry.Replay({
        maskAllText: false,
        maskAllInputs: false,
      }),
    ],
    initialScope: {
      tags: {
        upload_tag: "sentry-client",
      },
    },
  });
}

Expected Result

The data in the Web Vitals panel can be displayed normally

Actual Result

image performance panel

image Web Vitals panel

Product Area

Performance - Web Vitals

Link

No response

DSN

No response

Version

24.3.0

SouthLink avatar Apr 17 '24 03:04 SouthLink

Assigning to @getsentry/support for routing ⏲️

getsantry[bot] avatar Apr 17 '24 03:04 getsantry[bot]

Does anyone know how to solve this problem

SouthLink avatar May 08 '24 02:05 SouthLink

Routing to @getsentry/product-owners-performance for triage ⏲️

getsantry[bot] avatar May 09 '24 20:05 getsantry[bot]

Hi @SouthLink , can you try updating to the 7.114.0 version of the sdk? There are some fixes in the newer versions that may help with capturing webvitals.

Also, can you check to see if any of the following webvitals are missing from your events? measurements.cls measurements.lcp measurements.fcp measurements.ttfb The webvitals module may not show data if a combination of these webvitals are missing.

You should be able to check this in discover: image

Let me know if you need further details, thanks!

edwardgou-sentry avatar May 10 '24 15:05 edwardgou-sentry

Hi @SouthLink , can you try updating to the 7.114.0 version of the sdk? There are some fixes in the newer versions that may help with capturing webvitals.

Also, can you check to see if any of the following webvitals are missing from your events? measurements.cls measurements.lcp measurements.fcp measurements.ttfb The webvitals module may not show data if a combination of these webvitals are missing.

You should be able to check this in discover: image

Let me know if you need further details, thanks!

Thank you for your reply. I have updated the SDK to the latest 7.114.0, but I am confused that I still don't know how to check the INP data, and the data of LCP and CLS is also very small, but the number of logs is very large.

image

And I don't know how to view similar FCP and LCP data in performace panel, they seem to have a certain amount of logs. image

I tried a method to view performance metrics by selecting items from the Dashboards panel, and it seemed fine, but the performance and web vitals panel data showed very little performance data, so I was confused image

SouthLink avatar May 14 '24 02:05 SouthLink

Hi @SouthLink , I don't see anything wrong with the sentry configuration you posted and seems like you've updated to a more recent version of the sdk.

There's a couple of factors I can think of that might be causing you to not receive INP and other webvitals data:

  • INPs only get triggered on pagehide events (ie when the user changes tabs). If your users don't trigger pagehides, this might affect the amount of INPs you're seeing.
  • Your tracesSampleRate is set to 0.1. Not an issue by itself, but tracesSampleRate impacts the volume of INPs your website sends.
  • Your webpage may not have any interactive elements and only navigations

A combination of these factors might be causing to not see any INPs.

If your site is publicly hosted, would you be able to send me a link to your webpage with Sentry instrumented so that I may do some further investigation on the cause?

edwardgou-sentry avatar May 15 '24 19:05 edwardgou-sentry

你好@SouthLink,我没有发现您发布的哨兵配置有任何问题,并且似乎您已经更新到了 最新版本的 sdk。

我认为有几个因素可能会导致您无法收到 INP 和其他 webvitals 数据:

  • INP 仅在事件发生时触发pagehide(即当用户更改选项卡时)。如果您的用户不触发pagehides,这可能会影响您看到的 INP 数量。
  • 您的tracesSampleRate设置为0.1.本身不是问题,但tracesSampleRate会影响您网站发送的 INP 数量。
  • 您的网页可能没有任何交互元素,只有导航

这些因素的结合可能会导致看不到任何 INP。

如果您的网站是公开托管的,您能否向我发送一个带有 Sentry 检测的网页链接,以便我可以进一步调查原因?

Thank you for keeping an eye on my problems.

This is the URL of our website. It can be confirmed that there are many interactive elements on the webpage. sentry is added to the code base, and web-vitals is also quoted to collect inp data on the page and report it to the self-built statistical program through onINP. I wonder if there is a conflict between the referenced web-vitals and sentry, whether this is possible.

SouthLink avatar May 16 '24 06:05 SouthLink

Hi @SouthLink , thanks for sharing your webpage.

I viewed your page on a desktop browser and was able to trigger some INP events by clicking around, so I don't believe there is any configuration issue.

I noticed your webpage is for mobile, which we do not fully support for all web vitals yet. If most your traffic is from mobile users, this would explain why you're not seeing any/limited INP data.

We have plans to add better mobile support in future updates

edwardgou-sentry avatar May 16 '24 16:05 edwardgou-sentry

你好@SouthLink,感谢您分享您的网页。

我在桌面浏览器上查看了您的页面,并且能够通过单击来触发一些 INP 事件,因此我不认为存在任何配置问题。

我注意到您的网页适用于移动设备,但我们尚未完全支持所有 Web Vitals。如果您的大部分流量来自移动用户,这可以解释为什么您看不到任何/有限的 INP 数据。

我们计划在未来的更新中添加更好的移动支持

Thank you and I will keep up with your updates

SouthLink avatar May 17 '24 02:05 SouthLink