Expert guide for automated and manual Web Accessibility (a11y) testing — axe-core, Pa11y, Playwright a11y, screen reader testing, and WCAG 2.2 Level AA/AAA compliance / Panduan ahli pengujian aksesibilitas web.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Expert guide for structured logging (Pino, Winston), error tracking (Sentry), log aggregation (Axiom, Datadog), request correlation, and GDPR-compliant log management / Panduan ahli untuk logging terstruktur (Pino, Winston), pelacakan error (Sentry), agregasi log, korelasi request, dan manajemen log sesuai GDPR.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
<a name="english"></a>
Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and session-memory-manager to ensure cohesive execution.
Production-grade guide for implementing structured logging, error tracking, and application monitoring. Covers Pino (high-performance JSON logging), Sentry SDK integration (React, Node.js, Next.js), source map upload for production errors, request ID correlation across microservices, log aggregation (Axiom, Datadog, Logflare), alert rules, GDPR-compliant log redaction (PII masking), and OpenTelemetry integration.
Activate this skill when:
| Library | Best For | Performance | Output Format |
|---|---|---|---|
| Pino | High-throughput Node.js services | ⭐⭐⭐⭐⭐ (fastest) | JSON (structured) |
| Winston | Enterprise, multiple transports | ⭐⭐⭐ | Configurable |
| Bunyan | Legacy projects | ⭐⭐⭐⭐ | JSON |
| console.log | Never in production | ❌ | Unstructured |
Recommendation: Use Pino for all production services (10x faster than Winston, native JSON).
// lib/logger.ts
import pino from 'pino';
export const logger = pino({
level: process.env.LOG_LEVEL ?? 'info',
// Redact sensitive fields (GDPR/PII)
redact: {
paths: ['req.headers.authorization', 'req.headers.cookie', '*.password', '*.token', '*.ssn', '*.creditCard'],
censor: '[REDACTED]',
},
// Standardized format
formatters: {
level: (label) => ({ level: label }),
bindings: (bindings) => ({
service: process.env.SERVICE_NAME ?? 'app',
environment: process.env.NODE_ENV,
version: process.env.APP_VERSION,
pid: bindings.pid,
hostname: bindings.hostname,
}),
},
timestamp: pino.stdTimeFunctions.isoTime,
});
// Child logger for specific domain
export const dbLogger = logger.child({ module: 'database' });
export const authLogger = logger.child({ module: 'auth' });
export const paymentLogger = logger.child({ module: 'payment' });
// When to use each level:
logger.fatal('Application cannot start — exiting'); // Process crash
logger.error({ err }, 'Payment processing failed'); // Failed operations (needs attention)
logger.warn('Rate limit threshold at 80%'); // Degraded state, approaching limits
logger.info({ userId, action: 'login' }, 'User logged in'); // Business events, audit trail
logger.debug({ query, params }, 'Database query executed'); // Development troubleshooting
logger.trace({ request }, 'Incoming request'); // Extreme detail (rarely enabled)
// middleware/request-id.ts
import { randomUUID } from 'crypto';
import { AsyncLocalStorage } from 'async_hooks';
// Async context for request correlation
export const requestContext = new AsyncLocalStorage<{ requestId: string }>();
export function requestIdMiddleware(req: Request): string {
// Use incoming header or generate new ID
const requestId = req.headers.get('x-request-id') ?? randomUUID();
// Propagate to downstream services
return requestId;
}
// Usage with Pino child logger
export function getRequestLogger() {
const ctx = requestContext.getStore();
return ctx ? logger.child({ requestId: ctx.requestId }) : logger;
}
// In API route
export async function GET(request: Request) {
const requestId = requestIdMiddleware(request);
return requestContext.run({ requestId }, async () => {
const log = getRequestLogger();
log.info('Processing request');
// All downstream log calls include requestId automatically
const result = await fetchData(log);
return Response.json(result);
});
}
// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';
Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
environment: process.env.NODE_ENV,
release: process.env.SENTRY_RELEASE,
// Performance monitoring
tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
// Session replay for debugging
replaysSessionSampleRate: 0.01, // 1% of sessions
replaysOnErrorSampleRate: 1.0, // 100% of error sessions
integrations: [
Sentry.replayIntegration({ maskAllText: false, blockAllMedia: false }),
],
// Filter noise
ignoreErrors: [
'ResizeObserver loop',
'Non-Error promise rejection',
/Loading chunk \d+ failed/,
],
// Scrub PII before sending
beforeSend(event) {
if (event.user) {
delete event.user.ip_address;
delete event.user.email; // Or hash it
}
return event;
},
});
// sentry.server.config.ts
import * as Sentry from '@sentry/nextjs';
Sentry.init({
dsn: process.env.SENTRY_DSN,
tracesSampleRate: 0.1,
// Capture unhandled promise rejections
integrations: [
Sentry.prismaIntegration(), // Auto-track Prisma queries
],
});
# .github/workflows/deploy.yml
- name: Upload Source Maps to Sentry
env:
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
SENTRY_ORG: your-org
SENTRY_PROJECT: your-project
run: |
npx @sentry/cli sourcemaps upload \
--release=${{ github.sha }} \
.next/static
// lib/axiom-transport.ts
import { pino } from 'pino';
// Pino transport for Axiom (or any HTTP log service)
const transport = pino.transport({
targets: [
// Console output (development)
{ target: 'pino-pretty', level: 'debug' },
// Axiom (production)
{
target: '@axiomhq/pino',
level: 'info',
options: {
dataset: process.env.AXIOM_DATASET,
token: process.env.AXIOM_TOKEN,
},
},
],
});
export const logger = pino(transport);
// Example alert conditions to configure in your monitoring tool
const ALERT_RULES = {
criticalErrors: {
condition: 'error count > 50 in 5 minutes',
severity: 'critical',
notification: ['pagerduty', 'slack'],
},
highErrorRate: {
condition: 'error rate > 5% of total requests',
severity: 'high',
notification: ['slack'],
},
slowResponses: {
condition: 'p99 response time > 3000ms for 10 minutes',
severity: 'medium',
notification: ['slack'],
},
diskSpace: {
condition: 'disk usage > 85%',
severity: 'warning',
notification: ['email'],
},
};
// lib/pii-redactor.ts
/** Fields that must be redacted in logs */
const PII_PATTERNS = [
/\b\d{3}-\d{2}-\d{4}\b/g, // SSN
/\b\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}\b/g, // Credit card
/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g, // Email
];
export function redactPII(text: string): string {
let result = text;
for (const pattern of PII_PATTERNS) {
result = result.replace(pattern, '[REDACTED]');
}
return result;
}
// Log retention policy
const LOG_RETENTION = {
debug: '7 days',
info: '30 days',
warn: '90 days',
error: '365 days',
audit: '7 years', // Compliance requirement
};
| Anti-Pattern | Problem | Correct Approach |
|---|---|---|
console.log in production | Unstructured, no levels, no rotation | Use Pino with JSON output |
| Logging PII (emails, passwords) | GDPR violation, security risk | Use Pino redact option |
| No request correlation ID | Can't trace requests across services | Propagate x-request-id header |
Logging everything at info level | Log noise, storage waste | Use appropriate levels (debug/info/warn/error) |
| No source maps in production errors | "Minified React error #xxx" | Upload source maps to Sentry |
| No log rotation/retention policy | Disk fills up, storage costs grow | Set TTL per level, archive old logs |
| Alerting on every error | Alert fatigue | Set meaningful thresholds and severity levels |
data-telemetry-expert — OpenTelemetry spans + log correlationerror-resilience-expert — Error tracking and monitoring setupjs-backend-expert — Server-side logging middleware (Fastify/Hono/Express)ci-cd-devops-architect — Source map upload in CI/CD pipelineproduction-ready-hardener — Pre-launch logging and monitoring auditzero-trust-secret-vault — Secure logging of secret access patterns<a name="bahasa-indonesia"></a>
Terhubung dan mengorkestrasi skill domain yang relevan seperti brainstorming, zero-to-prod-orchestrator, dan session-memory-manager untuk memastikan pemantauan produksi yang andal.
data-telemetry-expert — Span OpenTelemetry + korelasi log.error-resilience-expert — Setup pelacakan error dan monitoring.js-backend-expert — Middleware logging sisi server (Fastify/Hono/Express).ci-cd-devops-architect — Upload source map dalam pipeline CI/CD.production-ready-hardener — Audit logging dan monitoring pra-peluncuran.Panduan tingkat produksi untuk mengimplementasikan logging terstruktur, pelacakan error, dan pemantauan aplikasi. Mencakup Pino (logging JSON berkinerja tinggi), integrasi SDK Sentry (React, Node.js, Next.js), upload source map untuk error produksi, korelasi request ID lintas microservice, agregasi log (Axiom, Datadog, Logflare), aturan alerting, redaksi log sesuai GDPR / UU PDP (masking PII), dan integrasi OpenTelemetry.
Aktifkan skill ini ketika:
// lib/logger.ts
import pino from 'pino';
export const logger = pino({
level: process.env.LOG_LEVEL ?? 'info',
// Redaksi field sensitif otomatis (Kepatuhan UU PDP & GDPR)
redact: {
paths: [
'req.headers.authorization',
'req.headers.cookie',
'*.password',
'*.token',
'*.nik',
'*.nomorKartu',
],
censor: '[TEREDAKSI]',
},
formatters: {
level: (label) => ({ level: label }),
bindings: (bindings) => ({
layanan: process.env.SERVICE_NAME ?? 'backend-api',
lingkungan: process.env.NODE_ENV,
pid: bindings.pid,
hostname: bindings.hostname,
}),
},
timestamp: pino.stdTimeFunctions.isoTime,
});
export const dbLogger = logger.child({ modul: 'database' });
export const paymentLogger = logger.child({ modul: 'pembayaran' });
import { randomUUID } from 'crypto';
import { AsyncLocalStorage } from 'async_hooks';
import { logger } from './logger';
export const konteksRequest = new AsyncLocalStorage<{ requestId: string }>();
export function getLoggerRequest() {
const ctx = konteksRequest.getStore();
return ctx ? logger.child({ requestId: ctx.requestId }) : logger;
}
// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';
Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
environment: process.env.NODE_ENV,
tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
replaysOnErrorSampleRate: 1.0, // Rekam 100% sesi yang mengalami error
});
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Expert guide for automated and manual Web Accessibility (a11y) testing — axe-core, Pa11y, Playwright a11y, screen reader testing, and WCAG 2.2 Level AA/AAA compliance / Panduan ahli pengujian aksesibilitas web.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Expert guide for intelligent model cascading and routing — complexity-scored task routing from Flash/Haiku to Sonnet/Opus/Astra, dynamic escalation with quality gates, 40-60% token cost reduction while maintaining output quality / Panduan ahli untuk kaskade dan routing model cerdas — routing tugas berbasis skor kompleksitas dari Flash/Haiku ke Sonnet/Opus/Astra, eskalasi dinamis dengan gerbang kualitas, pengurangan biaya token 40-60% dengan kualitas output terjaga.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Expert guide for Affective Computing, emotional AI, and real-time sentiment analysis through native multimodal tokens (voice intonation and facial micro-expressions) / Panduan ahli komputasi afektif, AI emosional, dan analisis sentimen real-time melalui token multimodal native.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Expert guide for AI-assisted coding workflows — agentic code generation, multi-agent code swarms, self-healing CI/CD, automated PR review, spec-to-code pipelines, codebase knowledge graphs, and human-in-the-loop approval gates / Panduan ahli untuk workflow pengkodean berbasis AI — generasi kode agentic, code swarm multi-agen, CI/CD self-healing, review PR otomatis, pipeline spec-to-code, knowledge graph codebase, dan gate persetujuan human-in-the-loop.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Expert guide for autonomous Machine-to-Machine (M2M) agent settlement, dual-rail fiat & stablecoin micro-clearing, dynamic budget envelopes, and cryptographic agent invoicing / Panduan ahli settlement otonom antar-agen (M2M), kliring mikro dual-rail fiat & stablecoin, pagu anggaran dinamis, dan penagihan agen kriptografis.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Expert guide for long-term episodic memory integration (Mem0 v2, Letta/MemGPT, Zep v2), memory tier architecture, pgvector HNSW storage, and unified context management for autonomous AI agents / Panduan ahli untuk integrasi memori episodik jangka panjang (Mem0 v2, Letta/MemGPT, Zep v2), arsitektur tier memori, penyimpanan pgvector HNSW, dan manajemen konteks terpadu untuk agen AI otonom.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.