What about logging for client-side code?

[avibathula]

I ran into an interesting issue using the logging the repo has enabled using pino & @logtail/pino packages in src/libs/Logger.ts.

I started seeing the following error NextJS pino Error: Cannot find module <local-repo-path>/.next/server/chunks/lib/worker.js

After some significant digging, I realized that the logging using pino with logtail is limited to server-side operations only, and by mistake I was using the logger in client-side components page.tsx etc. As pino uses worker threads from NodeJS, which is not available on client side, understandably build process was running into "Cannot find module". Unfortunately, the error messages showed no hints, and it was super hard to find what was going on, at least for a newbie like me 😄

Questions

1. As one is developing their client side UX, there can be a lot of bugs/misbehaviors over there too. How would one generate+get logs to investigate such client-side issues? - What is the suggested best practice that nodeJS and nextJS devs use?

   • One option I see is to use @logtail/browser for generating client-side logging - but that will make the logging functionality complicated to keep the logic and behaviors consistent on both client and server side. Also, as users grow, the volume of logs generated will become exponentially high and it will become a needle in a haystack to have all those logs be sent to betterstack. I guess one can have some flag in setting to enable sending detailed logs to betterstack with some session-ids to be able to point out to.

     • I tried out using @logtail/browser for client-side pages and it got complicated with nextJS's SSG optimizations resulting in some log statements executing during the build rather than at runtime - lol.

   • OR another option is to just use console logging for client side and ask the user to copy and send client-side logs from browser's console - which is not so user-friendly.

   • ??

2. Besides investigating bugs - is product usage analytics of how users are using the product a valid usage of pino based logging? if no, what alternative packages should one consider for that?

[ixartz]

@avibathula Indeed, it seems pino.js has better support for server side.

For now, I didn't find any solution working for both server and client side. It seems most of the solution is focusing on server side. There isn't any full-stack solution. I would love to hear any suggestion.

One solution is to use console.log for the frontend and use Sentry to collect the logs. This is definitively not ideal.

[avibathula]

What do you use when building front end to ensure what you want is what is happening, as well as when debugging??

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Remi Wg @.> Sent: Sunday, October 27, 2024 3:14:17 PM To: ixartz/SaaS-Boilerplate @.> Cc: Avi Bathula @.>; Mention @.> Subject: Re: [ixartz/SaaS-Boilerplate] What about logging for client-side code? (Issue #46)

@avibathulahttps://github.com/avibathula Indeed, it seems pino.js has better support for server side.

For now, I didn't find any solution working for both server and client side. It seems most of the solution is focusing on server side. There isn't any full-stack solution. I would love to hear any suggestion.

One solution is to use console.log for the frontend and use Sentry to collect the logs. This is definitively not ideal.

— Reply to this email directly, view it on GitHubhttps://github.com/ixartz/SaaS-Boilerplate/issues/46#issuecomment-2440193846, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABKCM64D3IWCAZ6E23CLFNLZ5VJSTAVCNFSM6AAAAABQVYGXE2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBQGE4TGOBUGY. You are receiving this because you were mentioned.Message ID: @.***>

[ixartz]

I mostly use Sentry for frontend.

[avibathula]

Hi @ixartz - just to check for clarification, were you just cleaning up the issues with the assessment of your previous response being the suggested answer? OR was there any commit associated with this "completed" state?

[ixartz]

Hi @avibathula, in the next major release of the project, I'll add a new logging system, a unified logging system working for server and client side.

[avibathula]

Hi @ixartz - any update on this one?

I still see the old context in https://github.com/ixartz/SaaS-Boilerplate?tab=readme-ov-file#logging

[ixartz]

Sure, the Pro version is currently using the new logging system, well integrated with Sentry, Better Stack, but also console. Work for frontend and backend.