메뉴
Instrumenta frontends Vite 3 + TypeScript com OpenTelemetry para Grafana, Tempo e Mimir (traces, Web Vitals, page views, cliques, erros). Use ao adicionar telemetria em novas páginas, configurar RUM ou revisar código de instrumentação existente.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Planning and orchestration patterns for turning messy context into an incremental, verifiable execution plan. Use when you need a step-by-step strategy before coding or delegating to subagents.
Perform QA Playwright code review by applying the perspectives of maintain, add-fixture, and add-flow agents; produce a consolidated improvement summary focused on maintenance, quality, and standardization. Use when the user asks for a code review, review of specs/test-data, or improvement summary.
Manages correlation-id in .NET applications using AsyncLocal for async context isolation. Use when implementing correlation-id tracking, HTTP request/response correlation, logging integration, or when working with distributed tracing in .NET applications.
Instruments .NET applications with OpenTelemetry spans following best practices. Use when adding distributed tracing, instrumenting HTTP requests, SOAP calls, database operations, or when implementing observability with OpenTelemetry in .NET Framework 4.8 or .NET 8 applications.
Manages correlation-id in Node.js/TypeScript applications using AsyncLocalStorage for async context isolation. Use when implementing correlation-id tracking, HTTP request/response correlation, logging integration, or when working with distributed tracing in Node.js applications.
Instruments Node.js/TypeScript applications with OpenTelemetry spans following best practices. Use when adding distributed tracing, instrumenting HTTP requests, database operations, or when implementing observability with OpenTelemetry in Node.js applications.
| name | skill-frontend-instrumentation-otel |
| description | Instrumenta frontends Vite 3 + TypeScript com OpenTelemetry para Grafana, Tempo e Mimir (traces, Web Vitals, page views, cliques, erros). Use ao adicionar telemetria em novas páginas, configurar RUM ou revisar código de instrumentação existente. |
Checklist:
- [ ] Entrypoint importa ./instrumentation antes do framework e do router
- [ ] View importa usePageTelemetry e chama usePageTelemetry() no setup
- [ ] Botões/ações principais chamam trackClick(buttonId, label?) com button_id estável
- [ ] Elementos críticos têm data-telemetry-id ou data-testid para seletores estáveis
- [ ] Novas métricas/atributos definidos em telemetry/names.ts; uso via constantes
Passos:
Entrypoint
Garantir que o primeiro import seja da instrumentação (ex.: import './instrumentation' em main.ts) antes de createApp, router e montagem.
View
No componente de página: import { usePageTelemetry } from '@/composables/usePageTelemetry' e no setup chamar usePageTelemetry(). O composable já registra page view no onMounted.
Cliques
Em botões/ações principais: trackClick(buttonId, label?). Usar button_id estável (ex.: 'save_settings', 'cta_home'). Preferir data-telemetry-id ou data-testid no elemento para o span de jornada (user.journey.click) ter seletor estável.
Novas métricas/atributos
Não usar literais. Adicionar constantes em telemetry/names.ts (ex.: nova métrica, novo atributo de span) e importar onde for usar.
Checklist de revisão:
- [ ] Nomes centralizados em telemetry/names.ts; sem literais em instrumentation ou composables
- [ ] SERVICE_NAME definido em names.ts e usado em Resource, getTracer, getMeter
- [ ] Atributos de span com namespace semconv (dom.*, journey.*, session.id)
- [ ] Métrica de erros: nome sem _total; labels apenas type/page/action (sem message)
- [ ] Views usam usePageTelemetry() e trackClick com button_id estável
- [ ] Comentários ou docs indicam mapeamento para o dashboard (opcional, recomendado)
Para cada item em falta: reportar e sugerir alteração concreta (trecho de código ou path do arquivo).
job vs service_name): reference.md.telemetria/frontend/src/telemetry/names.ts, telemetria/frontend/src/instrumentation.ts, telemetria/frontend/src/composables/usePageTelemetry.ts.telemetria/docs/frontend-opentelemetry.md.