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 iOS<https://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) @avibathula<https://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 GitHub<#46 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABKCM64D3IWCAZ6E23CLFNLZ5VJSTAVCNFSM6AAAAABQVYGXE2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBQGE4TGOBUGY>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[ixartz]

I mostly use Sentry for frontend.