Set up comprehensive observability for Replit integrations with metrics, traces, and alerts. Use when implementing monitoring for Replit operations, setting up dashboards, or configuring alerting for Replit integration health. Trigger with phrases like "replit monitoring", "replit metrics", "replit observability", "monitor replit", "replit alerts", "replit tracing".
Configures comprehensive monitoring, tracing, and alerting for Replit integrations.
/plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills/plugin install replit-pack@claude-code-plugins-plusThis skill is limited to using the following tools:
Set up comprehensive observability for Replit integrations.
| Metric | Type | Description |
|---|---|---|
replit_requests_total | Counter | Total API requests |
replit_request_duration_seconds | Histogram | Request latency |
replit_errors_total | Counter | Error count by type |
replit_rate_limit_remaining | Gauge | Rate limit headroom |
import { Registry, Counter, Histogram, Gauge } from 'prom-client';
const registry = new Registry();
const requestCounter = new Counter({
name: 'replit_requests_total',
help: 'Total Replit API requests',
labelNames: ['method', 'status'],
registers: [registry],
});
const requestDuration = new Histogram({
name: 'replit_request_duration_seconds',
help: 'Replit request duration',
labelNames: ['method'],
buckets: [0.05, 0.1, 0.25, 0.5, 1, 2.5, 5],
registers: [registry],
});
const errorCounter = new Counter({
name: 'replit_errors_total',
help: 'Replit errors by type',
labelNames: ['error_type'],
registers: [registry],
});
async function instrumentedRequest<T>(
method: string,
operation: () => Promise<T>
): Promise<T> {
const timer = requestDuration.startTimer({ method });
try {
const result = await operation();
requestCounter.inc({ method, status: 'success' });
return result;
} catch (error: any) {
requestCounter.inc({ method, status: 'error' });
errorCounter.inc({ error_type: error.code || 'unknown' });
throw error;
} finally {
timer();
}
}
import { trace, SpanStatusCode } from '@opentelemetry/api';
const tracer = trace.getTracer('replit-client');
async function tracedReplitCall<T>(
operationName: string,
operation: () => Promise<T>
): Promise<T> {
return tracer.startActiveSpan(`replit.${operationName}`, async (span) => {
try {
const result = await operation();
span.setStatus({ code: SpanStatusCode.OK });
return result;
} catch (error: any) {
span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
span.recordException(error);
throw error;
} finally {
span.end();
}
});
}
import pino from 'pino';
const logger = pino({
name: 'replit',
level: process.env.LOG_LEVEL || 'info',
});
function logReplitOperation(
operation: string,
data: Record<string, any>,
duration: number
) {
logger.info({
service: 'replit',
operation,
duration_ms: duration,
...data,
});
}
# replit_alerts.yaml
groups:
- name: replit_alerts
rules:
- alert: ReplitHighErrorRate
expr: |
rate(replit_errors_total[5m]) /
rate(replit_requests_total[5m]) > 0.05
for: 5m
labels:
severity: warning
annotations:
summary: "Replit error rate > 5%"
- alert: ReplitHighLatency
expr: |
histogram_quantile(0.95,
rate(replit_request_duration_seconds_bucket[5m])
) > 2
for: 5m
labels:
severity: warning
annotations:
summary: "Replit P95 latency > 2s"
- alert: ReplitDown
expr: up{job="replit"} == 0
for: 1m
labels:
severity: critical
annotations:
summary: "Replit integration is down"
{
"panels": [
{
"title": "Replit Request Rate",
"targets": [{
"expr": "rate(replit_requests_total[5m])"
}]
},
{
"title": "Replit Latency P50/P95/P99",
"targets": [{
"expr": "histogram_quantile(0.5, rate(replit_request_duration_seconds_bucket[5m]))"
}]
}
]
}
Implement Prometheus counters, histograms, and gauges for key operations.
Integrate OpenTelemetry for end-to-end request tracing.
Set up JSON logging with consistent field names.
Define Prometheus alerting rules for error rates and latency.
| Issue | Cause | Solution |
|---|---|---|
| Missing metrics | No instrumentation | Wrap client calls |
| Trace gaps | Missing propagation | Check context headers |
| Alert storms | Wrong thresholds | Tune alert rules |
| High cardinality | Too many labels | Reduce label values |
app.get('/metrics', async (req, res) => {
res.set('Content-Type', registry.contentType);
res.send(await registry.metrics());
});
For incident response, see replit-incident-runbook.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.