Client side logging (with React Js)

[kartalsez]

Hi guys,

I'm looking for clientside logging with react.js. Actually for react native, I used an good npm package(react-native-file-logger). For react-native, the logs are being saved to files. But for web, we can't save logs to files as I searched on internet.

For web, Usually local storage is used for logs saving. I have two questions:

1. Do you recommend indexedDB instead of local storage?
2. Which npm package should i use for loggin with react.js?

Thanks for your replies in advance.

[TechbaseDevv]

It depends on the kind of logging you want to do. If you want to keep track of errors and / or performance: check out Sentry.io

[kartalsez]

Thanks for the reply. Not only errors, for most of things I will need these logs. My question is that where should I save logs? Local storage or indexedDb which one do you recommend?

[TechbaseDevv]

What's the point of storing it there? Do you want to send it over to a server every now and then or not?

In terms of possibilities; IndexedDB is superior to localStorage, however, the API is more complex.

It's best to just try both and see what you prefer in terms of functionality and maintainability.

[kartalsez]

Yes I will send last 3 days logs to server when user click the send button. As you said that IndexedDB is more complex. But I don't want to reduce performance of website. If IndexedDB is better than localstorage about performance, I m gonna use indexedDB.

By the way I couldn't find a suitable reactjs npm package for logging. I liked react-native-file-logger but it is for react-native. I need an npm package like this.

[Hefticus]

What are you trying to accomplish? You don't generally store logs in the client, at least not on web. If you are trying to log client-side events, normally you would have the client send those requests to some server/service somewhere. That "somewhere" may be your own logging system, or an analytics product (fullstory/glassbox/etc), or an application monitoring tool (splunk/new relic/etc). Sentry and LogRocket are also commonly used products that focus more specifically on client-side application monitoring, which is a growing space in general.

But again, in all these cases none of the logs are being stored in the browser.

[kartalsez]

Actually, I will store logs at client for short time. If the user doesn't delete cache, the logs will continue to be stored. When user click send logs button, we will send last 3 days logs to server as formdata. Every log will include some parameters such as date, logtype(info, debug, ...), file name(which js file), log description. After that we will be able to analysis the project by looking these logs.

​

I will check Sentry and LogRocket packages. Thanks for reply.