← All platforms

Next.js error tracking

Browser errors. Server errors. One place to look. The Sentry Next.js SDK brings both to your Telebugs server. 

~/hoofnotes  npm install @sentry/nextjs --save
added 24 packages in 3s
~/hoofnotes  nvim next.config.ts instrumentation-client.ts sentry.server.config.ts instrumentation.ts app/global-error.tsx
import type { NextConfig } from "next";
import { withSentryConfig } from "@sentry/nextjs";
// App Router, Next.js 15.3+; keep your existing options.
const nextConfig: NextConfig = {};
export default withSentryConfig(nextConfig, {
// Source maps are set up separately in Telebugs.
sourcemaps: { disable: true },
});
import * as Sentry from "@sentry/nextjs";
Sentry.init({
// Copy the complete Telebugs DSN, key and path included.
dsn: "YOUR_TELEBUGS_DSN",
});
// Remove this test once it appears in Telebugs.
Sentry.captureException(new Error("Hello from Hoof Notes"));
import * as Sentry from "@sentry/nextjs";
Sentry.init({
// Use the same complete DSN as the browser.
dsn: "YOUR_TELEBUGS_DSN",
});
import * as Sentry from "@sentry/nextjs";
export async function register() {
if (process.env.NEXT_RUNTIME === "nodejs") {
await import("./sentry.server.config");
}
if (process.env.NEXT_RUNTIME === "edge") {
await import("./sentry.edge.config");
}
}
export const onRequestError = Sentry.captureRequestError;
"use client";
import * as Sentry from "@sentry/nextjs";
import { useEffect } from "react";
export default function GlobalError({ error }: { error: Error }) {
useEffect(() => {
Sentry.captureException(error);
}, [error]);
return (
<html>
<body><p>Could not open your notes.</p></body>
</html>
);
}
~/hoofnotes  cp sentry.server.config.ts sentry.edge.config.ts
~/hoofnotes  npm run dev
> [email protected] dev
> next dev

  ▲ Next.js
  - Local: http://localhost:3000

  ✓ Ready

Hang on, I already use Sentry

Keep @sentry/nextjs. Point each runtime’s DSN at Telebugs. Error reporting needs no Sentry account; source-map uploads have their own destination settings.

Server rendering and browser errors?

Both. The Next.js SDK has integrations for server request errors and React render failures. Connect the runtimes you use to Telebugs and keep their reports together.

App Router or Pages Router?

Both are supported by the Sentry SDK. Their setup differs, but their reports can go to the same Telebugs server.

Will I recognize the code after a production build?

Yes. Give Telebugs the matching source maps and it can show your original code in the backtrace. They don’t need to be uploaded to Sentry.