I am creating a project (currently on local) using NextJS v14.2.4 and I am using app router. I am rendering some pages on the client side for adding interactivity to it.

There are some scenarios where some error might occur while calling a third party API/service (Firebase Auth in my case), and I would like to log those errors in a file or my VSCode terminal rather than the browser.

1. Is it a good practice to log these errors on a file or is there any other practice that we should follow for these type of scenarios. I am making this project as a practice self project but trying to follow industry practices.

2. I tried winston and pino for logging errors, but for both of the cases, I was unable to log the errors/information

Is there any alternate practice to follow for this case or any other library to explore for logging these errors.

I tried winston(https://www.npmjs.com/package/winston) and pino(https://www.npmjs.com/package/pino) for logging errors, but for both of the cases, if I put file as a transport option, I get an error that module ‘fs’ is not present. Whereas, if I use console as a transport, it outputs the errors on the browser console.

My code for logging errors

        try {
            const provider = new GoogleAuthProvider()
            const { user: {
                displayName: name,
                email,
                photoURL: profilePicture
            }} = await signInWithPopup(firebaseAuthUtil,provider)
            // do something with user
        }
        catch(error) {
            //log error into a file/in my terminal
            log.error((error as Error).message)
        }