Giter Site home page Giter Site logo

ajstacy / adze Goto Github PK

View Code? Open in Web Editor NEW
92.0 92.0 7.0 15.35 MB

A library for shaping your JavaScript logs.

License: Apache License 2.0

HTML 3.14% TypeScript 88.79% JavaScript 7.99% Shell 0.07%
adze browser javascript logging node typescript

adze's People

Contributors

ajstacy avatar andersonjoseph avatar dependabot[bot] avatar ryansonshine avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

adze's Issues

Adze Concepts modifiers incorrect verbiage

In the Adze Concepts section of the docs, the modifiers subsection has incorrect verbiage on the example. We need to update the example code and snap new screenshots.

Create a stdout Modifier

  • Add support for a new modifier that adds support for stdout by stripping away extra formatting.

Create Convenience Formatter Functions

Create a couple of convenience log data formatter functions for use within log listeners that accepts the log data object.

  • formatHumanReadable(data);
  • formatMachineReadable(data);

Create Allowed Namespaces API

Rather than letting the user create a new namespace on the fly, it would be useful to control them centrally so that you can know what namespaces exist. This will assist with filtering logs because you can view all app namespaces at a glance.

How to use with Google Cloud?

GCPs logs are rather odd. Using adze normally results in one log per line. So if I log an object, with 5 properties, I see 5 separate logs. I have tried to do a bit of research and it's something to do with stdout.

I tried using machineReadable, but it resulted in this error:

Converting circular structure to JSON
--> starting at object with constructor 'Socket'
| property 'parser' -> object with constructor 'HTTPParser'
--- property 'socket' closes the circle

Any ideas on how to configure adze to "work"? They have a few packages for compatability with loggers:

log object should be extended when a label is added to support counters, timers, and mdc

When a log chain is started the label() method should return an extended log object that contains the counter, timer, and mdc methods. This will allow TS to throw errors when a user attempts to write a log using a counter, timer, or mdc method that hasn't already specified a label.

This will allow the modifier queue to be removed since labels will be enforced to occur before count, time, and mdc.

Feature suggestion: intercept log data or configurable middleware

I've run into a few situations while using adze where I wish I had a way to modify or intercept the log data before it is terminated. Something like this would be exceptionally useful.

adze({
  middlware: (logData) => {
    if(foo) {
      // terminate as is
      return logData
    } else {
      // do not log this request
      return null
    }
  }
});

// Or

adze().intercept((logData) => {/* do something else */}).log("log something")

This would be exceptionally handy for writing custom logging code ontop of adze. In my case this would be helpful for building a react hook where a log call needs to be placed inside of an effect.

react hook example
const useAdzeEffect = () => {
  const [logDataState, setLogDataState] = useState(null);
  const logger = adze().intercept((currentLogData) => {
    if(logDataState) {
       return currentLogData;
    } else {
      setLogDataState(currentLogData)
    }
  });
  useEffect(() => {
    if(logDataState) {
      logDataState
      logger.log(...logDataState.args)
    }
    
  }, [logData])
  return logger;
}

const MyComponent = () => {
  let logger = useAdzeEffect()
  logger.label("MyComponent").log("Some state variable")
  //...
}

Another use could be modifying the log level or isSilent keys in place in special cases, such as a function taking too long.

Slow function warning example
function mySometimesSlowFunction() {
  adze().label('slowfn').time.verbose('Begin slow function')
  // occasionally slow code...
  adze().label('slowfn').timeEnd.intercept(
    (logData) => {
      if(logData.data.timeElapsed > 10000){
        logData.level = 0;
      }
      return logData
    }
  ).verbose('Function complete')
}

Going back to react, adding the ability to not log every other render when strict mode is enabled would be very handy.

React strict mode example
function useStrictLogger() {
  const [countState, setCountState] = useState(0)
  adze().intercept(
    (logData) => {
      if(countState % 2 === 0){
        return null
      }
      return logData
    }
  ).log('Rendered component')
  setCountState(countState + 1);
}

And some other helpful use cases:

  • Debugging custom levels and contexts by logging in the logger
  • Adjusting browser console output styles dynamically based on the content of the log
  • Filtering PII before it reaches the shed
  • Adding / Removing methods from modifierQueue dynamically

This is only a suggestion of course, and I realize an 'escape hatch' like this is not best practice and much of this can be accomplished by filtering in the shed. That said, from my experience using adze, not having a way to add my own modifiers has been an inconvenience when using an otherwise lovely logging library.

The Namespace Modifier Should Allow for Restof Operator

Currently when applying namespaces to a log via the namespace or ns methods you must pass in an array of strings if you want to apply multiple namespaces. This API could be simplified to allow a restof args operator to collect the multiple namespaces.

// Current API
adze().ns(['namespace-1', 'namespace-2']);

// Proposed API
adze().ns('namespace-1', 'namespace-2');

Create Common Usage Example

Under the Adze Concepts page there should be a common usage example to clarify the primary way Adze is meant to be used.

URL Param for Env Control

Adze should support a URL param for controlling the logging environment. The param name should be configurable by the user.

Rerender function doesn't work with sealed logs.

The rerender function doesn't accept sealed logs.

115075265-d2aaf880-9ec8-11eb-965a-133dacb84be6

const { log: loga, render: log_render } = log().custom("honeybadger", "All of the other animals just eat his scraps.");

const coll = shed.getCollection('*');

filterNamespace(coll, ['foo']).forEach(rerender);

Enable Filters on Adze Configuration

Currently filtering can only occur with a configured Shed. Adze logs should support filter configuration and as logs are terminated they will self-filter based on the config.

Update the Preview Image

The preview image shows the old "attention" log level that is now replaced by alert. Update the image to reflect the API changes.

Create Docs for Micro-Frontends

  • Adze + Shed can be utilized together to enable efficient logging in micro frontend architectures. Write a docs section explaining how it works.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.