API routes ->

The following examples are Sentry tests. Note that 1 and 2 are not expected to work if deployed to Vercel yet.

Top-of-module promise that rejects, but its result is not awaited. API Test 1

API has a top-of-module exception. API Test 2

API with an exception in its request handler. API Test 3

API uses a try/catch to handle an exception and records it. API Test 4

SSR ->

There are currently two known bugs with respect to SSR transactions: they don't get recorded on Vercel, and ones that are recorded and have an error are grouped in the Sentry UI by the error page name rather than the requested page name.

getServerSideProps  throws an Error. This should cause _error.js to render and record and Error in Sentry. SSR Test 1

getServerSideProps returns a Promise that rejects. This should cause _error.js to render and record an Error in Sentry. SSR Test 2

getServerSideProps calls a Promise that rejects, but does not handle the rejection or await its result (returning synchronously). Sentry records an Error but will not when deployed to Vercel because the serverless function will already have exited. SSR Test 3

getServerSideProps manually captures an exception from a try/catch. This should record Error in Sentry. SSR Test 4

Client exceptions ->

There is a top-of-module Promise that rejects, but its result is not awaited. Sentry records an Error. Client Test 1

There is a top-of-module exception. _error.js should render and record ReferenceError('process is not defined') in Sentry. Client Test 2

There is an exception during React lifecycle that is caught by Next.js's React Error Boundary. In this case, when the component mounts. This causes _error.js to render and records Error in Sentry. Client Test 3

There is an unhandled Promise rejection during React lifecycle. In this case, when the component mounts. Sentry records an Error. Client Test 4

An Error is thrown from an event handler. Sentry records an Error. (This page also demonstrates how to manually instrument your code for performance monitoring.) Client Test 5

Next.js 13 Features ->

Next.js 13 continues to bring many new features to developers, especially those depoying on Vercel. We are trying to keep up, we promise!

Performance ->

Why should I care about Performance?

Front-end transactions are recorded for each pageload or navigation.

Backend transactions are recorded for each API or page route.

Sentry creates links between errors and transactions, and can be seen in the trace navigator docs.

Manual performance instrumentation is demonstrated in the final example below (throwing an error from an event handler).

Add Edge Function example
Trigger Edge Function