chore: update web vitals monitoring doc

components/Dashboards/DashboardTemplatesListicle.tsx

@@ -176,6 +176,12 @@ const DashboardTemplatesData: IconCardData[] = [
     icon: <Globe className="h-7 w-7 text-black" />,
     clickName: 'Flask Monitoring Dashboard Template',
   },
+  {
+    name: 'Frontend Monitoring',
+    href: '/docs/dashboards/dashboard-templates/frontend-monitoring',
+    icon: <Network className="h-7 w-7 text-white" />,
+    clickName: 'Frontend Monitoring Dashboard Template',
+  },
   {
     name: 'GCP Compute Engine',
     href: 'https://github.com/SigNoz/dashboards/tree/main/gcp/compute-engine',

components/FrontendMonitoring/WebVitalsGrid.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import {
+  FiBarChart
+} from 'react-icons/fi'
+import { TbTimeline } from 'react-icons/tb'
+
+interface IconCardData {
+  name: string
+  href: string
+  icon: React.ReactNode
+  clickName: string
+}
+
+const integrationsData: IconCardData[] = [
+  {
+    name: 'Sending Web Vitals as Metrics',
+    href: '/docs/frontend-monitoring/web-vitals-with-metrics',
+    icon: <FiBarChart className="h-7 w-7 text-red-500" />,
+    clickName: 'Sending Web Vitals as Metrics',
+  },
+  {
+    name: 'Sending Web Vitals as Traces',
+    href: '/docs/frontend-monitoring/web-vitals-with-traces',
+    icon: <TbTimeline className="h-7 w-7 text-blue-600" />,
+    clickName: 'Sending Web Vitals as Traces',
+  },
+]
+
+export default function Integrations() {
+  return (
+    <div>
+      <div className="mb-6 text-left">
+          <h2 className="mb-2 text-2xl font-semibold text-signoz_vanilla-100">Web Vitals</h2>
+        <p className="text-base text-signoz_vanilla-400">Send web vitals to SigNoz using OpenTelemetry</p>
+      </div>
+    <div className={`grid gap-4 grid-cols-2`}>
+      {integrationsData.map((card, index) => (
+        <a
+          key={index}
+          href={card.href}
+          className="flex flex-col items-center justify-center rounded-lg border border-signoz_slate-400 bg-signoz_ink-400 p-4 text-center no-underline transition-all hover:border-signoz_robin-500 hover:bg-signoz_ink-300"
+        >
+          <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-md">
+            {card.icon}
+          </div>
+          <span className="text-sm font-medium text-signoz_vanilla-100">{card.name}</span>
+      </a>
+    ))}
+    </div>
+    </div>
+  )
+}

constants/docsSideNav.ts

@@ -1772,6 +1772,11 @@ const docsSideNav = [
             route: '/docs/dashboards/dashboard-templates/docker-container-metrics',
             label: 'Docker Container',
           },
+          {
+            type: 'doc',
+            route: '/docs/dashboards/dashboard-templates/frontend-monitoring',
+            label: 'Frontend Monitoring',
+          },
           {
             type: 'doc',
             route: '/docs/dashboards/dashboard-templates/google-gemini-dashboard',
@@ -2197,9 +2202,22 @@ const docsSideNav = [
         label: 'Sending Metrics',
       },
       {
-        type: 'doc',
+        type: 'category',
+        isExpanded: false,
         route: '/docs/frontend-monitoring/opentelemetry-web-vitals',
         label: 'Web Vitals',
+        items: [
+          {
+            type: 'doc',
+            route: '/docs/frontend-monitoring/web-vitals-with-metrics',
+            label: 'Web Vitals with Metrics',
+          },
+          {
+            type: 'doc',
+            route: '/docs/frontend-monitoring/web-vitals-with-traces',
+            label: 'Web Vitals with Traces',
+          },
+        ],
       },
       {
         type: 'doc',

data/docs/dashboards/dashboard-templates/frontend-monitoring.mdx

@@ -0,0 +1,100 @@
+---
+date: 2025-11-11
+id: frontend-monitoring
+title: Frontend Monitoring Dashboards
+description: Monitor your website's performance and user experience with Core Web Vitals metrics using OpenTelemetry.
+tags: [SigNoz Cloud, Self-Host]
+---
+
+SigNoz provides comprehensive frontend monitoring capabilities through Core Web Vitals tracking. These dashboards help you measure real user experience by capturing essential performance metrics from actual user sessions across your web applications.
+
+## Dashboard Preview
+
+<Figure
+  src="/img/docs/dashboards/dashboard-templates/web-vitals-dashboard.webp"
+  alt="Web Vitals"
+  caption="Web Vitals Dashboard Template"
+/>
+
+## Available Dashboard Templates
+
+We provide two dashboard templates based on how you choose to export your web vitals data:
+
+### Web Vitals with Metrics
+
+<div className="flex justify-center">
+  <DashboardActions
+    dashboardJsonUrl="https://raw.githubusercontent.com/SigNoz/dashboards/refs/heads/main/frontend-monitoring/web-vitals-monitoring-with-metrics.json"
+    dashboardName="Web Vitals Metrics Dashboard"
+  />
+</div>
+
+**Best for**: Large-scale deployments requiring sampling and aggregated statistical analysis
+
+- Learn how to set up: [Web Vitals Monitoring with Metrics](/docs/frontend-monitoring/web-vitals-with-metrics)
+
+### Web Vitals with Traces
+
+<div className="flex justify-center">
+  <DashboardActions
+    dashboardJsonUrl="https://raw.githubusercontent.com/SigNoz/dashboards/refs/heads/main/frontend-monitoring/web-vitals-monitoring-with-traces.json"
+    dashboardName="Web Vitals Traces Dashboard"
+  />
+</div>
+
+**Best for**: Debugging specific user issues and detailed performance analysis
+
+- Learn how to set up: [Web Vitals Monitoring with Traces](/docs/frontend-monitoring/web-vitals-with-traces)
+
+## What These Dashboards Monitor
+
+Both dashboard templates track the Core Web Vitals—essential metrics for measuring user experience on your website:
+
+### Core Web Vitals
+
+- **Largest Contentful Paint (LCP)**: Measures loading performance. Marks the time when the largest content element becomes visible.
+- **Interaction to Next Paint (INP)**: Measures interactivity. Assesses page responsiveness to user interactions.
+- **Cumulative Layout Shift (CLS)**: Measures visual stability. Quantifies unexpected layout shifts during page load.
+
+### Additional Web Vitals
+
+- **Time to First Byte (TTFB)**: Measures server response time. The time from request to first byte received.
+- **First Contentful Paint (FCP)**: Measures when the first content element renders on screen.
+
+## Choosing Between Metrics and Traces
+
+Both approaches capture the same web vitals but differ in how they're exported and analyzed:
+
+### Metrics Approach
+
+- **Ideal for**: Production environments with high traffic
+- **Benefits**:
+  - Efficient aggregation with percentiles and histograms
+  - Better for trend analysis and alerting
+  - Supports sampling strategies for cost optimization
+  - Lower storage requirements
+- **Use when**: You need to monitor overall performance trends across your user base
+
+### Traces Approach
+
+- **Ideal for**: Development and debugging scenarios
+- **Benefits**:
+  - Granular visibility into individual user experiences
+  - Easier correlation with other trace data
+  - Rich context with custom attributes (browser, user ID, device type)
+  - Better for investigating specific user issues
+- **Use when**: You need detailed insights for troubleshooting or development
+
+Learn more about choosing the right approach: [Web Vitals Overview](/docs/frontend-monitoring/opentelemetry-web-vitals)
+
+## Dashboard Features
+
+Both dashboard templates include:
+
+- **Real-time monitoring**: Track web vitals as users interact with your site
+- **Filtering capabilities**: Segment data by page, browser, device, or custom attributes
+- **Historical trends**: Analyze performance changes over time
+
+## Additional Resources
+
+- [OpenTelemetry Web Vitals Overview](/docs/frontend-monitoring/web-vitals)