/FULLSTACKMONITOR

Primary LanguageJavaScript

About

Fullstack-monitor is log monitoring tools for developers, offering visibility of console logs, requests and responses from both the Client and Server side of your application in one single place.

This makes it easy to see what is happening across the stack as your front and back-end communicate.

In order to use this, you must also install the Fullstack-Monitor-CLI npm package.

Instructions

Installation

npm install fullstack-monitor

Front-end Setup

  1. Import fullstack-monitor in front-end, usually in index.js.
  import FL from 'fullstack-monitor'
  1. Invoke the FL.setup function with the string client argument.
  FL.setup('client');
  • Please note, any code executed before the setup function is invoked will not be monitored.

Back-end Setup

  1. Import fullstack- monitor in back-end, usually in server.js or index.js, with the server argument.
  const fl = require('fullstack-monitor');
  fl.setup('server');
  1. Pass the fl.run into app.use as a middleware function, where app refers to const app = express();.
  app.use(fl.run);

Run

Run your application with

  npm run dev
  • Or the equivalent command in your setup.

User-Interface

  1. Globally install Fullstack-Monitor-CLI
$ npm install -g fullstack-monitor-cli
  1. Bootup the Fullstack-Monitor-CLI server.
$ fullstack-monitor-cli --start
  1. Go to localhost:3861 or the port configured to see the user interface of fullstack-monitor. Or just use the --chrome command:
$ fullstack-monitor-cli --chrome
  1. In Home Page, all logs types are logs are shown, currently there are four diffrent types of logs.
    • Console.log coming from the client side - as Type : Client
    • Console.log coming from the server side - as Type : Server
    • Request coming from the client side - as Type : Request
    • Repond going out from server side - as Type : Server

Alt text

  1. For each Type, users can navigate through the Top Menu bar.
  2. There's Custom Tab in Top Menu Bar where user can select only the Type they want to see.

Alt text

  1. By clicking on the each indiviaul line of data, detailed information of each log can be seen.

Alt text

  1. With the Delete Button, users can delele all existing logs.

Example Project

For an example of Fullstack-Monitor installed on a project see this GitHub Repo here:

Contributors