Help us improve the Next.js experience

[rachrwang]

Hi all!

We’re kicking off a series of improvements for the Next.js experience, ranging from setup to in-product experiences like Issues, Performance, Replay, and Crons.

To inform our upcoming efforts, we’d love to hear from you on the following topics:

1. How was your experience setting up Sentry for Next.js? Were there any surprises or gaps in the experience?
2. How actionable are the Issues that Sentry surfaces for Next.js? Are there particular errors that could be improved with better or different context?
3. Do you use our Performance product for Next.js? Have you experienced any gaps with that experience?
4. If you had a magic wand, what’s one change that you’d want to see in Sentry for a better experience?

Please chime in below with your comments & ideas, and if you want to speak to a member of Sentry’s product team live to share feedback, you can schedule a call here.

[smozely]

1, I've recently set it up in a couple of projects, out of box experience has been pretty good. The wizard was useful. I ran into a bug with setting up the node-profiler
2, For what we've done so far they have been good, but haven't used it in anger yet ... it has been more issues not related to next, and stuff in our own code, which is what we wanted
3, Yes ... main thing is linking together all the things happening server-side to give a complete view of why txn's took as long as they did
4, Out of the box setting up performance client and server side

... Happy to answer any more

[lforst]

Hey, thanks a lot for taking the time to write this feedback! :) Would you mind expanding a bit on 3 and 4?

• Regarding 3) What was missing for you? Database queries, requests, and general operations. I'm interested if we could capture more stuff that would be useful.
• Regarding 4) I assume the things you had to set up were the error components on the client side and database integrations serverside. Is that correct, or was there more?

[smozely]

Ah sorry for delay,

Have to admit I wrote this right after setting stuff up, and was having some odd spikes in some requests taking a long time, trying to understand why (it might actually be AWS Amplify hosting causing some requests to take longer than expected)

But trying to expand

3. I think the main thing is just this view I've screen shot here ... I guess I was expecting something more like "Server side for '/' took XYZms" and "Client side for '/' took ZYXms" but all the separate "function.nextjs" rows make it hard to tell what the server side was ... or how do I get client side being reported as 3 seconds when server side seems so quick (Again Amplify hosting)

4. I guess the main bit here is I'm confused about how traces are working / should be showing. take these two pictures

and

Why does one not have the have the "Layout server component"? So I'm assuming something is not setup right, and its the kinda thing I would have expected to have just worked, so my magic wand would be that just working.

Maybe this is all me not being familiar enough with this new stuff in Sentry, but it makes it kinda hard to trust what its telling me when I can't make sense of some of this stuff.

Both your comments about database access are right too, that would be good ... but in the apps I'm dealing with, one is all API calls, and the other is using Xata as the backend, so not auto setup stuff.

Hope something is useful there!

[ByronBecker]

I'm currently testing out Sentry with NextJS. The setup wizard was very smooth!

I'm currently receiving uncaught errors, but I would like to add console errors via captureConsoleIntegration (in @sentry/integrations) - however, I'm unable to receive any console errors when testing locally.

I'm setting things up as follows:

import * as Sentry from "@sentry/nextjs";
import { captureConsoleIntegration } from "@sentry/integrations";

Sentry.init({
    dsn: "...",
    // Setting this option to true will print useful information to the console while you're setting up Sentry.
    debug: false,

    replaysOnErrorSampleRate: 1.0,

    // This sets the sample rate to be 10%. You may want this to be 100% while
    // in development and sample at a lower rate in production
    replaysSessionSampleRate: 0.1,

    // You can remove this option if you're not planning to use the Sentry Session Replay feature:
    integrations: [
        new Sentry.Replay({
            // Additional Replay configuration goes in here, for example:
            maskAllText: true,
            blockAllMedia: true,
        }),
        captureConsoleIntegration({ levels: ["error"]})
    ],
});