@trydig/algolia-ops-monitor
v0.2.1
Published
Dev badge for Algolia HTTP. Attach a requester, drop in a React panel.
Readme
@trydig/algolia-ops-monitor
A development badge that lists real Algolia HTTP (search, facet, recommend). Same size and chrome as the Next.js DevTools button, in Algolia blue.
Install
npm install @trydig/algolia-ops-monitorSame package: pnpm add @trydig/algolia-ops-monitor or yarn add @trydig/algolia-ops-monitor.
That is the only dependency. The panel needs React 18+. Next.js 14+ is only required if you also record server search.
Quick start (browser InstantSearch)
Two edits. Then run the app in development and click the blue Algolia badge.
1. Attach the requester
import { liteClient } from 'algoliasearch/lite'
import { createAlgoliaOpsRequester } from '@trydig/algolia-ops-monitor'
export const searchClient = liteClient('YourApplicationID', 'YourSearchOnlyAPIKey', {
requester: createAlgoliaOpsRequester(),
})Use this searchClient anywhere InstantSearch (or algoliasearch) accepts a client.
2. Render the panel
import { AlgoliaOpsPanel } from '@trydig/algolia-ops-monitor/react'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
{process.env.NODE_ENV === 'development' ? (
<AlgoliaOpsPanel endpoint={null} />
) : null}
</body>
</html>
)
}endpoint={null} means browser-only: the panel reads the in-memory log and does not call an API route.
The badge sits at the bottom right. Pass side="left" to sit above the Next.js DevTools badge (left: 20px, bottom: 80px).
You’re done when next dev (or your bundler) shows the blue Algolia mark and a search adds rows when you open it.
Next.js server search
Skip this if Algolia only runs in the browser.
Client InstantSearch and Node do not share memory. If RSC, a server action, or a route handler also calls Algolia, record on the server and poll that log from the panel.
1. Record on the server
import { liteClient } from 'algoliasearch/lite'
import { createAlgoliaOpsRequester } from '@trydig/algolia-ops-monitor/next'
export const searchClient = liteClient('YourApplicationID', 'YourSearchOnlyAPIKey', {
requester: createAlgoliaOpsRequester(),
})Keep the browser client on @trydig/algolia-ops-monitor (not /next). The panel merges both logs.
2. Add the API route
// app/api/algolia-ops/route.ts
export { DELETE, GET } from '@trydig/algolia-ops-monitor/next'With Next.js 16 Cache Components, the route must opt into request time or it prerenders empty:
// app/api/algolia-ops/route.ts
import { connection } from 'next/server'
import {
DELETE as deleteAlgoliaOps,
GET as getAlgoliaOps,
} from '@trydig/algolia-ops-monitor/next'
export async function GET(request: Request) {
await connection()
return getAlgoliaOps(request)
}
export async function DELETE(request: Request) {
await connection()
return deleteAlgoliaOps(request)
}3. Point the panel at the route
Drop endpoint={null} so the panel polls /api/algolia-ops (the default):
{process.env.NODE_ENV === 'development' ? <AlgoliaOpsPanel /> : null}'use cache' searches
@trydig/algolia-ops-monitor/next’s requester reads request headers, which 'use cache' forbids. Use the default requester and persist from a separate server module:
// persist-op.ts — do not import this from the cached file at the top level
import 'server-only'
import { appendAlgoliaOp } from '@trydig/algolia-ops-monitor/next'
export { appendAlgoliaOp }import { createAlgoliaOpsRequester, type AlgoliaOp } from '@trydig/algolia-ops-monitor'
createAlgoliaOpsRequester({
getMeta: () => ({ kind: 'document', path, viewId: `server:${path}` }),
record: (op: AlgoliaOp) => {
void import('./persist-op').then(({ appendAlgoliaOp }) => appendAlgoliaOp(op))
},
})The panel groups ops by route (pathname). Prefetches of another path stay in their own group.
Optional: stamp the request path from middleware
The Next requester already reads the current request URL. Wrap proxy.ts / middleware.ts if you also want the browser requester to share that view:
// proxy.ts or middleware.ts — Edge-safe. Do not import from `@trydig/algolia-ops-monitor/next`.
import { withAlgoliaOps } from '@trydig/algolia-ops-monitor/middleware'
import { NextResponse, type NextRequest } from 'next/server'
export function proxy(request: NextRequest) {
return withAlgoliaOps(request, NextResponse.next())
}Panel props
endpoint— default/api/algolia-ops. Passnullfor memory only (quick start).side—"right"(default) or"left".
What it records
- Real Algolia HTTP only. App-level caches such as
'use cache'do not appear unless they miss and hit Algolia. - Billed follows current Algolia search-request pricing: one per HTTP call. A
multipleQueriesrequest that hits several indices is still one billed request; extra sub-queries show as batched. - Off with
ALGOLIA_OPS_MONITOR=0. On Vercel production (VERCEL_ENV=production) recording is off. The API route 404s whenNODE_ENV !== 'development'. - The panel injects its own CSS. No Tailwind, Panda, or host design system.
Git / workspace checkout
The npm tarball is compiled JavaScript. A file: or monorepo source checkout needs a build first:
pnpm --filter @trydig/algolia-ops-monitor buildOr add transpilePackages: ['@trydig/algolia-ops-monitor'] in next.config.
Maintainers
From this repository, logged in to npm with publish rights on the trydig org:
pnpm --filter @trydig/algolia-ops-monitor publish --access publicprepublishOnly runs the build. Scoped packages default to private on npm, so --access public (also set in publishConfig) is required.