Skip to Content
AdvancedDevTools

DevTools

Connectivity DevTools is a debugging panel that visualizes connectivity state and the job queue, and lets you manually control retry, cancel, and flush.

Demo

In the demo below, switch to offline and run actions to see jobs queuing up in the DevTools panel (bottom-right). You can manually control them with Retry, Cancel, and Flush All buttons.

Live
Offline

Toggle network to see toast notifications

import { useConnectivity } from "@connectivity-js/react"
import { toast } from "sonner"

function NetworkStatus() {
  const { status } = useConnectivity()

  useEffect(() => {
    if (status === "offline") {
      toast.error("You are offline")
    } else if (status === "online") {
      toast.success("Back online!")
    }
  }, [status])

  return <div>Status: {status}</div>
}

React Usage

Install @connectivity-js/react-devtools and add <ConnectivityDevTools /> to your app:

pnpm add @connectivity-js/react-devtools
import {
  ConnectivityProvider,
  browserOnlineDetector,
} from "@connectivity-js/react";
import { getConnectivityClient } from "@connectivity-js/core";
import { ConnectivityDevTools } from "@connectivity-js/react-devtools";
 
function App() {
  return (
    <ConnectivityProvider detectors={[browserOnlineDetector()]}>
      <YourApp />
      <ConnectivityDevTools client={getConnectivityClient()} />
    </ConnectivityProvider>
  );
}

Props

PropTypeDefaultDescription
clientConnectivityClient—ConnectivityClient instance (required)
position'bottom-left' | 'bottom-right''bottom-right'Panel position
initialOpenbooleantrueWhether panel is open initially
enabledbooleantrueWhether to show the panel

Vanilla JS Usage

Use @connectivity-js/devtools without React:

pnpm add @connectivity-js/core @connectivity-js/devtools
import {
  getConnectivityClient,
  browserOnlineDetector,
} from "@connectivity-js/core";
import { renderConnectivityDevTools } from "@connectivity-js/devtools";
 
const client = getConnectivityClient({
  detectors: [browserOnlineDetector()],
});
client.start();
 
const cleanup = renderConnectivityDevTools(document.body, client, {
  position: "bottom-right",
  initialOpen: true,
});
 
// on unmount
cleanup();

Panel Features

  • Status: Current connectivity state (online/offline/unknown), duration, quality (rtt, effectiveType, downlink)
  • Queue: Job list with actionKey, status, input, Retry/Cancel buttons
  • Flush All: Flush all pending jobs
Last updated on
Vanilla JSTesting