DOCSEARCHbyAlgolia
Submit Docs

Buoy Developer Tools

repository·main·Indexed 20 days ago

https://github.com/buoy-gg/buoy

A suite of developer tools for React Native applications featuring a floating dev menu and desktop dashboard to monitor network, state, and performance. Includes specialized packages such as @buoy-gg/console for Chrome-style on-device logging, @buoy-gg/debug-borders for component inspection, @buoy-gg/env for environment variable validation, and @buoy/bottom-sheet for high-performance floating windows and bottom sheets. Supports production builds and an MCP server for AI agent interaction.

Tokens
41.9K
Snippets
145
Records
233
Agent score
70%

What's inside Buoy

  1. Features of the @buoy-gg/events tool

    main

    The @buoy-gg/events tool provides a unified chronological timeline of your application's activity. Key features include:

    • Unified Timeline: Interleaved chronological view of network requests, AsyncStorage/MMKV writes, Redux actions, React Query queries/mutations, Zustand, Jotai, and navigation events.
    • Auto-detection: Automatically captures events from any other Buoy tool installed in the project.
    • Correlation Badges: Links related events (e.g., a React Query fetch start and success) with badges like "1/2" to trace lifecycles.
    • LLM Export Presets: Export the timeline as Markdown (optimized for AI agents), Bug Reports (with timestamps/errors), machine-readable JSON, or Errors Only.
    • Smart Formatting: Parses nested JSON, strips verbose fields, and shows only changed state for Redux events.
    • Filter and Search: Use source badges to narrow the timeline and a header search to filter by titles, subtitles, or full network URLs.
    • useUnifiedEvents hook: Allows you to consume the merged event stream directly within your own React components.

  2. Features of @buoy-gg/route-events

    main

    The @buoy-gg/route-events package provides several navigation inspection capabilities:

    • Full sitemap: A searchable view of every route in your app, categorized by type (static, dynamic, layout).
    • Jump to any screen: Navigate directly to any route in the sitemap, including its parameters.
    • Live navigation stack: Real-time visualization of stack pushes, pops, and replacements.
    • Navigation event timeline: A log of every navigation event containing the path, params, timestamp, and duration since the previous event.
    • Filtering & search: Ability to filter events by pathname patterns or search across routes.

  3. Features of @buoy-gg/impersonate

    main

    The @buoy-gg/impersonate tool provides several automated developer experience features:

    • Header injection: Patches fetch and XHR at startup to ensure even boot-time requests carry the impersonation header. The header name is configurable via defaults.headerKey.
    • Auto data clearing: Automatically detects @tanstack/react-query and react-redux to clear query caches or reset stores upon user switching. Supports optional callbacks for clearing AsyncStorage or MMKV.
    • Floating banner: A UI banner appears when impersonation is active.
      • Pause: The banner's power button pauses header injection for A/B testing against your real account.
      • Stop (X): Stops the session and triggers data clearing.
    • History: Persists and allows quick-switching between the last 10 impersonated users across app restarts.
    • Developer defaults: Allows shipping team-wide defaults for header names, banner visibility, and clearing behavior. The Settings tab can export this config as code.
    • Configuration locking: Setting showSettingsTab: false restricts the UI to only Search and History.

  4. Features of @buoy-gg/perf-monitor

    main

    Bench provides several tools for measuring and optimizing React Native performance:

    • Live HUD: Real-time display of UI FPS, JS FPS, CPU, memory, and jank on real devices. The HUD uses UI-thread shared values so it remains responsive even if the JS thread is blocked.
    • Record and Compare: Capture performance sessions and compare them side-by-side (duration, memory, JS FPS, CPU) to validate optimizations.
    • Batch Benchmarks: Run flows across multiple implementation variants to receive a ranked report.
    • Render Capture: When paired with @buoy-gg/highlight-updates, reports include per-component render counts and durations (e.g., identifying specific components causing FPS drops).
    • AI-driven Optimization: Integrates with the Buoy MCP server (run_benchmark_batch tool) and buoy-optimize wizard to allow AI assistants to measure, apply changes, and re-measure automatically.
    • Web Mode: Provides rAF frame rate, a BUSY long-task percentage, JS heap, and a PAGES section ranking the slowest routes by FPS.

  5. Features of @buoy-gg/redux

    main

    The @buoy-gg/redux tool provides the following capabilities:

    • Action Log: Captures type, payload, timestamp, and a diff summary (+added -removed ~modified).
    • RTK Async Thunk Linking: Automatically connects pending → fulfilled/rejected actions using Request IDs with a visual timeline.
    • Time Travel: Jump to state after any action or replay actions to test reducers.
    • Performance Monitoring: Flags actions taking longer than 16ms (frame-budget warnings).
    • Detailed Inspection: Three-tab view for full action payload, full state tree, and side-by-side diffs.
    • Search & Filter: Filter actions by type or by whether they actually modified the state.
    • Data Export: Export action history as JSON for bug reports or test fixtures.
    • Recording Control: Toggle capture on/off to focus on specific interactions.

  6. Features of @buoy-gg/react-query

    main

    The @buoy-gg/react-query tool provides a suite of debugging capabilities for TanStack Query:

    • Cache inspection: Browse queries, view cached data via an interactive JSON tree, and edit values in place.
    • Refetch & invalidate: Trigger query refetches or invalidations directly from the UI.
    • Simulate loading & error states: Test spinners and error boundaries by forcing specific states.
    • One-tap offline toggle: A WiFi switch that controls React Query's onlineManager to pause all queries for offline-first testing.
    • Live mutation tracking: Monitor mutation status, variables, responses, errors, and timing.
    • Query states at a glance: View statuses like fresh, stale, fetching, paused, and inactive across the cache.
    • Filter & search: Search for queries by key or filter them by status.

  7. Features of the @buoy-gg/storage explorer

    main

    The Storage Explorer provides a unified interface for managing React Native persistence:

    • Multi-backend support: Browse AsyncStorage, MMKV (including encrypted instances), and Expo SecureStore.
    • Real-time editing: Modify, delete, or add keys in place. Supports bulk-select for mass deletion or export.
    • Live monitoring: Watch storage reads and writes stream in real-time as the app runs.
    • UI enhancements: Pin important keys to the top, hide noisy keys, and view inline previews (color-coded booleans, pretty-printed JSON, and type indicators).
    • Validation: Use createStorageTool({ requiredStorageKeys }) to declare expected types or values and identify missing or incorrect data.

  8. Features of the @buoy-gg/env Environment Inspector

    main

    The Environment Inspector provides a visual dashboard for managing and auditing your app's environment variables:

    • Automatic discovery: Automatically collects all variables prefixed with EXPO_PUBLIC_.
    • Validation: Checks required variables against expected types (string, number, boolean, array, object, url) or specific values.
    • Health Score: Provides a 0-100% health percentage with status states: HEALTHY, WARNING, ERROR, and CRITICAL.
    • Visual Status: Variables are color-coded: green (correct), yellow (wrong value/type), and red (missing required variable).
    • Filtering: Includes real-time search and filters for "All", "Missing", and "Issues".
    • Utility: One-tap copy to clipboard for any variable value.

  9. Features of @buoy-gg/zustand devtools

    main

    The @buoy-gg/zustand package provides several debugging capabilities:

    • State Change Capture: Tracks store name, update type (setState, replace, persist, initial), changed keys, and diff summaries.
    • Visual Diffs: Side-by-side or tree view highlighting additions, removals, and modifications.
    • Time Travel: "Jump to state" functionality to restore a store to a previously captured state.
    • One-tap Reset: Instantly return any store to its initial state.
    • Persist Awareness: Automatically detects and tags stores using Zustand's persist middleware.
    • Store Color Coding: Consistent color assignment per store for easy identification.
    • Search & Filter: Filter updates by store name or specific changed keys.
    • Performance Monitoring: When using the optional buoyDevTools() middleware, the tool flags updates that exceed the 16ms frame budget.

  10. Features of @buoy-gg/highlight-updates

    main

    The Render Highlighter provides several debugging capabilities for React Native components:

    • Render overlays with the cause: Every render displays a bounding box tagged with the specific cause: mount, state change, prop change, or parent re-render.
    • Hook value tracking: When a state change triggers a render, the tool shows the before $\rightarrow$ after values for the specific useState or useReducer that changed.
    • Overlay mode: A lightweight, real-time highlighting mode for spotting unnecessary re-renders during app interaction.
    • Modal mode: A full inspector providing render history, filtering, and detailed per-render cause breakdowns.
    • Framework noise filtering: The tool focuses on your components rather than internal View or Text components.
    • Performance integration: When used with @buoy-gg/perf-monitor, benchmark recordings capture per-component render counts and durations.

  11. Features of @buoy-gg/console

    main

    The @buoy-gg/console tool provides a Chrome-DevTools-style experience directly on-device in your React Native app. Key features include:

    • Direct Patching: Captures log, info, warn, and error from your code and all dependencies without requiring a Babel plugin or custom logger.
    • Chrome-style UI: Objects and arrays are formatted and expandable.
    • Filtering & Search: Filter logs by level (e.g., only show errors) or search for specific substrings.
    • Log Preservation: An optional setting to keep the log buffer across reloads.
    • Production Support: Can be used to read console output from release builds on-device without a cable or Metro connection.

  12. Features of Buoy Desktop

    main

    Buoy Desktop expands the capabilities of the floating devtools menu by providing a full-screen dashboard with the following features:

    • Full-screen tools: Dedicated panels for Network, Storage, Console, React Query, Redux/Zustand/Jotai, Routes, and Events.
    • Live performance HUD: Real-time streaming of FPS, CPU, and memory usage from the device.
    • Multi-device support: Switch between multiple connected simulators and physical devices.
    • Remote actions: Perform actions from your desk such as editing storage, dispatching Redux actions, refetching queries, and navigating the app.
    • Screenshot tool: Capture specific regions or components from the iOS Simulator.
    • Diagnostics: A console that streams the broker's connection logs (handshakes, disconnect reasons, version mismatches).