Instrument NextJS apps

[codecapitano]

Description

NextJS support is currently poor, which leads to customers having issues when using some instrumentations and often leaves users with question on how to properly set up Faro for NextJS apps.

Proposed solution

Some Ideas:

• Create a NextJS specific instrumentation which auto configures the most important parts
  • Instead of using the web-tracing package, which is otel under the hood, use the @vercel/otel package
• Create documentation which is easy to find and to understand

Links:

• NextJS docs on how to use OpenTelemetry

Related Faro issues and discussions

• TracingInstrumentation is breaking NextJS application #219
• NextJS 13 Bug: Tracing Instrumentation breaks next/link elements with prefetching #260
• Discussion about Svelte KIT SSR

Context

[jpmcb]

Would be very interested in this. And we'd be happy to test it out over at https://github.com/open-sauced/app or give feedback.

open-sauced/app#3139

I'm also wondering if there are recommendations for getting routes to work with the NestJS useRouter (which I believe is their own routing implementation). Right now, with what I've integrated above ^, it only shows the route for our base feed/ route, nothing else.

[codecapitano]

Hi @jpmcb This sounds awesome, thank you so much 🙏

I can't say when exactly we'll start working on it, but it should be soonish.

Unfortunately I can't give any good recommendations for Next.js yet.

Cheers,
Marco

[elepedus]

👋 Hey, just checking in to see if anyone's managed to get Faro working with NextJS?

I see the linked issues are still unresolved. Does that imply that NextJS is effectively unsupported at present?

[erkattak]

Not fully. We've only managed to get the Console instrumentation working server-side. Most other instrumentations/options rely on window being available globally.

On the frontend we're able to get everything working, but for the React instrumentation, you'll need to make sure the top-level component is client rendered. It's not perfect at the moment for us, but we're looking forward to improvements

[jpmcb]

Maybe some good data to getting this pushed forward: in the most recent StackOverflow developer Survey, NextJS is 3rd in the category of most used / most desired web frameworks. It seems it's synonymous these days with building React frontends.

This continues to be a heavy blocker for us adopting more of Grafana's cloud offering and we're forced to use competitors (like Sentry.io) for frontend observability

[tskorupka]

Hey,

just checking does anyone has got working browser based routing for nextjs?

Could anyone share code pieces of how to instrument it?

I am using general sdk for web, not one based for React.

@erkattak any thoughts here? 🙏

Kind Regards,
Tomasz