npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@argusdev/sdk-nextjs

v0.4.0

Published

Argus SDK for Next.js — client components plus server-side capture via instrumentation.ts onRequestError, with source context (the crashing code lines) on the Node runtime.

Readme

@argusdev/sdk-nextjs

Next.js SDK for Argus. Covers both runtimes — client components via @argusdev/sdk-browser, and server components / route handlers / server actions / middleware via Next's onRequestError hook.

Install

npm install @argusdev/sdk-nextjs

Why not just @argusdev/sdk-react

It only sees half a Next app, and breaks the other half:

  • Coverage. sdk-react is sdk-browser + a boundary. Server components, route handlers, server actions, and middleware never touch window.onerror or a React boundary. sdk-node doesn't help either — Next catches request errors and renders its error page, so they never become an uncaughtException.
  • SSR. Calling the browser init() during a server render used to throw ReferenceError: window is not defined — an error tracker crashing the app it monitors. That's now fixed at the source in sdk-browser (it no-ops without a window), but the coverage gap above is structural and still needs this package.

Two entry points

Next runs two runtimes from one module graph, so the entry point is explicit rather than guessed. Importing the wrong half is the most common way to break a Next build; separate subpaths make that impossible instead of merely unlikely.

| Import | Use in | | ----------------------------- | -------------------------------------------------- | | @argusdev/sdk-nextjs/server | instrumentation.ts | | @argusdev/sdk-nextjs/client | client components, error.tsx, global-error.tsx | | @argusdev/sdk-nextjs | types only, no runtime |

Server

// instrumentation.ts
import {
  init,
  onRequestError as argusOnRequestError,
} from "@argusdev/sdk-nextjs/server";

export function register() {
  init({
    dsn: process.env.ARGUS_DSN!,
    environment: process.env.NODE_ENV,
    release: process.env.VERCEL_GIT_COMMIT_SHA,
  });
}

export const onRequestError = argusOnRequestError;

That single export covers server components, route handlers, server actions, and middleware. It's typed to satisfy Next's own Instrumentation.onRequestError, so this also typechecks:

import type { Instrumentation } from "next";
export const onRequestError: Instrumentation.onRequestError = argusOnRequestError;

It returns a promise and Next awaits it — which matters on serverless, where the function can freeze the moment the response is sent and drop an in-flight request.

Tags attached automatically:

| Tag | Example | | ------------------ | -------------------------------------------- | | routePath | /blog/[slug] | | routerKind | App Router | | routeType | render / route / action / middleware | | renderSource | react-server-components | | revalidateReason | on-demand / stale | | digest | 3163989896 |

routePath is the dynamic pattern, not the resolved URL, so it stays stable across requests — the tag worth filtering the dashboard by.

Manual capture anywhere on the server:

import { captureException } from "@argusdev/sdk-nextjs/server";

export async function POST(req: Request) {
  try {
    return await handle(req);
  } catch (err) {
    await captureException(err, { tags: { routePath: "/api/checkout" } });
    throw err;
  }
}

Headers are not forwarded

Only user-agent is sent. Cookies and authorization live in the same object and are never copied into an envelope. A repeated header arrives from Next as an array (NodeJS.Dict<string | string[]>) and is narrowed to its first value.

Source context (v0.4+)

On the Node runtime, captured server errors ship with the ±5 source lines around each in-app stack frame, read off disk at capture — the Argus dashboard renders the snippet with the crashing line highlighted. The wiring is gated on process.env.NEXT_RUNTIME === "nodejs", which Next inlines per build, so edge bundles contain none of it (no node:fs, verified at the emitted-bundle level). Expect the best snippets in next dev; production builds show Next's compiled server output until source-map support lands.

Edge runtime

Works as-is. The server entry imports no Node built-ins (the only process usage is process.env/process.versions, both available on the edge runtime) and sdk-core's transport is fetch + setTimeout. It also never imports sdk-browser, so no browser code lands in a server or edge bundle.

Client

Init once, in a client component or instrumentation-client.ts (Next 15.3+):

import { init } from "@argusdev/sdk-nextjs/client";

init({ dsn: process.env.NEXT_PUBLIC_ARGUS_DSN! });

Then report what Next's error boundaries catch:

// app/error.tsx
"use client";
import { useArgusError } from "@argusdev/sdk-nextjs/client";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useArgusError(error);
  return <button onClick={reset}>Try again</button>;
}

Same for app/global-error.tsx. The hook is keyed on the error object, so a re-render doesn't re-report the same crash but a genuinely new one still gets through. captureError(error) is the non-hook form.

The digest is the join key. Next stamps a digest on a server error and surfaces the same digest to the client's error.tsx. Both halves tag it, so a single failure is searchable across the server envelope and the client one.

Version support

| Next | Client | Server | | ------- | ------ | -------------------------------------------------------- | | 15+ | ✅ | ✅ onRequestError | | 13 / 14 | ✅ | ❌ — no onRequestError; use manual captureException() |

Verified against Next 15.5. next is not a dependency — the handler is typed structurally, so any 15.x shape works.

MIT © Treasure Odetokun