How Hubble Transforms Front‑End Debugging with Full‑Page Session Recording

1. Introduction

Hubble has been released for some time, undergoing several revisions and feature additions. Based on practical experience, this article offers a full analysis of Hubble, including its architecture diagram, feature overview, technical details, identified issues with solutions, and roadmap.

2. Architecture Design

Hubble consists of three components: SDK (collector), FE (playback), and Node (server).

In a page that needs recording, the collector is injected and starts capturing. After processing, event sequence data is uploaded to COS using temporary upload permissions, while other data is sent via HTTP to the server for storage.

Requests to public services pass through a forwarding layer to the Node side. Because Hubble can record intermittent bugs, SDK and FE requests can be whitelisted without authentication.

The forwarding layer provides LDAP validation, allowing internal services to rely on it for authentication, and supports IP filtering and token verification to establish trusted requests between services.

COS and CDN services are placed behind the forwarding layer. Internal services obtain a token to access a specific COS directory; sub‑directory permissions are granted through trusted requests to a common COS/CDN service.

Deployment

Hubble can be introduced via an npm package or by directly adding a script tag.

<code>import "hubble";
// or
<script src="/path/to/hubble.js"></script></code>

3. Main Features and Usage

Hubble records page operations and changes, replaying them like a video. It captures the page URL, cookies, storage, token, network requests, and uncaught errors, offering login‑free viewing and long‑record trimming.

During recording, clicking the record button pauses capture and shows a preview dialog.

Long recordings can be trimmed by dragging two sliders to define a focus interval, enabling quick playback of the relevant segment.

Submitting sends the recording to Hubble’s server with a confirmation dialog.

Re‑recording clears existing data and starts anew. The "..." button opens a dialog showing local submission history.

In the playback page, the detail button reveals UA information and other metadata.

Clicking the URL shows a tooltip with a login‑free view option, allowing developers to bypass shared accounts and directly access the target page.

If a trim interval is set, the player plays only that segment. The interface table below the player displays API calls captured at the current playback position.

Clicking "View APM Details" redirects to the Weimob APM system for detailed request information.

The timeline can jump to the exact request time, and an error table lists uncaught errors, viewable via a JSON viewer.

Overall, Hubble reduces communication overhead between testers and developers by providing visual bug reproduction and fast issue localization.

4. Feature Analysis

1. APM Integration

A custom rrweb plugin overrides native XHR and fetch APIs to record request headers, specifically the APM trace ID, enabling direct navigation to the APM system during playback.

2. Login‑Free Debugging

The login‑free feature extracts the SaaS auth token from cookies. When enabled, Hubble appends a special query parameter to the URL, writes the token into cookies, and redirects to the original page, bypassing the login step.

3. Trim Function

Trim works by normalizing events outside the selected interval and compressing them into a short playback segment, effectively simulating a cut.

4. Uncaught Error Collection

Listeners on window.onerror, unhandledrejection, and error events capture errors, inserting them as custom events into the rrweb record for later inspection.

5. Encountered Issues

1. Style Leakage

To prevent CSS pollution, a postcss plugin scopes all selectors by prefixing them with the package name and handles :root variables to avoid global leaks.

2. Bundle Loading Optimization

Switching from IIFE to SystemJS format improves initial load speed and enables lazy loading of UI components, allowing dynamic feature loading and future plugin support.

6. Planned Future Features

1. Open Integration Capability

Using SystemJS dynamic script loading, Hubble will expose APIs for custom plugins and static data collection.

2. Doodle Commenting

A canvas‑based annotation system will allow users to mark recordings with comments, supporting layers for complex annotations.

7. Further Reading

Hubble is built around the rrweb DOM recording framework, which uses MutationObserver to capture DOM changes and user interactions, serializes them into JSON, and replays them in an iframe sandbox.

rrweb records events such as full snapshots, incremental snapshots, metadata, custom events, and plugin events, handling playback timing with requestAnimationFrame for high precision.

8. Conclusion

By recording sessions instead of screenshots or textual descriptions, Hubble captures both UI interactions and network data, significantly reducing communication costs and accelerating bug localization for front‑end development.