skills.rest
serkan-ozal
serkan-ozalCOMMUNITY
Explore all skills by this author →
Website𝕏@serkan_ozalGitHub

observability

Trace distributed requests and monitor console and network activity in browser-based apps.

7|1|Updated Feb 2, 2026
Search Tags:#debugging#observability#tracing#network#opentelemetry#console#web-frontend
One-click install
npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill observability-serkan-ozal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: observability
Source: https://github.com/serkan-ozal/browser-devtools-skills/tree/main/skills/observability
Command: npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill observability-serkan-ozal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Gather observability data across frontend and backend to diagnose distributed tracing bottlenecks, correlate user journeys, and surface issues from console logs and network activity in real-time.

Core Features & Use Cases

  • Distributed Tracing: Trace requests across services end-to-end, identify latency hotspots, and visualize call graphs.
  • Console Monitoring: Capture and filter runtime errors and warnings during user sessions.
  • Network Observability: Inspect HTTP requests/responses, resource loading, and error status flows.
  • Performance Metrics: Collect Web Vitals and timing data to quantify user experience.
  • Use Case: Debug a user journey by tracing a session from frontend navigation through backend calls and back, aggregating logs and metrics for root-cause analysis.

Quick Start

Ask me to start a new trace, navigate to a page, and collect console, network, and trace data.

Frequently Asked Questions about observability

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I trace user requests end-to-end across frontend and backend services?▼

Distributed tracing tracks user requests across frontend and backend services end-to-end to identify latency hotspots. By propagating trace context, it visualizes call graphs and correlates user journeys from browser navigation through backend calls.

Can I capture and monitor console errors and warnings during a user session?▼

Console monitoring captures and filters runtime errors and warnings during active user sessions. This allows you to surface real-time issues directly from the browser console and aggregate them with network and trace data for root-cause analysis.

How do I inspect HTTP requests and network activity in browser-based apps?▼

Network observability inspects HTTP requests, responses, and resource loading in browser-based apps. It tracks error status flows and network visibility to help validate performance patterns and diagnose issues during user journeys.

Does this observability setup support OpenTelemetry integration and custom exporters?▼

OpenTelemetry integration is supported with configurable exporters to collect and analyze observability data. This allows you to propagate trace context and export distributed traces, metrics, and logs to your preferred backend analysis tools.

What is the best way to start a new trace and collect performance metrics for web apps?▼

To start a new trace, navigate to a target page and collect console, network, and trace data. This gathers Web Vitals and timing metrics to quantify user experience and debug production issues across the application flow.

When do I need distributed tracing for debugging production issues?▼

Distributed tracing is needed when debugging production issues that span multiple services. It correlates user journeys across frontend and backend, aggregating logs and metrics to pinpoint latency bottlenecks and surface error patterns.

Related Skills

Explore More Software Engineering Skills→
FabienDehopreFabienDehopre

configuring-opentelemetry-dotnet

Configure OpenTelemetry tracing, metrics, and logging for ASP.NET Core applications.

Community
Advanced
jamesaphoenixjamesaphoenix
1

debug-from-telemetry

Correlate traces, logs, and metrics to diagnose distributed failures.

Community
Advanced
baasith6baasith6

visual-qa-testing

Automate visual QA testing of web applications with Cursor's integrated browser.

Community
Intermediate
jagreehaljagreehal
7

autotel-hono

Implement OpenTelemetry middleware for Hono to trace HTTP requests and capture headers.

Community
Basic