OpenTelemetry Log Viewer for VS Code

A simple, interactive VS Code extension for exploring OpenTelemetry logs using a smart, filterable data grid.

Since there is no solution to view those logs offline?! Here is a simple viewer extension for VS Code:

✨ Features

• 📊 Displays structured JSON logs in a dynamic AG Grid table
• 🔍 Sort, filter, and search across all columns
• 🚀 One-click toolbar button "OpenTelemetry Viewer" to open the viewer (present when viewing .log or .jsonl files)
• 🧠 Validates file content before rendering the grid
• 🔐 Safe Content Security Policy (CSP) with inline script and style support

📦 Installation

Install from the Visual Studio Code Marketplace or search for "OpenTelemetry Log Viewer" in the Extensions sidebar in VS Code.

🪵 Usage

1. Open any .log or .jsonl file that contains OpenTelemetry logs in JSON Lines format.
2. Click the "OpenTelemetry Viewer" button in the editor toolbar (top-right).
3. You can also run the command OpenTelemetry Viewer from the command palette (Ctrl+Shift+P).
4. View your logs in a rich, sortable grid!

Log entries must be one JSON object per line (JSONL).

📁 File Types

This extension automatically activates and shows the OpenTelemetry Viewer button when working with:

• .log
• .jsonl

🛠 Development

Commands

npm run build          # Builds the extension and webview

Folder Structure

src/
├── extension.ts        # VS Code backend logic
└── webview/            # React-based frontend for the log viewer
    ├── App.tsx
    └── main.tsx

⚙️ Automatic Versioning

This project features automatic versioning and deployment. More on this can be found here: TobiStr/branching-and-versioning

🛡 License & Notice

• Apache 2.0 License
• NOTICE

🙌 Credits

• Powered by AG Grid for flexible data rendering
• Inspired by the need to finally view these log files offline.

Contributions welcome! Please fork and enhance — and credit the original project.