javascriptreactjstypescriptbrowserlog-level

loglevel-plugin-remote - Send browser logs to server without printing in the browser


I am using loglevel, loglevel-plugin-prefix and loglevel-plugin-remote to send frontend logs to the backend in a React App. I want to be able to send the logs to the backend in prod without printing them on the console. Is there a way to do that?

Here's what the code looks like:

import * as log from "loglevel";
import prefix from "loglevel-plugin-prefix";
import remote from "loglevel-plugin-remote";


remote.apply(log);
prefix.reg(log);
prefix.apply(log);
log.enableAll();

I've tried adding console.log = () => {}; but that has no effect.


Solution

  • I was able to solve this by doing the following:

    1. Check for production environment.
    2. Override methods inside window.console.

    All this should be at the top of index.js (or the equivalent).

    import * as log from "loglevel";
    import prefix from "loglevel-plugin-prefix";
    import remote from "loglevel-plugin-remote";
    
    ...
    
    
    if (process.env.NODE_ENV === "production") {
        if (!window.console) (window.console as any) = {};
        var methods = [
          "trace",
          "log",
          "debug",
          "warn",
        ];
        for (var i = 0; i < methods.length; i++) {
          (console as any)[methods[i]] = function () {};
        }
      }
    
    ...
    
    
    remote.apply(log);
    prefix.reg(log);
    prefix.apply(log);
    log.enableAll();
    
    
    ...