@innoapm/sdk-nextjs

Next.js SDK for innoAPM — a self-hostable Sentry-style error tracking and application performance monitoring platform. Covers browser + server in one package, with source-map upload built in.

Install

npm install @innoapm/sdk-nextjs

Or run the wizard, which installs, scaffolds files, wraps next.config, and writes .env.local:

npx @innoapm/wizard --dsn "http://PUBLIC_KEY@your-innoapm-host/PROJECT_ID"

Server-side auto-capture requires Next.js 15+. The browser side works on any version.

Manual setup

Browser — initialise in a client component, mount in root layout

// app/innoapm-init.tsx
"use client";
import { useEffect } from "react";
import { init } from "@innoapm/sdk-nextjs/client";

export function InnoApmInit() {
  useEffect(() => {
    init({
      dsn: process.env.NEXT_PUBLIC_INNOAPM_DSN!,
      environment: process.env.NODE_ENV,
      release: process.env.NEXT_PUBLIC_INNOAPM_RELEASE,
    });
  }, []);
  return null;
}

Then render <InnoApmInit /> inside <body> in app/layout.tsx.

Server + edge — instrumentation.ts

import * as InnoApm from "@innoapm/sdk-nextjs";

export function register() {
  InnoApm.register();
}

export const onRequestError = InnoApm.captureRequestError;

This one file covers both runtimes. instrumentation.ts is compiled for the Node.js and edge runtimes, and the bare @innoapm/sdk-nextjs specifier resolves to a different build in each via package export conditions (edge-light → the edge build, node → the Node build). The edge build is built on @innoapm/sdk-core and fetch only.

Importing @innoapm/sdk-nextjs/server in this file instead will break the edge build with ReferenceError: __import_unsupported is not defined — that's Next reporting that the Node SDK's node: imports reached the edge bundle.

Picking a runtime explicitly

The subpaths bypass condition resolution when you want to be explicit:

| Import | Build | Use in | | --- | --- | --- | | @innoapm/sdk-nextjs/client | browser | "use client" components, error.tsx | | @innoapm/sdk-nextjs/server | Node | route handlers, server actions, RSC | | @innoapm/sdk-nextjs/edge | edge | middleware.ts, runtime = "edge" routes |

Client components should keep importing /client explicitly: a "use client" component is also compiled into the server build for SSR, where the bare specifier resolves via the node condition.

next.config.js — wrap your config

const { withInnoApmConfig } = require("@innoapm/sdk-nextjs/config");

module.exports = withInnoApmConfig({
  // ...your existing Next.js config
});

withInnoApmConfig keeps the Node SDK out of the browser bundle, enables source maps, injects the release, and uploads the maps to innoAPM after each production build. For CI or non-wrapped builds, use npx innoapm-sourcemaps manually.

Works under both Turbopack and webpack — the upload runs on Next's compiler.runAfterProductionCompile hook and the release goes in through Next's own env, neither of which is bundler-specific. (Next 16 builds with Turbopack by default.)

.env — the browser needs the NEXT_PUBLIC_ copy

INNOAPM_DSN=http://PUBLIC_KEY@your-innoapm-host/PROJECT_ID
NEXT_PUBLIC_INNOAPM_DSN=http://PUBLIC_KEY@your-innoapm-host/PROJECT_ID

Docs

Full usage guide, DSN format, and self-hosting instructions live in the main repo.

License

MIT © Innoworks Software Solutions Pvt Ltd