Shopify Store Logs Dashboard.
A custom internal dashboard that aggregates and visualises Shopify webhook events, order logs, and error traces in real-time — giving full operational visibility into the store beyond what the native admin provides.
3 Months
Medium
Zero Visibility Into Store Operations.
The native Shopify admin only surfaces high-level metrics. Debugging failed orders, webhook delivery issues, and inventory sync errors required manually cross-referencing multiple sources with no timeline or context.
Next.js 16 (App Router)
TypeScript
Shopify Admin API
Shopify Webhooks
PostgreSQL (log storage)
MUI v7
next-intl
Shopify webhooks push events (orders, inventory, fulfillment, errors) to a Next.js API route that normalises, timestamps and persists them to PostgreSQL. The dashboard queries logs with filters by event type, severity and time range — delivering a live operational view.
// app/api/webhooks/shopify/route.ts
export async function POST(req: Request) {
const hmac = req.headers.get('x-shopify-hmac-sha256')
if (!verifyHmac(await req.text(), hmac)) {
return new Response('Unauthorized', { status: 401 })
}
const event = await req.json()
await db.logs.create({
topic: event.topic,
payload: event,
receivedAt: new Date()
})
return new Response('OK')
}Full Store Observability, Finally.
↗
Real-Time Event Timeline
Every Shopify webhook event — orders created, payments captured, inventory updates, fulfillment errors — is logged, timestamped and searchable in a unified timeline.
↗
Structured Error Surfacing
Failed webhooks and API errors are flagged with full payloads, allowing immediate root-cause analysis without touching Shopify's raw admin logs.
12+
Event Types Tracked12+
Event Types< 5 min
Avg. ResolveReal-time
Data Source