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 {
  ConnectivityClient,
  ConnectivityProvider,
  browserOnlineDetector,
} from "@connectivity-js/react";
import { ConnectivityDevTools } from "@connectivity-js/react-devtools";
 
const client = new ConnectivityClient({
  detectors: [browserOnlineDetector()],
});
 
function App() {
  return (
    <ConnectivityProvider client={client}>
      <YourApp />
      <ConnectivityDevTools client={client} />
    </ConnectivityProvider>
  );
}

Props

PropTypeDefaultDescription
clientConnectivityClient—ConnectivityClient instance (required)
defaultPosition'bottom-left' | 'bottom-right''bottom-right'Initial panel position (read at mount only)
defaultOpenbooleantrueWhether panel starts open (read at mount only)
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