Loghead LogoLoghead
~/guides

Ingesting Browser Logs with Loghead Cloud

A step-by-step guide to capturing and streaming browser logs directly to the Loghead Cloud UI using the Loghead Collector extension.

# Step-by-Step Setup

Install the Loghead Collector Extension

Go to the [Chrome Web Store](https://chromewebstore.google.com/detail/loghead-collector/hkbdmjhpeafcmpbgpiojkpapdglfdjci) and add the 'Loghead Collector' extension to your browser.

Loghead Collector extension on the Chrome Web Store

Loghead Collector extension on the Chrome Web Store

Create a Browser Stream

In your Loghead Cloud dashboard, navigate to your project and create a new stream. Select 'Browser' as the stream type.

Creating a new browser stream in the Loghead Cloud dashboard

Creating a new browser stream in the Loghead Cloud dashboard

Connect the Extension to Loghead Cloud

Click on the Loghead Collector extension in your browser. Paste 'https://www.loghead.dev' into the SERVER URL field and click Next.

Pasting the server URL in the Loghead Collector extension

Pasting the server URL in the Loghead Collector extension

Select Your Project and Stream

The extension will fetch your available projects. Select the project you are working on, and then select the browser stream you just created.

Selecting the project and browser stream in the extension

Selecting the project and browser stream in the extension

Start Ingesting Logs

Click 'Connect' to establish the connection. Once connected, reload your web page. The Loghead Collector will automatically start capturing and streaming browser console logs to Loghead Cloud.

Loghead Collector successfully connected and streaming logs

Loghead Collector successfully connected and streaming logs

Seamless Browser Console Logging in Loghead Cloud

Streaming browser logs to Loghead Cloud provides real-time observability for your frontend applications, allowing you to capture console errors, warnings, and informational logs directly from your users' browsers or your own testing environments.

Why Ingest Browser Logs?

When debugging frontend issues, reproducing console errors across different environments can be challenging. By using the Loghead Collector extension to pipe browser console output directly to Loghead Cloud, you gain:

  • Centralized storage for all your frontend console logs without modifying your app's codebase.
  • Powerful search to quickly identify JavaScript errors, failed network requests, or warnings.
  • Easy debugging across local development, staging, and production environments.

Getting Started via the UI

By following the solution steps above, you can securely stream any browser console output directly into your cloud dashboard. After successfully sending your first browser logs by reloading the page, try exploring the Search and Analytics tabs in the Loghead Cloud UI to filter your frontend logs by severity, timestamp, and specific keywords.

Ready to modernize
your logging workflow?

Get Loghead Free

# Other Integrations

AWS CloudWatch Integration

Piping AWS CloudWatch logs to Loghead for a centralized AI-powered logging experience.

Loghead in the Browser

Stream your browser's console logs and network activity to your AI assistant.