Seq with NextJS

[hades200082]

I have an application that uses .NET 9 on the back end and NextJS for the front end.

I'd like to have NextJS reporting all log events (client and server) back to my Seq instance. Ideally, I'd also like to add open telemetry as well.

The ultimate goal is to be able to trace a given request/action in the front end through my entire stack, allowing me to filter the logs in Seq to show me every log entry related to a specific error.

I've tried setting up pino-seq for this but it appears that the transport option in pino uses a worker thread to handle log transports. However, Next.js's environment (especially in React Server Components or during server rendering) doesn't support this mechanism directly due to module resolution or the worker runtime.

I'm a little stuck on where to go next with this and would appreciate some guidance.

[liammclennan]

Hi @hades200082

None of the JavaScript Seq clients (pino-seq etc) have support for tracing so OpenTelemetry will be the best approach.

See https://opentelemetry.io/docs/languages/js/getting-started/browser/

Configure the exporter to use HTTP/protobuf as this is the only protocol supported by the browser OpenTelemetry SDK and Seq.

https://opentelemetry.io/docs/languages/js/exporters/#usage-in-the-browser

[hades200082]

One of the main issues I'm having is that NextJS uses React Server Components and a good deal of the JS code runs in NodeJS on the server for pre rendering or SSR AND then again in the browser once the client side React takes over.

This means that any solution to include structured logging in NextJS needs to handle both.