Skip to content

Commit 3a294ed

Browse files
amlannandyclaude[bot]
amlannandy
and
claude[bot]
authored
chore: update web vitals monitoring doc (#1796)
* chore: update web vitals monitoring doc * chore: update web vitals monitoring doc * chore: update web vitals monitoring doc * chore: update web vitals monitoring doc * add dashboard template for web vitals * add both traces and metrics as options * update images and links * add description for each dependency * update options grid * chore: address comments * additional changes * address comments * additonal changes * chore: update side nav * chore: additional changes * chore: add dashboard section * chore: update side nav * chore: address comments * chore: update lock file * chore: fix build issue * chore: update dashboard info * chore: minor fixes * chore: minor fixes * chore: address comments * chore: address additonal comments * chore: address additional comments * chore: address additional comments * Update data/docs/frontend-monitoring/web-vitals-with-traces.mdx Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com> * Update data/docs/frontend-monitoring/web-vitals-with-traces.mdx Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com> * Update data/docs/frontend-monitoring/web-vitals-with-metrics.mdx Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com> * Update data/docs/frontend-monitoring/web-vitals-with-metrics.mdx Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com> * chore: address additional comments * chore: address additional comments * chore: fix metadata issue * chore: fix metadata issue * chore: address comments * chore: address comments * chore: address comments * chore: fix metadata test --------- Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
1 parent 1a381b4 commit 3a294ed

File tree

13 files changed

+2702
-1839
lines changed

13 files changed

+2702
-1839
lines changed

‎components/Dashboards/DashboardTemplatesListicle.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,12 @@ const DashboardTemplatesData: IconCardData[] = [
176176
icon: <Globe className="h-7 w-7 text-black" />,
177177
clickName: 'Flask Monitoring Dashboard Template',
178178
},
179+
{
180+
name: 'Frontend Monitoring',
181+
href: '/docs/dashboards/dashboard-templates/frontend-monitoring',
182+
icon: <Network className="h-7 w-7 text-white" />,
183+
clickName: 'Frontend Monitoring Dashboard Template',
184+
},
179185
{
180186
name: 'GCP Compute Engine',
181187
href: 'https://github.com/SigNoz/dashboards/tree/main/gcp/compute-engine',

‎components/FrontendMonitoring/WebVitalsGrid.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react'
2+
import {
3+
FiBarChart
4+
} from 'react-icons/fi'
5+
import { TbTimeline } from 'react-icons/tb'
6+
7+
interface IconCardData {
8+
name: string
9+
href: string
10+
icon: React.ReactNode
11+
clickName: string
12+
}
13+
14+
const integrationsData: IconCardData[] = [
15+
{
16+
name: 'Sending Web Vitals as Metrics',
17+
href: '/docs/frontend-monitoring/web-vitals-with-metrics',
18+
icon: <FiBarChart className="h-7 w-7 text-red-500" />,
19+
clickName: 'Sending Web Vitals as Metrics',
20+
},
21+
{
22+
name: 'Sending Web Vitals as Traces',
23+
href: '/docs/frontend-monitoring/web-vitals-with-traces',
24+
icon: <TbTimeline className="h-7 w-7 text-blue-600" />,
25+
clickName: 'Sending Web Vitals as Traces',
26+
},
27+
]
28+
29+
export default function Integrations() {
30+
return (
31+
<div>
32+
<div className="mb-6 text-left">
33+
<h2 className="mb-2 text-2xl font-semibold text-signoz_vanilla-100">Web Vitals</h2>
34+
<p className="text-base text-signoz_vanilla-400">Send web vitals to SigNoz using OpenTelemetry</p>
35+
</div>
36+
<div className={`grid gap-4 grid-cols-2`}>
37+
{integrationsData.map((card, index) => (
38+
<a
39+
key={index}
40+
href={card.href}
41+
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"
42+
>
43+
<div className="mb-3 flex h-12 w-12 items-center justify-center rounded-md">
44+
{card.icon}
45+
</div>
46+
<span className="text-sm font-medium text-signoz_vanilla-100">{card.name}</span>
47+
</a>
48+
))}
49+
</div>
50+
</div>
51+
)
52+
}

‎constants/docsSideNav.ts‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1791,6 +1791,11 @@ const docsSideNav = [
17911791
route: '/docs/dashboards/dashboard-templates/docker-container-metrics',
17921792
label: 'Docker Container',
17931793
},
1794+
{
1795+
type: 'doc',
1796+
route: '/docs/dashboards/dashboard-templates/frontend-monitoring',
1797+
label: 'Frontend Monitoring',
1798+
},
17941799
{
17951800
type: 'doc',
17961801
route: '/docs/dashboards/dashboard-templates/google-gemini-dashboard',
@@ -2198,9 +2203,22 @@ const docsSideNav = [
21982203
label: 'Sending Metrics',
21992204
},
22002205
{
2201-
type: 'doc',
2206+
type: 'category',
2207+
isExpanded: false,
22022208
route: '/docs/frontend-monitoring/opentelemetry-web-vitals',
22032209
label: 'Web Vitals',
2210+
items: [
2211+
{
2212+
type: 'doc',
2213+
route: '/docs/frontend-monitoring/web-vitals-with-metrics',
2214+
label: 'Web Vitals with Metrics',
2215+
},
2216+
{
2217+
type: 'doc',
2218+
route: '/docs/frontend-monitoring/web-vitals-with-traces',
2219+
label: 'Web Vitals with Traces',
2220+
},
2221+
],
22042222
},
22052223
{
22062224
type: 'doc',

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
date: 2025-11-11
3+
id: frontend-monitoring
4+
title: Frontend Monitoring Dashboards
5+
description: Monitor your website's performance and user experience with Core Web Vitals metrics using OpenTelemetry.
6+
tags: [SigNoz Cloud, Self-Host]
7+
---
8+
9+
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.
10+
11+
## Dashboard Preview
12+
13+
<Figure
14+
src="/img/docs/dashboards/dashboard-templates/web-vitals-dashboard.webp"
15+
alt="Web Vitals"
16+
caption="Web Vitals Dashboard Template"
17+
/>
18+
19+
## Available Dashboard Templates
20+
21+
We provide two dashboard templates based on how you choose to export your web vitals data:
22+
23+
### Web Vitals with Metrics
24+
25+
<div className="flex justify-center">
26+
<DashboardActions
27+
dashboardJsonUrl="https://raw.githubusercontent.com/SigNoz/dashboards/refs/heads/main/frontend-monitoring/web-vitals-monitoring-with-metrics.json"
28+
dashboardName="Web Vitals Metrics Dashboard"
29+
/>
30+
</div>
31+
32+
**Best for**: Large-scale deployments requiring sampling and aggregated statistical analysis
33+
34+
- Learn how to set up: [Web Vitals Monitoring with Metrics](/docs/frontend-monitoring/web-vitals-with-metrics)
35+
36+
### Web Vitals with Traces
37+
38+
<div className="flex justify-center">
39+
<DashboardActions
40+
dashboardJsonUrl="https://raw.githubusercontent.com/SigNoz/dashboards/refs/heads/main/frontend-monitoring/web-vitals-monitoring-with-traces.json"
41+
dashboardName="Web Vitals Traces Dashboard"
42+
/>
43+
</div>
44+
45+
**Best for**: Debugging specific user issues and detailed performance analysis
46+
47+
- Learn how to set up: [Web Vitals Monitoring with Traces](/docs/frontend-monitoring/web-vitals-with-traces)
48+
49+
## What These Dashboards Monitor
50+
51+
Both dashboard templates track the Core Web Vitals—essential metrics for measuring user experience on your website:
52+
53+
### Core Web Vitals
54+
55+
- **Largest Contentful Paint (LCP)**: Measures loading performance. Marks the time when the largest content element becomes visible.
56+
- **Interaction to Next Paint (INP)**: Measures interactivity. Assesses page responsiveness to user interactions.
57+
- **Cumulative Layout Shift (CLS)**: Measures visual stability. Quantifies unexpected layout shifts during page load.
58+
59+
### Additional Web Vitals
60+
61+
- **Time to First Byte (TTFB)**: Measures server response time. The time from request to first byte received.
62+
- **First Contentful Paint (FCP)**: Measures when the first content element renders on screen.
63+
64+
## Choosing Between Metrics and Traces
65+
66+
Both approaches capture the same web vitals but differ in how they're exported and analyzed:
67+
68+
### Metrics Approach
69+
70+
- **Ideal for**: Production environments with high traffic
71+
- **Benefits**:
72+
- Efficient aggregation with percentiles and histograms
73+
- Better for trend analysis and alerting
74+
- Supports sampling strategies for cost optimization
75+
- Lower storage requirements
76+
- **Use when**: You need to monitor overall performance trends across your user base
77+
78+
### Traces Approach
79+
80+
- **Ideal for**: Development and debugging scenarios
81+
- **Benefits**:
82+
- Granular visibility into individual user experiences
83+
- Easier correlation with other trace data
84+
- Rich context with custom attributes (browser, user ID, device type)
85+
- Better for investigating specific user issues
86+
- **Use when**: You need detailed insights for troubleshooting or development
87+
88+
Learn more about choosing the right approach: [Web Vitals Overview](/docs/frontend-monitoring/opentelemetry-web-vitals)
89+
90+
## Dashboard Features
91+
92+
Both dashboard templates include:
93+
94+
- **Real-time monitoring**: Track web vitals as users interact with your site
95+
- **Filtering capabilities**: Segment data by page, browser, device, or custom attributes
96+
- **Historical trends**: Analyze performance changes over time
97+
98+
## Additional Resources
99+
100+
- [OpenTelemetry Web Vitals Overview](/docs/frontend-monitoring/web-vitals)

0 commit comments

Comments
 (0)