AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides guidance and best practices for configuring log ingestion in Next.js applications to send data to PostHog. It emphasizes the use of the OpenTelemetry protocol and structured logging to ensure logs are actionable, searchable, and context-rich. By following these patterns, developers can centralize system logs alongside product analytics and session replays, enabling more efficient debugging and monitoring of production environments.
What it does
- Provides instructions for setting up PostHog log ingestion in Next.js.
- Promotes the use of structured logging over plain text for better queryability.
- Encourages the use of wide events to capture request-level context.
- Outlines best practices for log levels, cardinality, and business context.
- Supports integration with OpenTelemetry for standardized data export.
When to use it
- When you need to centralize system logs from a Next.js application.
- When you want to correlate system logs with user sessions and product analytics.
- When you are implementing or refactoring logging to improve production observability.
- When you need to debug complex request flows using trace and session context.
Advantages
- Enables unified visibility across logs, analytics, and session replays.
- Reduces noise by focusing on request-level wide events.
- Standardizes log data using OpenTelemetry protocols.
- Improves debugging efficiency by linking logs to specific user sessions.
Usage examples
- “How do I set up PostHog logs in my Next.js 15 application?”
- The agent provides the steps to initialize PostHog in instrumentation-client.ts and configure the OTLP exporter.
- “What is the best way to log payment processing in my app?”
- The agent advises against step-by-step code logging, suggesting a single wide event containing relevant metadata like order_id and amount_cents.
Install
Download the skill as a ZIP:
https://autogineer.com/agent-skills/posthog/logs-nextjs/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip logs-nextjs.zip -d .agents/skills
Documentation by PostHog
PostHog logs for Next.js
This skill helps you add PostHog log ingestion to Next.js applications.
Reference files
references/nextjs.md- Next.js logs installation - docsreferences/start-here.md- Getting started with logs - docsreferences/search.md- Search logs - docsreferences/best-practices.md- Logging best practices - docsreferences/troubleshooting.md- Logs troubleshooting - docsreferences/link-session-replay.md- Link session replay - docsreferences/debug-logs-mcp.md- Debug logs with mcp - docs
Consult the documentation for API details and framework-specific patterns.
Key principles
Environment variables: Always use environment variables for PostHog keys and OpenTelemetry endpoints. Never hardcode them.
Minimal changes: Add log export alongside existing logging. Don't replace or restructure existing logging code.
OpenTelemetry: PostHog logs use the OpenTelemetry protocol. Configure an OTLP exporter pointed at PostHog's ingest endpoint.
Structured logging: Prefer structured log formats with key-value properties over plain text messages.
Framework guidelines
For Next.js 15.3+, initialize PostHog in instrumentation-client.ts for the simplest setup
Files
- ATTRIBUTION.mdAdded by AutoGineer933 B
- LICENSELicence file added by AutoGineer1.0 KiB
- SKILL.md1.3 KiB
- references/best-practices.md19.6 KiB
- references/debug-logs-mcp.md2.2 KiB
- references/link-session-replay.md4.9 KiB
- references/nextjs.md5.5 KiB
- references/search.md2.5 KiB
- references/start-here.md2.4 KiB
- references/troubleshooting.md3.5 KiB
references/link-session-replay.md
Link session replay - Docs
Connecting your backend logs to frontend session replays provides complete visibility into the user journey, helping you understand the full context around issues in your application.
Why link to session replay?
By including session IDs and user identity in your logs, you can:
See the full user journey: Navigate from a log entry directly to the session replay to see what the user was doing
Debug issues faster: Quickly find and watch the exact session where an error or issue occurred
Correlate logs with user actions: Match backend log events with actual user experience
View related errors: See Error Tracking issues that occurred during the same session directly in the log details
Prerequisites
A logging client installed on your backend
The PostHog JavaScript SDK on your frontend
Session replay enabled if you want to link to replays (you can still pass
posthogDistinctIdwithout session replay to link logs to a user profile)
Implementation
To link logs to session replays, you need to pass the session ID and user identity from your frontend to your backend, then include them as log attributes.
Frontend: Get the session ID
In your frontend code, retrieve the current session ID and send it with your API requests:
JavaScript
PostHog AI
// In your frontend code
import posthog from 'posthog-js'
// Get the current session ID
const sessionId = posthog.getSessionId()
// Send it with your API request
const response = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
message: userInput,
sessionId: sessionId // Include session ID
})
})Backend: Include session ID and user identity in logs
Once you have the session ID, include it along with the user's identity using the sessionId and posthogDistinctId attributes. These examples assume you've already set up a logging client for your language.
PostHog AI
JavaScript
import { logs } from '@opentelemetry/api-logs'
const logger = logs.getLogger('my-app')
app.post('/api/chat', async (req, res) => {
const { message, sessionId } = req.body
const userId = req.userId // ... get your user ID
logger.emit({
severityText: 'info',
body: 'Chat request received',
attributes: {
posthogDistinctId: userId, // Links to PostHog user
sessionId: sessionId, // Links to session replay
endpoint: '/api/chat',
},
})
// ... handle the request
res.json({ success: true })
})Python
import logging
logger = logging.getLogger(__name__)
@app.route('/api/chat', methods=['POST'])
def chat():
data = request.json
message = data['message']
session_id = data.get('sessionId')
user_id = current_user.id
logger.info(
"Chat request received",
extra={
"posthogDistinctId": user_id, # Links to PostHog user
"sessionId": session_id, # Links to session replay
"endpoint": "/api/chat",
}
)
# ... handle the request
return jsonify({"success": True})Note: If you don't include
posthogDistinctId, logs won't be linked to a user. If you don't includesessionId, logs won't be linked to a session replay. You can use either or both independently.
Viewing linked replays
Once you've set up session linking, you can navigate from logs to their corresponding session replays:
In the logs view, click on the log entry you're interested in to open log details
In the log details view, click the View recording button to open the session replay
Watch the user's interaction in context alongside the backend logs
You can only view recordings for log entries that have an associated session ID.
This linking helps you correlate backend log events with actual frontend user behavior, enabling faster debugging and better understanding of issues as they occur in your application.
View related errors
When you click on a log entry that has a session ID, you can view related errors in the Related errors tab. This tab shows Error Tracking issues that occurred within the same session (within ±6 hours of the log timestamp).
This helps you debug issues by showing errors that happened around the same time as your log entry, giving you a more complete picture of what went wrong.
If no session ID is found in the log entry, the tab displays a message prompting you to link your logs to sessions.
See also
Community questions
Ask a question
Was this page useful?
HelpfulCould be better
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- PostHog
- Publisher
- PostHog (Official)
- Source
- PostHog/skills · skills/posthog/logs/skills/nextjs · commit a5d30e7
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
- Also distributed in
- PostHog/skills
AutoGineer is not affiliated with or endorsed by PostHog or PostHog.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download logs-nextjs.zip