The web SDK with a React binding on top. Wrap the app in EverframeProvider, open the reporter from useEverframe(), and every report carries the focused React component and its ancestor path, plus the annotated screenshot, 30 seconds of replay, console, network and device — signed.

Three steps

1Install

npm i @everframe/react

2Wrap your app once

import { EverframeProvider } from '@everframe/react';

export default function Root() {
  return (
    <EverframeProvider config={{ apiKey: 'evf_live_…' }}>
      <App />
    </EverframeProvider>
  );
}

3Open it from any component

import { useEverframe } from '@everframe/react';

function ReportBugButton() {
  const { open } = useEverframe();
  return <button onClick={() => open()}>Report a bug</button>;
}

What it captures

Focused component The React component in focus, resolved to its real name and ancestor path — CheckoutForm, not a div add the displayName plugin so names survive minification

Screenshot In-browser render of the viewport, WebP, with the reporter's annotations

Session replay rrweb rolling buffer — 15 / 30 / 60 s off by default; enable per app in the dashboard, the client can only turn it off

Console Last 100 lines, all five levels console.levels narrows it

Network Last 100 fetch / XHR requests with status and duration bodies off by default; enable per app in the dashboard, the client can only veto

Breadcrumbs Clicks, route changes and requests before the report automatic

Crash reports Uncaught errors and unhandled rejections file a report on their own on by default

Device and app Browser, OS, viewport, locale, timezone, your appName and appVersion

What you wire yourself

The trigger. No floating bubble; the hotkey ⌘/Ctrl+Shift+B is on by default and your own button calls open().

Sensitive subtrees. Wrap them in <Sensitive> and they are blacked out in the screenshot and the replay.

Who the user is, with setUser(), so a report is recognisable without asking.

Component names in production. Add @everframe/babel-plugin-displayname or the SWC plugin so minification does not erase them.

When to pick it

Any React web app. The provider mounts the reporter, registers the hotkey and owns the modal; the hook opens it from wherever your button lives. Everything the Web SDK does, this does, plus one thing only a React binding can: the focused element is resolved to its component and ancestor path by reading React’s own tree.

Keeping component names honest

Minifiers strip display names. The install doc adds @everframe/babel-plugin-displayname (Babel) or @everframe/swc-plugin-displayname (Next.js default) so a production report still says CheckoutForm › PlaceOrderButton. Without it you get the DOM-level description the Web SDK gives.

Questions

Does it work with Next.js and other React frameworks?

Yes. Any React 18 or 19 app — Next.js, Remix, Vite. Capture happens on the client; in the app router, mount the provider in a client component.

What if my app is not React?

Use the Web SDK. Same capture core, same envelope, one init() call, no provider. The only thing you give up is the component name on the focused element.

What does open() return?

A promise that resolves with the outcome — submitted, queued (offline, sent later) or cancelled — so you can confirm to the user.

The Everframe React SDK.