Browser - HyperDX Docs
The HyperDX browser SDK allows you to instrument your frontend application to send events to HyperDX. This allows you to view network requests and exceptions alongside backend events in a single timeline.
Additionally, it'll automatically capture and correlate session replay data, so you can visually step through and debug what a user was seeing while using your application.
This Guide Integrates: Console Logs · Session Replays · XHR/Fetch/Websocket Requests · Exceptions
Getting Started Permalink for this section
Options Permalink for this section
apiKey- Your HyperDX Ingestion API Key.service- The service name events will show up as in HyperDX.tracePropagationTargets- A list of regex patterns to match against HTTP requests to link frontend and backend traces, it will add an additionaltraceparentheader to all requests matching any of the patterns. This should be set to your backend API domain (ex.api.yoursite.com).consoleCapture- (Optional) Capture all console logs (defaultfalse).advancedNetworkCapture- (Optional) Capture full request/response headers and bodies (default false).url- (Optional) The OpenTelemetry collector URL, only needed for self-hosted instances.maskAllInputs- (Optional) Whether to mask all input fields in session replay (defaultfalse).maskAllText- (Optional) Whether to mask all text in session replay (defaultfalse).disableIntercom- (Optional) Whether to disable Intercom integration (defaultfalse)disableReplay- (Optional) Whether to disable session replay (defaultfalse)
Additional Configuration Permalink for this section
Upload Source Maps Permalink for this section
Uploading source maps to HyperDX allows you to see the original source code
and stack trace for errors that occur in your minified or transpiled code. To upload
source maps, you'll need to set up the HyperDX CLI and run the upload-sourcemaps
command after your build step.
View the full guide on uploading source maps.
Attach User Information or Metadata Permalink for this section
Attaching user information will allow you to search/filter sessions and events in HyperDX. This can be called at any point during the client session. The current client session and all events sent after the call will be associated with the user information.
userEmail, userName, and teamName will populate the sessions UI with the
corresponding values, but can be omitted. Any other additional values can be
specified and used to search for events.
Auto Capture React Error Boundary Errors Permalink for this section
If you're using React, you can automatically capture errors that occur within
React error boundaries by passing your error boundary component
into the attachToReactErrorBoundary function.
Send Custom Actions Permalink for this section
To explicitly track a specific application event (ex. sign up, submission,
etc.), you can call the addAction function with an event name and optional
event metadata.
Example:
Enable Network Capture Dynamically Permalink for this section
To enable or disable network capture dynamically, simply invoke the
enableAdvancedNetworkCapture or disableAdvancedNetworkCapture function as
needed.
Enable Resource Timing for CORS Requests Permalink for this section
If your frontend application makes API requests to a different domain, you can
optionally enable the Timing-Allow-Origin header (opens in a new tab)
to be sent with the request. This will allow HyperDX to capture fine-grained
resource timing information for the request such as DNS lookup, response
download, etc. via
PerformanceResourceTiming (opens in a new tab).
If you're using express with cors packages, you can use the following
snippet to enable the header: