HAR Viewer - Client-Side Network Analysis Tool

A 100% client-side web application for securely loading, parsing, and visualizing HTTP Archive (HAR) files for network debugging.

Features

• 🔒 100% Client-Side Processing - Your sensitive HAR data never leaves your browser
• 📁 Drag & Drop Upload - Easy file loading with visual dropzone
• 📊 Request Statistics - View total requests, transferred size, load times, and more
• 🔍 Advanced Filtering - Filter by resource type, URL search, and error status
• ⏱️ Waterfall Chart - Color-coded timeline visualization of request phases
• 📝 Detailed Request View - Inspect headers, response, timings, query params, and POST data
• 🎨 JSON Formatting - Auto-formatted, collapsible JSON response viewer
• 🔎 Raw HAR Inspector - Browse the complete HAR structure

Getting Started

How to Get a HAR File

Chrome/Edge:

1. Open DevTools (F12 or Cmd+Option+I)
2. Go to the Network tab
3. Perform the actions you want to record
4. Right-click in the Network tab → "Save all as HAR with content"

Firefox:

1. Open DevTools (F12 or Cmd+Option+I)
2. Go to the Network tab
3. Click the gear icon → "Save All As HAR"

Safari:

1. Enable Developer menu (Preferences → Advanced → Show Develop menu)
2. Open Web Inspector (Cmd+Option+I)
3. Go to Network tab
4. Click Export button

Using the Viewer

1. Open the HAR Viewer application
2. Drag and drop your .har file onto the dropzone (or click to browse)
3. The file will be parsed and displayed immediately
4. Use filters to narrow down requests
5. Click any request to view detailed information
6. Use the tabs to explore headers, response, timings, etc.

Privacy & Security

⚠️ IMPORTANT: HAR files contain sensitive information including:

• Cookies and session tokens
• Authentication credentials
• API keys
• Personal information (PII)
• Request/response payloads

This tool is designed with privacy in mind:

• ✅ All processing happens in your browser
• ✅ No server upload or transmission
• ✅ No data storage or tracking
• ✅ Web Worker for non-blocking parsing

Never share HAR files publicly or with untrusted parties.

Technology Stack

• React 19 with TypeScript
• Zustand for state management
• react-dropzone for file handling
• @uiw/react-json-view for JSON visualization
• shadcn/ui for UI components
• Tailwind CSS for styling
• Vite for build tooling

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run tests
npm run test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

# Run linter
npm run lint

Testing

This project maintains 90%+ code coverage with comprehensive unit and integration tests.

Test Structure

• Unit Tests - Test individual utilities, components, and store logic

  • src/utils/__tests__/ - Filter, statistics, and timing utilities
  • src/components/__tests__/ - Component rendering and interactions
  • src/store/__tests__/ - State management logic
  • src/pages/__tests__/ - Page components

• Integration Tests - Test complete workflows

  • src/__tests__/integration.test.ts - End-to-end user flows

Running Tests

# Run all tests once
npm run test

# Run tests in watch mode (auto-rerun on changes)
npm run test:watch

# Generate coverage report (HTML report in ./coverage)
npm run test:coverage

Coverage Thresholds

The project enforces minimum coverage thresholds:

• Lines: 90%
• Functions: 90%
• Branches: 90%
• Statements: 90%

CI/CD Pipeline

This project uses GitHub Actions for continuous integration and deployment:

Workflow Stages

1. Build & Test (runs on all pushes and PRs)

   • Install dependencies
   • Run ESLint
   • Run test suite with coverage
   • Upload coverage reports to Codecov
   • Build production bundle
   • Upload build artifacts

2. Deploy (runs only on main branch)

   • Download build artifacts
   • Configure GitHub Pages
   • Deploy to GitHub Pages

Setup GitHub Pages

To enable automatic deployment:

1. Go to repository Settings → Pages
2. Set Source to "GitHub Actions"
3. Push to main branch to trigger deployment

The site will be available at: https://[username].github.io/[repo-name]/

Architecture

State Management

• Zustand store manages global state (HAR data, filters, selection)
• Web Worker handles HAR file parsing off the main thread
• Computed filters efficiently update the request list

Key Components

• FileUploadDropzone - File upload interface with security warning
• HarViewerPage - Main viewer layout
• RequestListTable - Filterable request table with waterfall
• DetailPane - Tabbed detail view for selected requests
• FilterControls - Resource type, search, and error filters

Utilities

• filterUtils.ts - Request filtering logic
• statisticsUtils.ts - Summary statistics calculation
• timingUtils.ts - Waterfall timing computations (handles SSL/connect overlap)
• har-parser.worker.ts - Web Worker for async parsing

HAR Specification

This viewer implements the HAR 1.2 specification with full support for:

• Log metadata (creator, browser, pages)
• Request/response entries
• Timing phases (blocked, DNS, connect, SSL, send, wait, receive)
• Headers, cookies, query strings
• POST data and parameters
• Content and MIME types

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

Requires modern browser with ES2020+ support and Web Workers.

License

MIT License - see LICENSE file for details

Contributing

Contributions and improvements are welcome!