• Stars
    star
    187
  • Rank 206,464 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🎯 A gRPC-Node Distributed Tracing and Monitoring Tool.


HORUS


A Distributed Tracing and Monitoring Tool for gRPC-Node Applications


What is Horus?

Horus is a Distributed Tracing and Monitoring Tool for gRPC-Node Applications.

Our team aims to provide the user a seamless experience in adding tracing and monitoring functionality to their application with our NPM Packages!

Core Features

  • Horus traces, logs and monitors gRPC requests. Tracing and logging features include:
    1. Provides data on which gRPC method was called for a specific gRPC request.
    2. How long it took to complete the gRPC request.
    3. Date/Time of Completion.
    4. Traces any additional Intraservice Requests that were made in completing that request.
    5. Request data will be outputted in a text file (but users can also visualize the data with our Neo4J Integration.)
  • Alerts user whenever gRPC request times go beyond a threshold of (+/-) 2 STD of its average request time using Slack Webhooks.
  • We provide a mock-microservice which performs gRPC requests AND intraservice gRPC requests between 2 different services.
  • Neo4j Integration to visualize data.

The Mock-Microservice app. (in master branch) that we provide is a bookstore app. with the following services:

  • Books Service
  • Customers Service

And yes, it does support intraservice gRPC requests! (Check out our setup tutorial in the table of contents below).


All modules can be found under the npm organization @horustracer. If you have any questions, please reach out to the team at: [email protected]


Table of Contents



Installation

Installing Horus into your application is quick and easy.
Follow the steps below to set up the ClientWrapper, ServerWrapper, and any intraservice requests that you have.

For a more in depth guide to installing Horus, check the tutorial right below the installation section.

NPM Installation:

npm install @horustracer/ClientWrapper //(Mandatory)
npm install @horustracer/ServerWrapper //(Mandatory)
npm install @horustracer/Visualizer //(optional, for Neo4J integration to visualize request data.)
            
or 
            
npm install @horustracer/ClientWrapper @horustracer/ServerWrapper @horustracer/Visualizer

1. Setting up the ClientWrapper

  • Import the ClientWrapper from @horustracer/ClientWrapper into your stub (gRPC client) file.
  • Initialize a new instance of the ClientWrapper, passing in the gRPC client, service and output text file name.
  • Then export the ClientWrapper in the place of your previous stub.
const HorusClientWrapper = require('@horustracer/ClientWrapper');
const grpc = require("grpc");
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const PROTO_PATH = path.join(__dirname, "../protos/books.proto");

const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
  keepCase: true,
  longs: String,
  enums: String,
  arrays: true
});

const BooksService = grpc.loadPackageDefinition(packageDefinition).BooksService;

const client = new BooksService (
  "localhost:30043",
  grpc.credentials.createInsecure()
);

//process.env.HORUS_DB utilizes environment variables. You can replace it with your MongoDB URI.
//process.env.SLACK_URL utilizes environment variables. You can replace it with your SLACK URL.
const ClientWrapper = new HorusClientWrapper(client, BooksService, 'books.txt', 'main', `${process.env.HORUS_DB}`, `${process.env.SLACK_URL}`);

module.exports = ClientWrapper;

2. Setting up the ServerWrapper

  • Import the ServerWrapper into your server file.
  • Rather than invoking the server.addService method, create a new instance of the ServerWrapper, passing in the server, proto, and methods as arguments.
