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
- Open any
.log or .jsonl file that contains OpenTelemetry logs in JSON Lines format.
- Click the "OpenTelemetry Viewer" button in the editor toolbar (top-right).
- You can also run the command
OpenTelemetry Viewer from the command palette (Ctrl+Shift+P ).
- 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:
🛠 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
🙌 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.
| |