Product
Search Results

Developer Guide

Packet Viewer for React

Packet Viewer is a library of React components that can be imported into your application to provide network capture file analysis capabilities. The library requires react > 16.14.0 and can be installed via the package manager of your choice.

The library is written in Typescript, and all types are exported for reference.

Usage

Copy the downloaded .tgz file and move into your repository. Install the library with npm:

npm i ./qacafe-pv-react-<VERSION>.tgz

Import the PacketViewer component into your React app, along with the required CSS stylesheet.

Make sure to update the endpoint prop to point at your company’s API service docker.

import { PacketViewer } from "@qacafe/pv-react";
import "@qacafe/pv-react/dist/main.css";

function MyPacketComponent(props: { pcap: string }) {
  return (
    <div>
      <PacketViewer
        file={props.pcap}
        endpoint="https://pv-sample-api.cloudshark.io/api"
      />
    </div>
  );
}

Available Props


export interface IPacketViewerProps {
  /** A file name or URI to load PCAP data from on the API server */
  file: string
  /** The name of the profile to open the PCAP file with */
  profile?: string
  /** The URI endpoint of the API service */
  endpoint?: string
  /** A display filter to populate when opening the file */
  filter?: string
  /** Additional CSS class names to apply to the top-level component wrapper */
  className?: string

  /** A fallback component to display if a rendering error causes PacketViewer
   * to be removed from the DOM. The component should accept `FallbackProps`.
   */
  errorFallback?: ComponentType<FallbackProps>

  /** Callback function when there is an error */
  onError?: (error: Error, info: ErrorInfo) => void

  /** A callback function to modify HTTP request headers and parameters
   * prior to sending API calls.
   */
  requestInterceptor?: RequestInterceptor

  /**
   * The Comment Manager provides an interface for reading/writing and
   * modifying packet comments.
   * It can be set to `'none'`, `'session'`, or provide your own `CommentManager`
   * for custom controls.
   */
  commentManager?: CommentManagerOption

  /** A callback function to receive details on errors related
   * to failed API requests.
   */
  onApiError?: (error: ApiError) => void
}