const HorusServerWrapper = require('@horustracer/ServerWrapper);
const grpc = require('grpc');
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const controller = require("./booksController.js");
const PROTO_PATH = path.join(__dirname, '../protos/books.proto');

const ServerWrapper = new HorusServerWrapper(server, booksProto.BooksService.service, {
  CreateBook: async (call, callback) => {
    const book = call.request;

    let result = await controller.CreateBook(book);

    callback(null, result);
})

server.bind("127.0.0.1:30043", grpc.ServerCredentials.createInsecure());
server.start();

3. Intraservice Requests

  • If you don't have any intraservice requests, you're all done and can skip this part.
  • If you do, invoke the makeHandShakeWithServer method in your intraservice request's callback. The makeHandShakeWithServer method lives on the ClientWrapper. It's first argument is the ServerWrapper it's being invoked in and the second is the name of the intraservice request. (Remember because of part 1, your stub should be exporting the ClientWrapper rather than the gRPC client);
const HorusServerWrapper = require('@horustracer/ServerWrapper);
const booksStub = require('../stubs/booksStubs.js)

const CustomerServerWrapper = new HorusServerWrapper(server, customersProto.CustomersService.service, {
  GetCustomer: async (call, callback) => {
    const customerId = call.request;

    const customer = await controller.GetCustomer(customerId);

    const customersFavoriteBookId = {favBookId: customer.favBookId};

    booksStub.GetBookById(customersFavoriteBookId, (error, response) => {

      booksStub.makeHandShakeWithServer(CustomerServerWrapper, 'GetBookById');

      callback(null, result);
    });
})

Once you have completed this step for your intraservice requests, you're all done.


↥Back to top


Branch Information

  • Master - Includes Mock-Microservice, supports Intraservice Request.
  • Staging - Staged version of master. Think of it like a draft of the master branch. .
  • Package Branch - Includes source code for our 3 NPM packages.
    1. @horustracer/ClientWrapper
    2. @horustracer/ServerWrapper
    3. @horustracer/Visualizer

To iterate fork to your own repository and submit PRs.

Click here to see different ways of contributing.


↥Back to top


Step-by-Step Tutorial For Horus

Note: This does NOT include setting up the Mock Microservice Application. Check that section below, if you're interested in running the mock microservice application with the Horus Tool.

Installing Horus into your application is quick and easy. Follow the steps below to set up the ClientWrapper, ServerWrapper, and any intraservice handshake functions you may need.


1. Setting up the ClientWrapper

The Horus ClientWrapper does its magic by "wrapping" your preexisting gRPC stub (gRPC client). Think of it as a middleman which lives between you (the developer) and your stub. Horus uses a similar approach for the ServerWrapper, except it wraps your server methods rather than the gRPC server itself.



Install the ClientWrapper by running npm install @horustracer/ClientWrapper. Then "require" in the ClientWrapper into your stub (gRPC client) file.

// run "npm install @horustracer/ClientWrapper" in your terminal

const HorusClientWrapper = require('@horustracer/ClientWrapper')

Now install and require in the grpc, @grpc.proto-loader, and path modules as you normally would. Using grpc.proto-loader, we are dynamically generated code from the proto files. This is opposed to static generation of code using the protoc compiler.

We installed the 'path' module to help us get the path of where the .proto file is located in your file system.


// run "npm install grpc @grpc/proto-loader path" 

const HorusClientWrapper = require('@horustracer/ClientWrapper');
const grpc = require("grpc");
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const PROTO_PATH = path.join(__dirname, "../protos/books.proto");

Next set up your package definition, service, and client as you normally would with gRPC.


const HorusClientWrapper = require('@horustracer/ClientWrapper');
const grpc = require("grpc");
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const PROTO_PATH = path.join(__dirname, "../protos/books.proto");

const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
  keepCase: true,
  longs: String,
  enums: String,
  arrays: true
});

const BooksService = grpc.loadPackageDefinition(packageDefinition).BooksService;

const client = new BooksService (
  "localhost:30043",
  grpc.credentials.createInsecure()
);

Now create a new instance of the ClientWrapper, passing in the client, service, and name of the text file you want to log requests to. Export the new instance of your ClientWrapper, rather than the gRPC client object.


const HorusClientWrapper = require('@horustracer/ClientWrapper');
const grpc = require("grpc");
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const PROTO_PATH = path.join(__dirname, "../protos/books.proto");

const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
  keepCase: true,
  longs: String,
  enums: String,
  arrays: true
});

const BooksService = grpc.loadPackageDefinition(packageDefinition).BooksService;

const client = new BooksService (
  "localhost:30043",
  grpc.credentials.createInsecure()
);

//process.env.HORUS_DB utilizes environment variables. You can replace it with your MongoDB URI.
//process.env.SLACK_URL utilizes environment variables. You can replace it with your SLACK URL.
const ClientWrapper = new HorusClientWrapper(client, BooksService, 'books.txt', 'main', `${process.env.HORUS_DB}`, `${process.env.SLACK_URL}`);

module.exports = ClientWrapper;

Now any file that imports your stub will actually be importing a wrapped version of that stub . This allows you to easily integrate Horus into your existing codebase. After you create your stub file, move on to part 2!

2. Setting up the ServerWrapper

Install the ServerWrapper by running npm install @horustracer/ServerWrapper. Then "require" the ServerWrapper into your server file.

// run "npm install @horustracer/ServerWrapper" in your terminal 
const HorusServerWrapper = require('@horustracer/ServerWrapper);

Now "require" in the grpc and @grpc/proto-loader, and path modules. Make sure to also include your proto file and any controllers you might need.


const HorusServerWrapper = require('@horustracer/ServerWrapper);
const grpc = require('grpc');
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const controller = require("./booksController.js");
const PROTO_PATH = path.join(__dirname, '../protos/books.proto');

Next, create your package definition, proto, and new server instance.


const HorusServerWrapper = require('@horustracer/ServerWrapper);
const grpc = require('grpc');
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const controller = require("./booksController.js");
const PROTO_PATH = path.join(__dirname, '../protos/books.proto');

const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
  keepCase: true,
  longs: String,
  enums: String,
  arrays: true,
});

const booksProto = grpc.loadPackageDefinition(packageDefinition);

const server = new grpc.Server();

In plain gRPC-Node.js applications, you define your server methods with the server.addService method like below.


const HorusServerWrapper = require('@horustracer/ServerWrapper);
const grpc = require('grpc');
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const controller = require("./booksController.js");
const PROTO_PATH = path.join(__dirname, '../protos/books.proto');

const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
  keepCase: true,
  longs: String,
  enums: String,
  arrays: true,
});

const booksProto = grpc.loadPackageDefinition(packageDefinition);

const server = new grpc.Server();

server.addService(booksProto.BooksService.service, {
  CreateBook: async (call, callback) => {
    const book = call.request;

    let result = await controller.CreateBook(book);

    callback(null, result);
})

In order to wrap your server methods, Horus instead uses the ServerWrapper object (see the example below). A new instance of the ServerWrapper is created, passing in the plain gRPC server object, service, and methods.


const HorusServerWrapper = require('@horustracer/ServerWrapper);
const grpc = require('grpc');
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const controller = require("./booksController.js");
const PROTO_PATH = path.join(__dirname, '../protos/books.proto');

const ServerWrapper = new HorusServerWrapper(server, booksProto.BooksService.service, {
  CreateBook: async (call, callback) => {
    const book = call.request;

    let result = await controller.CreateBook(book);

    callback(null, result);
})

After you create a new instance of the ServerWrapper, continue as you normally would with gRPC-Node.js by invoking the server bind and server start methods.


const HorusServerWrapper = require('@horustracer/ServerWrapper);
const grpc = require('grpc');
const protoLoader = require("@grpc/proto-loader");
const path = require('path');
const controller = require("./booksController.js");
const PROTO_PATH = path.join(__dirname, '../protos/books.proto');

const ServerWrapper = new HorusServerWrapper(server, booksProto.BooksService.service, {
  CreateBook: async (call, callback) => {
    const book = call.request;

    let result = await controller.CreateBook(book);

    callback(null, result);
})

server.bind("127.0.0.1:30043", grpc.ServerCredentials.createInsecure());
server.start();

Now that your server file is complete, you can move on to part three!

3. Intraservice Requests

Horus supports applications built with monolithic or microservice architectures. One of its best features is its ability to track requests between two or more microservices (aka intraservice requests).

*** If your application is monolithic or doesn't make any intraservice requests, then you're all done and can skip this part! ***

This is an example of what an intraservice request might look like (down below). Here, the customers service receives a request from a client. To fulfill that request, it makes an intraservice request to the books service. Once that intraservice request returns, the customers server then sends its response to the original client.


const HorusServerWrapper = require('@horustracer/ServerWrapper);
const booksStub = require('../stubs/booksStubs.js)

const ServerWrapper = new HorusServerWrapper(server, customersProto.CustomersService.service, {
  GetCustomer: async (call, callback) => {
    const customerId = call.request;

    const customer = await controller.GetCustomer(customerId);

    const customersFavoriteBookId = {favBookId: customer.favBookId};

    booksStub.GetBookById(customersFavoriteBookId, (error, response) => {

      callback(null, result);
    });
})

To trace an intraservice request like the one above, Horus needs you to invoke a "handshake" function. This function is called "makeHandShakeWithServer" and lives as a method on the ClientWrapper object.

Invoke makeHandShakeWithServer in the callback that runs after your intraservice request completes. As arguments, pass in the ServerWrapper object and the name of the request.


const HorusServerWrapper = require('@horustracer/ServerWrapper);
const booksStub = require('../stubs/booksStubs.js)

const CustomerServerWrapper = new HorusServerWrapper(server, customersProto.CustomersService.service, {
  GetCustomer: async (call, callback) => {
    const customerId = call.request;

    const customer = await controller.GetCustomer(customerId);

    const customersFavoriteBookId = {favBookId: customer.favBookId};

    booksStub.GetBookById(customersFavoriteBookId, (error, response) => {

      booksStub.makeHandShakeWithServer(CustomerServerWrapper, 'GetBookById');

      callback(null, result);
    });
})

In this scenario, the booksStub is secretly a Horus Client Wrapper (remember how we changed the modules.export statement in part 1!). Because of this, we invoke makeHandShakeWithServer on the booksStub. Becaues this intraservice request is being fired from the CustomerServerWrapper, we pass in that object from a few lines earlier. Lastly, we pass in "GetBookById" since that's the name of the method making the intraservice request.

What's the point of this handshake function? This function is what allows the ClientWrapper and ServerWrapper objects to communicate. Whenever the ClientWrapper completes a request, it now knows to pass the relevent information on to the ServerWrapper. Here's a conceptual sketch of what the handshake function is acomplishing.


Once you've added in handshake functions for your intraservice requests, you're good to go!


↥Back to top


API Documentation

*At the moment, Horus does not support SQL Databases, and only supports NoSQL Databases (MongoDB specifically).

ClientWrapper: The Horus Client Wrapper is a class. It's constructor takes in five parameters:

  • gRPC client (object)
  • gRPC package (object)
  • output file name (string)
  • service name (string)
  • mongodb URI (string)
  • slack url (string)

The "output file name" parameter is the name of the file you want to output request data to.
The ClientWrapper will create that file in your directory if it does not already exist.
The "service name" and database (MongoDB) url parameters are tracing and visualizing your requests.
"Service name" is the name of the service which is using the stub (i.e the customers service might use the books stub).
Horus currently only supports NoSQL (mongoDB) databases. Pass the connection link to your database in the "mongodb url" parameter. The mongoDB URI is the Database for tracing request data. Do not include your service database.


ServerWrapper: The Horus Server Wrapper is a class. It's constructor takes in three parameters:

  • gRPC server (object)
  • gRPC package (object)
  • methods (object)

The "methods" object is an object containing the defintions of your server methods. If your gRPC service had a GetBooks function, then the definition for GetBooks should be included here.


Visualizer Object:


logAverages

  • mongodb url (string)

Horus supports NoSQL databases (MongoDB). Pass the connection link to the database with your request data in the "mongodb" parameter. (This should be the same database that you provide to the ClientWrapper)


mapAveragesToNeo4j

  • mongodb URI (string) - Not your service's DB, the DB for storing request data.
  • neo4j url (string)
  • username (string)
  • password (string)

Horus supports NoSQL (specifically mongoDB) databases.
Pass the connection link to the database with your request data in the "mongodb" parameter (this should be the same database that you provide to the ClientWrapper).
Pass in the url of your local Neo4j database instance to the "neo4j url" parameter.
Pass in the username and password for that local database instance to the "username" and "password" parameters.


↥Back to top


Monitoring Features and Setup

Get Alerted by Slack

Leave out the uncertainty of whether your application is running normally or abnormally with the integration of receiving slack notifications. When the processing time of any of your routes results in (+/-) two standard deviations from the norm (rolling average), an automated slack message will be notified to your select channel or through direct message to your slack account.

In addtion, all routes processed will have the time taken stored in a non-relational database (e.g. mongoDB) to have a running log of the historic times used in dynically updating the alerting threshold.

Metrics Shown in Notification An alert will be sent out with these key metrics:

  • specific functionality of application that is causing the issue
  • time it took to fulfull the request
  • trailing average time for functionality to complete
  • standard deivation of the processing time for functionality to complete

Sample Message

Quick Setup

  1. Setup Slack Webhook Account
  2. Setup Mongo Database
  3. Create .env file in every service. In this .env file include your Slack webhook url and Mongo database urls (for each service).

Sample .env file:

[INSERT_SERVICE_1_NAME]_DB='[Enter URI String]'
[INSERT_SERVICE_2_NAME]_DB='[Enter URI String]'
[INSERT_SERVICE_3_NAME]_DB='[Enter URI String]'
...
[INSERT_SERVICE_'N'_NAME]_DB='[Enter URI String]'

[INSERT_EXTRA_DB_TO_STORE_TRACING_DATA]_DB = '[ENTER URI STRING]'

SLACK_URL='[Enter Slack Webhooks Link]'

Mock store Application Example .env file:

BOOKS_DB= '[Enter URI String]'
CUSTOMERS_DB= '[Enter URI String]'
EXTRA_DB_FOR_TRACING =  '[Enter URI String]'
SLACK_URL= '[Enter Slack Webhooks link]'

↥Back to top


Setting up Mock-Microservice with Horus

In this setup, you will need to set up 3 MongoDB Databases (1 for Books Service, 1 for Customers Service, 1 for storing tracing data). (Optional) If you want to integrate our monitoring feature, you will need to follow the steps in the above.

The Mock-Microservice app. is a bookstore app. with the following services:

  • Books Service
  • Customers Service

After following each step you will be spinning up our frontend, interact with the frontend to make different gRPC requests (e.g. createBook, getBook, etc.), and see the trace information of those requests in a text file. (You can also set up our monitoring system with slack, as well as integrate Neo4j for visualizing gRPC request traces).


'CreateCustomer' and 'GetCustomer' Methods are run respectively (GetCustomer method performs Intraservice request in order to get the customer's favorite book)


'CreateBook' and 'GetAllBooks' Methods are run respectively


Steps:

  • Create a new directory in your local system.
  • Fork and clone our repository in your newly created directory.
  • Git add remote of our repository, and pull the files from the Horus master branch from the upstream repository (main Horus repository). Check the commands below.
git remote add upstream https://github.com/oslabs-beta/Horus   
git pull upstream master 
  • By now you should have all the files in the Horus upstream master branch pulled down to your directory.
  • Add .env files to each service (check sample above) and in the root directory as well.
*Please don't forget to set up your Mongo Databases for each service (Books, Customers) + an extra database for storing tracing data. 

Also if you want to use the slack integration, follow the steps in the 'Monitoring Features' Section.
  • Go into each service directory and type: 'npm install' to download all the node modules for each service. Also npm install in the root directory. This includes the mockFrontEnd, Customers, and Books services.
  • Go to the root directory and run 'npm run servers' to run all the servers of each service, as well as run the build for webpack. (You can check the "scripts" key in the package.json for all the different scripts that are available). This should concurrently run all your services' servers, and build the webpack.
  • Open up another terminal and run 'npm run start'.
  • Go to localhost:3000, and interact with the frontend!
  • Check out the customers.txt and books.txt file in the root directory for your response information 😄 ! Also your database should also have a history of all the response data as well.

↥Back to top


Setting up Neo4j for Visualizing Request Data

Horus uses Neo4j, a native graph database, to visualize your requests. If you've never worked with Neo4j, downlaod the Neo4j Desktop before you continue. While developing support for Neo4j, we encountered a nasty port collision bug. If the Neo4j Desktop asks you fix the configuration of your ports when starting your database, run the "killall java" to terminate any conflicting processes.

Once you've downloaded the Neo4j Desktop and started your database, download the @horustracer/visualzer package.

const HorusVisualizer = require('@horustracer/visualizer);

The visualizer package is an object with methods. To implemented Horus's Neo4j functionality, invoke the "mapAveragesToNeo4j" method, passing in the url of your mongodb, as well as the url, username, and password for your Neo4j database.

const HorusVisualizer = require('@horustracer/visualizer);
HorusVisualizer.mapAveragesToNeo4j('<your mongoDB url>', '<your neo4jDB url>', '<your neo4jDB username>', '<your neo4j password>')

When invoked, the "mapAveragesToNeo4j" queries your database of requests and computes the average responseTimes for every request. This means you can run the function either as method in its own program, or embed the function with the business logic of another program. Note, the url you pass into the "mapAveragesToNeo4j" function should be the same url you pass to the Client Wrapper.

Here's an Image of how your data should be visualized



↥Back to top


Future Features

  • Support for Client Streaming, Server Streaming, and Bi-Directional Streaming.
  • Provide Support for SQL Databases.
  • Fixing Docker Networking Issues.
  • Creating a Dashboard for tracing data.
  • Providing more extensive monitoring features (Health Checking: CPU usage, RAM usage, etc.)
  • Creating Unit Testing, Mock-Testing, E2E Testing
  • CI/CD Workflow (with TravisCI or CircleCI)

↥Back to top


Contributing

We would love for you to test this application out and submit any issues you encounter. Also, feel free to fork to your own repository and submit PRs.

Here are some of the ways you can start contributing!

  • Bug Fixes.
  • Adding Features (Check Future Features above).
  • Submitting or resolving any GitHub Issues.
  • Help market our platform.

Any way that can spread word or improve Horus will really go a long way for us! We don't bite 😄 !


↥Back to top


License

MIT


↥Back to top


Authors


↥Back to top




More Repositories

1

sapling

Sapling - A convenient way to traverse your React app in VS Code
JavaScript
489
star
2

Kafka-Sprout

🚀 Web GUI for Kafka Cluster Management
Java
429
star
3

GraphQuill

Real-time GraphQL API Exploration in VS Code
TypeScript
395
star
4

protographql

ProtoGraphQL is a prototyping tool that empowers developers to build and visualize GraphQL schemas and queries without writing any code.
JavaScript
360
star
5

seeql

see your database in a new way
TypeScript
344
star
6

Realize

A React component tree visualizer
JavaScript
327
star
7

Allok8

⚡️A pretty swell Kubernetes visualization tool
JavaScript
273
star
8

ReactRTC

NPM package that simplifies set-up of WebRTC as importable React components
JavaScript
270
star
9

svend3r

Interactive plug and play charting library for Svelte
JavaScript
267
star
10

aether

All-in-One Memory Leak Testing Solution
JavaScript
250
star
11

Yodelay

Your preferred gRPC endpoint testing tool. Making sure your outbound 🗣️ ‘yodelay’ returns the ‘IiiOoo’ 📣 that you expect
TypeScript
228
star
12

ReactRPC

Full feature integration library for gRPC-Web into React
JavaScript
224
star
13

atomos

Atomos is an open source dev tool for Recoil that provides real-time visualization of the component tree and atom-selector relationships to facilitate debugging of a React application.
JavaScript
218
star
14

Dockter

A low-overhead, open-source Docker log management tool
TypeScript
217
star
15

svelte-sight

A Svelte dev tool for visualizing component hierarchy, state, and props of your application
Svelte
215
star
16

KUR8

A visual overview of Kubernetes architecture and Prometheus metrics
JavaScript
213
star
17

OpticQL

Developer tool focused on streamlining the performance testing and optimization of GraphQL API
JavaScript
212
star
18

connext-js

A middleware and route handling solution for Next.js.
JavaScript
210
star
19

hypnos

The best way to test GraphQL calls to RESTful APIs.
JavaScript
205
star
20

Equa11y

A stream-lined command line tool for developers to easily run accessibility testing locally through axe-core and puppeteer.
TypeScript
204
star
21

preducks

React/Redux/Typescript Application Prototyping & Smart Boilerplate Generation Tool
TypeScript
199
star
22

drawql

an OSS tool for designing a graphql endpoint in Apollo
CSS
195
star
23

kubermetrics

JavaScript
194
star
24

TotalRecoilJS

TotalRecoilJS is a tool created to help developers visualize/debug and track their Recoil state via a Chrome extension.
JavaScript
193
star
25

PostQL

Web app to visualize your GraphQL metrics and provide historical analytics
TypeScript
186
star
26

Ahoy

Ahoy! is a GUI tool for DevOps engineers which distills the many functions of Helm into a user-friendly interface.
JavaScript
183
star
27

battletest

A CLI module for npm that auto-generates tests based on user specified parameters.
JavaScript
183
star
28

Deno-Redlock

Deno's first lightweight, secure distributed lock manager utilizing the Redlock algorithm
TypeScript
182
star
29

ReactMonitor

Quickly visualize React's component tree and its performance
JavaScript
181
star
30

Osiris

An Electron based desktop application for generating components, building pages, and storing them in a UI library.
JavaScript
177
star
31

protostar-relay

Open-source iteration of the official Relay devtool.
JavaScript
171
star
32

TorchQL

A tool to quickly generate GraphQL schemas and resolvers from a relational database
JavaScript
171
star
33

trydent

testing tamed
TypeScript
170
star
34

genesisQL

rapid schema-prototyping tool for GraphQL applications
JavaScript
169
star
35

FilamentQL

GraphQL query and caching solution
JavaScript
168
star
36

GatsbyHub

Access everything Gatsby has to offer without ever leaving Visual Studio Code. This VSCode Extension allows you to generate a new Gatsby site using a starter, browse Gatsby plugins, and develop a server all with a click of a button.
TypeScript
163
star
37

aditum

Accessibility components for managing focus in React SPAs
JavaScript
162
star
38

watchmo

JavaScript
162
star
39

react-chronoscope

Developer tool to monitor React performance
JavaScript
162
star
40

navigate

A Kubernetes cluster visualizer for DevOps engineers - network policies, aggregated scheduler logs, deployments and pods before your cluster is running!
TypeScript
161
star
41

TrunQ

NPM package for easy client and/or server side graphQL caching.
JavaScript
160
star
42

onyx

Onyx is authentication middleware for Deno, inspired by Passport.js
TypeScript
159
star
43

BACE

JavaScript
159
star
44

MASH

Kafka visualizer and management suite
TypeScript
158
star
45

portara

Portara directive is a rate limiter / throttler for GraphQL
TypeScript
158
star
46

irisql

GraphQL prototyping tool to quickly mock-up Node API's and visualize where you can query from.
JavaScript
158
star
47

Interspect

An API mocking tool for testing data interoperability between microservices and secure HTTP endpoints
JavaScript
157
star
48

SMEE

JavaScript
154
star
49

ChaosQoaLa

Chaos Engineering meets GraphQL
JavaScript
153
star
50

VaaS

Modular Kubernetes Management System with OpenFaaS Support
TypeScript
153
star
51

tropicRPC

A VS Code extension that provides gRPC API endpoint testing.
TypeScript
153
star
52

dashport

Local and OAuth authentication middleware for Deno
TypeScript
151
star
53

anagraphql

JavaScript
151
star
54

Trinity

A VSCode extension for Cypher and Neo4j
TypeScript
150
star
55

DockerLocal

DockerLocal is a GUI application that allows you to keep an up-to-date version of the docker compose file for interconnected repositories while doing development work on a single repository.
TypeScript
150
star
56

giraffeQL

🦒 Developer tool to visualize relational databases and export schemas for GraphQL API's.
JavaScript
147
star
57

ProtoCAD

ProtoCAD is a prototyping tool that allows developers to build UI component tree structure based on GraphQL query results.
TypeScript
146
star
58

Trace

A lightweight GraphQL query performance monitoring GUI with real-time, resolver-level performance tracing metrics and error logging.
TypeScript
146
star
59

StratosDB

☄️ ☁️ An All-in-One GUI for Cloud SQL that can help users design and test their AWS RDS Instances
TypeScript
145
star
60

snAppy

snAppy is a VS Code extension coupled with an interactive view to support your React front-end delivery.
TypeScript
144
star
61

synapse

Realtime API Library
TypeScript
144
star
62

SpectiQL

GraphQL query, mutation, subscription test generator
JavaScript
143
star
63

starfleet

Command line tool to generate GraphQL services from Mongoose schemas with full CRUD functionality and deploy them to the cloud
JavaScript
143
star
64

pelican

Automated GUI canary testing for your kubernetes clusters
JavaScript
140
star
65

ProtoNative

A React Native prototyping tool for developers.
TypeScript
140
star
66

reactFLO

A Chrome DevTool built for developers to visualize the flow of state throughout their application.
TypeScript
140
star
67

ReactionTime

ReactionTime provides a simpler way to write tests for React's Experimental Concurrent Mode.
TypeScript
140
star
68

DacheQL

GraphQL caching tool
JavaScript
139
star
69

KuberOptic

An Electron app for developers to visualize their Kubernetes clusters in real-time
TypeScript
137
star
70

sono.land

Real-time Communication Library for Deno (WebSockets & WebRTC)
TypeScript
137
star
71

KubeScrape

KubeScrape: An open-source dev tool that provides an intuitive way to view the health, structure, and live metrics of your Kubernetes cluster
JavaScript
136
star
72

LucidQL

A developer tool and visualizer that generates a GraphQL schema from an established relational database.
JavaScript
135
star
73

Hookd

A cli tool and visualizer for converting React class components to functional components with hooks.
TypeScript
135
star
74

kr8s

Docker/Kubernetes Visualization Tool
JavaScript
133
star
75

Svelcro

Svelte DevTool with a focus on rendering
JavaScript
133
star
76

KnightOwl

An npm package of GraphQL middleware to protect you from malicious queries.
JavaScript
133
star
77

Palaemon

Palaemon is an open-source developer tool for monitoring health and resource metrics of Kubernetes clusters and analyzing Out of Memory (OOMKill) errors
TypeScript
133
star
78

SvelTable

Feature rich data table component.
Svelte
132
star
79

Ekkremis

A periscopic view into pending Kubernetes pods
TypeScript
132
star
80

kQ

TypeScript
131
star
81

fflow

fflow is an easy-to-use open-source tool for all developers to create their React application.
JavaScript
127
star
82

KlusterView

Get instant insights on your Kubernetes clusters with our lightweight, plug-and-play performance monitoring tool
TypeScript
125
star
83

Aqls-server

An intelligent full-stack GraphQL subscription and analytics module. Server-side analytics processing, self-auditing router, and resolver plugins.
JavaScript
123
star
84

kondo

JavaScript
123
star
85

periqles

React form library for Relay and Apollo
JavaScript
120
star
86

ThermaKube

A web application that monitors the health and performance of Kubernetes clusters with support for AWS EKS deployments
JavaScript
120
star
87

arteMetrics

Creating performance monitors for Apollo implementations of graphQL.
JavaScript
118
star
88

QLens

QLens is an electron app which dynamically generates GraphQL Schemas and Mongo Schema visualization. QLens significantly cuts development time by automating the formation of their GraphQL schemas based on information fetched from their non-relational database.
JavaScript
118
star
89

firecomm

A complete framework for gRPC-node.
JavaScript
117
star
90

Kafkasocks

JavaScript
114
star
91

ReaPer

Dev tool to analyze the performance of user interface and single-page applications based on the React frontend library
JavaScript
114
star
92

dangoDB

A MongoDB ODM for Deno
TypeScript
111
star
93

AtomicKafka

JavaScript
110
star
94

Bedrock

A modular authentication library for Deno.
TypeScript
110
star
95

Docklight

Metrics for your Docker containers
TypeScript
109
star
96

Neptune

A light-weight, simple, and straightforward learning tool for your Kubernetes cluster
JavaScript
109
star
97

ArtemisQL

ArtemisQL is a GraphQL migration tool and database visualizer that empowers developers to build and implement GraphQL with ease.
TypeScript
108
star
98

shipm8

JavaScript
108
star
99

ReacTree

ReacTree - VS Code extension that generates a hierarchy tree of React components with each node listing the passed down props, indicating whether it's connected the Redux store, and guiding you to the associated file with the click of a button
TypeScript
107
star
100

reactron

Reactron is a React component visualizer that allows you to traverse an app's fiber tree and render components individually.
JavaScript
105
star