Component Props

The Packet Viewer library has all of the following types (and more) exported for IDEs and code linters to take advantage of.

Every view accepts the following options (props):

Required

• file: string
  • A file name or URI to for the API server to fetch and provide data for.

Optional

• profile?: string

  • The name of an analysis profile to open the PCAP file with.

• endpoint?: string

  • The URI endpoint of the API service. It defaults to /api if one is not provided

• filter?: string

  • A starting display filter to populate when opening the file.

• packet?: number

  • The initial packet number to display.

• selectFirstOnLoad?: boolean

  • If true, the first displayed packet will be automatically selected whenever the packet list is loaded or refreshed (e.g., when the filter changes). (Recommended)

• className?: string

  • Additional CSS class names to apply to the top-level component wrapper.

• style?: CSSProperties

  • CSS styles applied to the wrapper class.

• errorFallback?: ComponentType<FallbackProps>

  • A fallback component to display if a rendering error causes PacketViewer to be removed from the DOM. The component should accept FallbackProps. This uses the popular react-error-boundary library.

• onError?: (error: Error, info: ErrorInfo) => void

  • Callback function invoked when there is an error.

• requestInterceptor?: RequestInterceptor

  • A callback function to modify HTTP request headers and parameters prior to sending API calls.

• withCredentials?: boolean

  • If true, Cookie and Authorization headers will be passed through to API requests. This requires a valid CORS configuration on your application proxy.

• onApiError?: (error: ApiError) => void

  • A callback function to receive details on errors related to failed API requests.

• commentManager?: CommentManagerOption

  • Provides an interface for reading/writing and modifying packet comments. Can be set to 'none', 'session', or a custom CommentManager for custom controls.

Additional Types

RequestInterceptor

The RequestInterceptor provides the ability to insert a function before any API request is sent out to the server. This allows the integrator to modify any parameters or HTTP Headers for the request before it is sent.

type RequestInterceptor = (request: {
  headers: Headers;
  params: URLSearchParams;
}) => {
  headers: Headers;
  params: URLSearchParams;
};

CommentManagerOption

Can be one of the following:

• 'none'
• 'session'
• 'file'
• CommentManager

Please refer to the Working with Comments page for more information about comments.

Usage Example

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

function App() {
  return (
    <PacketViewer
      file="example.pcap"
      profile="default"
      filter="tcp"
      selectFirstOnLoad={true}
      commentManager="session"
      onError={(error, info) =>
        console.error("PacketViewer error:", error, info)
      }
    />
  );
}

This example creates a PacketViewer component that loads example.pcap using the default profile, applies a tcp filter, automatically selects the first packet on load, uses session-based comment management, and logs any errors to the console.