Next.js observability gaps and how to close them

The blog post discusses the observability gaps in Next.js applications and provides guidance on how to address them using Sentry. Next.js offers features like server-side rendering and file-based routing but lacks visibility into production environments due to its three-runtime architecture (client, server, edge). This results in errors that can be challenging to trace, particularly when database queries are masked by ORM abstractions, and server actions lack detailed error messages. The post highlights specific issues such as hydration errors in React, which occur when client-rendered HTML does not match the server-rendered content, and the lack of telemetry spans in server actions. To improve observability, the blog suggests using Sentry to capture full stack traces, provide HTML diffs for hydration errors, manually instrument server actions, and integrate database clients to expose SQL queries within traces. It also covers AI agent monitoring using the Vercel AI SDK and emphasizes the importance of configuring logs and metrics properly, as these are not subject to sampling like traces. The post concludes by encouraging the use of Sentry's tools to gain a comprehensive view of application performance across all Next.js runtimes.