npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

envelop-network-viewer

v1.7.2

Published

A GraphQL Envelop plugin for providing visibility into your GraphQL operation network activity.

Downloads

5

Readme

envelop-network-viewer — Formidable, We build the modern web

Vulnerabilities Security Rating Maintainability Rating Coverage

This plugin is designed to provide visibility into how many/what network requests are made by your GraphQL Operations. This tool is primarily targeted for existing graphql projects that have grown large and complex with integrations and developers want some insight into how heavy specific GraphQL operations are in order to identify cache or optimization candidates. Below is an example of possible log output of the plugin:

useNetworkViewer {"operationName":"test","document":"query test {\n  test\n}","observations":[{"label":"HTTP/HTTPS","data":{"calls":1,"hosts":["localhost"],"requests":[{"time":1659986144633,"method":"GET","host":"localhost","port":"8883","headers":{},"response":{"time":1659986144636,"httpVersion":"1.1","statusCode":200,"headers":{"server":"stubby/5.1.0 node/v14.19.3 (darwin arm64)","x-stubby-resource-id":"1","date":"Mon, 08 Aug 2022 19:15:44 GMT","connection":"close","transfer-encoding":"chunked"},"statusMessage":"OK"},"duration_ms":3}]}}]}

Prettified output:

{
  "operationName": "test",
  "document": "query test {\n  test\n}",
  "observations": [
    {
      "label": "HTTP/HTTPS",
      "data": {
        "calls": 1,
        "hosts": [
          "localhost"
        ],
        "requests": [
          {
            "time": 1659986144633,
            "method": "GET",
            "host": "localhost",
            "port": "8883",
            "headers": {},
            "response": {
              "time": 1659986144636,
              "httpVersion": "1.1",
              "statusCode": 200,
              "headers": {
                "server": "stubby/5.1.0 node/v14.19.3 (darwin arm64)",
                "x-stubby-resource-id": "1",
                "date": "Mon, 08 Aug 2022 19:15:44 GMT",
                "connection": "close",
                "transfer-encoding": "chunked"
              },
              "statusMessage": "OK"
            },
            "duration_ms": 3
          }
        ]
      }
    }
  ]
}

Keep in mind, that this is an investigative tool that can have a heavy impact on your logs. It should only be turned on for explicit data collection activities.

Concurrency Caveat

Supporting concurrent requests relies on using Continuation-local storage, which has a performance cost, and so it isn't enabled by default. If your use case is not lambda like (node process serves one request at a time), then you will need to enable concurrency support for the plugin.

Use the enableConcurrencySupport configuration option to enable concurrency support.

Usage

Add the useNetworkViewer plugin to your envelop configuration. Note the constructor takes two parameters:

  1. The first parameter is a boolean determining if the plugin is enabled. You must explicitly enable the plugin (recommended w/ an env variable)
  2. The second parameter is the configuration for the plugin
const useNetworkViewerConfig = {
    // plugin options
};

const getEnveloped = envelop({
  plugins: [
    // all enabled plugins
    useNetworkViewer(boolean(process.env.USE_NETWORK_VIEWER), useNetworkViewerConfig)
  ]
})

Config

Below is a list of configuration properties and what they do

| property | default | description | | --- | --- | --- | | additionalObservers | empty array | Only the http/https observer is included by default. You must specify other observers that are use case specific (knex, redis, mysql, etc) | | logFunction | console.log | Specify what function is used to log network viewer info. You can specify your own logger (myLogger.debug for instance) | | logGraphQlDocument | false | Set to true to include the graphql operation in the log message | | enableConcurrencySupport | false | Support concurrent requests |

Additional Observers

These additional observers aren't included by default. They are purpose specific observers that will only be applicable to some app stacks.

Prisma Observer

If your application uses Prisma, you'll want to include the PrismaObserver in your configuration of the plugin. The prisma client observer provides observations for your database interactions using the prisma client.

Usage

You'll need to initialize the prisma client and pass it as a parameter when instantiating the PrismaObserver. Then pass the PrismaObserver instance in the additionalObservers configuration.

const prisma = new PrismaClient()

const useNetworkViewerConfig = {
  additionalObservers: [new PrismaObserver(prisma)]
};

const getEnveloped = envelop({
  plugins: [
    useNetworkViewer(true, useNetworkViewerConfig)
  ]
})

Sequelize Observer

If your application uses Sequelize, you'll want to include the SequelizeObserver in your configuration of the plugin. The sequelize observer provides observations for your database interactions using the sequelize client.

Usage

You'll need to initialize the sequelize client and pass it as a parameter when instantiating the SequelizeObserver. Then pass the SequelizeObserver instance in the additionalObservers configuration.

const sequelize = new Sequelize('sqlite::memory:');

const useNetworkViewerConfig = {
  additionalObservers: [new SequelizeObserver(sequelize)]
};

const getEnveloped = envelop({
  plugins: [
    useNetworkViewer(true, useNetworkViewerConfig)
  ]
})

Knex.js Observer

If your application uses Knex.js, you'll want to include the KnexObserver in your configuration of the plugin. The Knex observer provides observations for your database interactions using the Knex client.

Usage

You'll need to initialize the Knex client and pass it as a parameter when instantiating the KnexObserver. Then pass the KnexObserver instance in the additionalObservers configuration.

const knex = Knex({
  client: 'sqlite3',
  connection: {
    filename: ':memory:',
  },
});

const useNetworkViewerConfig = {
  additionalObservers: [new KnexObserver(knex)]
};

const getEnveloped = envelop({
  plugins: [
    useNetworkViewer(true, useNetworkViewerConfig)
  ]
})

TypeORM Observer

If your application uses TypeORM, you'll want to include the TypeORMObserver in your configuration of the plugin. The TypeORM observer provides observations for your database interactions using the TypeORM datasource.

Usage

You'll need to initialize the TypeORM datasource with options.logger set to an instance of TypeORMObserverLogger. Then pass the instance of the TypeORMObserverLogger when instantiating the TypeORMObserver. Finally, pass the TypeORMObserver instance in the additionalObservers configuration.

const typeOrmObserverLogger = new TypeOrmObserverLogger();

const datasource = new DataSource({
  type: 'sqlite',
  database: ':memory:',
  logger: typeOrmObserverLogger,
  logging: ['error'], // still respected
});

const useNetworkViewerConfig = {
  additionalObservers: [new TypeORMObserver(typeOrmObserverLogger)]
};

const getEnveloped = envelop({
  plugins: [
    useNetworkViewer(true, useNetworkViewerConfig)
  ]
})

If you've already configured your datasource with logger and logging value, you can provide those to TypeORMObserverLogger instead. The TypeORMObserverLogger will pass all logging to the provided logger.

Example, to use one the built-in file logger to log query errors then you would use the following to initialize the TypeORMObserverLogger

const typeOrmObserverLogger = new TypeOrmObserverLogger(
  "file", /* or any valid DataSourceOptions.logger value */ 
  ['error'] /* or any valid DataSourceOptions.logging value */)
);