Best NextJS Logging Stack?
Hey guys so I am working on a NextJS eCommerce application and I also have other apps I have in prod and I am not happy with how I am handling logging.
A big feature I want is one that easily allows local logs as well that way I can filter by environment and see whats going on.
Looking for a solution that can handle large environments with multiple environments / branches
As of my research I found these stacks:
BetterStack + Winston/Pino
Axiom - I dont see a way to do local environments though
Sentry - not ideal as it seems more of a not focussed feature
7 Replies
Bonus if its a platform that makes it easy to monitor/focus on error logs (idk if I am aksing for a lot)
Any log platform worth anything should let you filter on log level, most should also let you filter on source if you have a different source for environment or by parsing json otherwise. If local means to your console, pino with pino-pretty works well in my experience
(disclaimer: i work for axiom)
the recommended way to separate environments in axiom is by using separate datasets. of course it's also possible to add the environment as an attribute and filter based on that, but it means you need to do it every time which isn't ideal.
we have our own wrappers for winston and pino:
https://github.com/axiomhq/axiom-js/tree/main/packages/winston
https://github.com/axiomhq/axiom-js/tree/main/packages/pino
but if your main goal is "traditional" error monitoring, honestly you can't beat sentry for that. of course you end up paying for it (in $) when you use the other parts of their platform where something more generic would be equally useful
if some of your apps involve multiple services talking to each other, i'd recommend investing the time to get started with OTel tracing. makes it 100x easier to figure out what's really going on when there is a bug. but getting it set up initially is rough (although specifically in next.js it has gotten much better lately)
Thanks @cje I really liked Axiom so awesome to see there was a wrapper I missed 🙂 Will look into this
Makes sense, I guess I kne wthat but did not connect the dots for some reason, this checks out
So with opentelemtry, I can trace logs and "connect" relevent ones accross services and I can feed that into Axiom?
Also what do you guys recommend? Pino wrapper or similar or just connecting to nextJS and work with that?
yes, what you get in the end is something like this https://play.axiom.co/axiom-play-qf1k/explorer?qid=9XCzfzKkX0X-skn8pj&relative=1&spanId=ea711865f06588f1&traceDataset=otel-demo-traces&traceId=7dd408c4a66aeb43b1b9448d37e28a22&traceStart=2024-09-30T20%3A23%3A45.406Z
Axiom
Axiom Dashboard
the more different stuff talks to each other in your app, the more useful it is. for a small app that's just one backend service, the setup might not be worth it.
next.js is a weird one because there's so many different options for logging from it
- pino: great if you just want to send "traditional" logs
- next-axiom: gives some quality of life stuff like auto-wrapping route handlers
- opentelemetry: by far the most powerful solution, but also a pain to set up
Winston will give you the option of using structured logging, for larger systems this is a god send as you can write complex queries to interrogate the logs and this helps with monitoring the overall health of a system and also with debugging. More here : https://datalust.co/seq
Seq
Seq — centralized structured logs
Seq is the self-hosted search, analysis, and alerting server built for structured log data.