Secure apikeys or tokens on browser apps such as react

Question

I am working on a react app and I am a newbie to client side technologies and scripting languages.

One of the task I am assigned is to identify an approach to secure the sensitive data in the app code.

For example, we are planning to use a logging tool (such a Splunk, Loggly, Sentry etc.) to write and push logs to the server.

There are JS libraries available for using these tools. And each of them require some sort of apikey or token, issued once from the server, for it to work.

It is easy to write a sample code (JS, ES or TypeScript) by putting such keys or token in it and test the integration on local machine. But I think it poses a security risk to have such code deployed in production environment.

The example code as following.

const logger = new LogglyTracker();
    logger.push({'logglyKey': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx'});
    var error = {
        level: "error",
        userId: "SomeUserID",
        message: "Some Error",
        clientId: "some clientid"
    }
    var info = {
        level: "info",
        userId: "SomeUserID",
        message: "Some Info",
        clientId: "some clientid"
    }
    logger.push(info);
    logger.push(error);

Such keys or secrets can be retrieved from the client script and log server can be flooded with junk logs causing it to be slow or down or incur huge cost.

Research I have done so far points to use LocalStorage but there is no 100% agreement on its security.

So I am looking for a way to secure such sensitive information on the client code. I want at least to be able to make it hard for it to be revealed if not impossible.