Skip to content

JSON Log Viewer is a development tool for working with structured JSON logging.

License

Notifications You must be signed in to change notification settings

allproxy/json-log-viewer

Repository files navigation

json-log-viewer

JSON Log Viewer is a web UI tool that makes JSON logs human readable.

Alt text

image image image

JSON Log Viewer Online

Features

  1. Online web application served by GitHub Pages.
  2. Displays easy to read compact list of log entries.
  3. Expands to show the full prettified JSON.
  4. Fields are customizable.
  5. Filtering and highlighted search matches.
  6. Log levels are colorized.
  7. Display human readable or UTC timestamps.
  8. Supports JSON lines and JSON file formats.

Run Locally

  1. Clone repo.
  2. npm install
  3. npm start # Opens tab in your default browser
  4. Click ? in upper right for help.

Updating

The JSON Log Viewer uses the allproxy package.

To update the allproxy npm package run:

npm update

NOTE*: It is recommended that Use hardware acceleration when available is disabled on Chrome.

Filtering

Advanced JSON field and boolean filters can be used to find relevant log records.

Example filters:

  • Filter response:>=400 shows responses with status greater than or equal to 400
  • Filter response:403 shows 403 responses
  • Filter agent:wget shows wget clients
  • Filter bytes:>1000 shows responses that are greater than 1000 bytes
  • Filter remote_ip:* can be used to sort remote IP addresses in ascending order
  • Filter -request:GET shows non-GET requests

Filter response:>=400 shows responses with status Alt text

Filter response:403 shows 403 responses Alt text

Filter agent:wget shows wget clients Alt text

Filter bytes:>1000 shows responses that are greater Alt text

Filter remote_ip:* can be used to sort remote IP addresses in ascending order Alt text

Filter -request:GET shows non-GET requests Alt text

Documentation

User documentation is integrated into the app. Click ? in upper right corner. Alt text

Development Notes

Updating Version

To update the Log Viewer version to the latest:

  1. npm update # this update the allproxy package
  2. ./copyBuildFromAllProxy.sh
  3. Create branch matching the allproxy version.

The docs/index.html needs to be modified so the GitHub Pages app will render properly:

  1. These lines must be added to the start of the

    tag:

        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
  2. Remove '/' from href and src properties.

Updating Configuration

  1. Modify any of these config files:
    • jsonQueries.json
    • queries
    • briefJsonFields.json
    • jsonFields
    • jsonSubQueries.json
    • jsonLogScript
  2. Run node createApFileSystemJson.js to build a new docs apFileSystem.json file.

License

This code is licensed under the MIT License.

image