@issue-reporter/react

Experimental React UI and browser capture flow for IssueReporter.

The current reporter opens in a responsive Precision Glass shell: wide layouts keep a left screenshot workspace beside a right details rail, narrow layouts stack the same workspace above the rail, the screenshot workspace uses the marker.js editor as a dedicated image-markup tool, and footer capture or submit actions sit below the shell chrome.

Install

npm install @issue-reporter/react @issue-reporter/core

Peer dependencies:

• [email protected]
• [email protected]

Smallest Useful Example

import {
  IssueReportDialog,
  IssueReportLauncher,
  IssueReporterProvider,
  createIssueReporterApiClient,
} from '@issue-reporter/react';

const apiClient = createIssueReporterApiClient({
  baseUrl: '/api/issue-reports',
});

export function AppShell() {
  return (
    <IssueReporterProvider apiClient={apiClient} appVersion="1.2.3">
      <main data-issue-report-capture-root="true">
        <YourApp />
      </main>
      <IssueReportLauncher />
      <IssueReportDialog />
    </IssueReporterProvider>
  );
}

Default Popup Behavior

• The popup shell is responsive: wide layouts keep the screenshot workspace beside the details rail, while narrow layouts stack the same workspace and rail vertically.
• Screenshot markup runs through marker.js: the workspace mounts the marker.js editor as a dedicated image-markup tool instead of the previous in-house annotation canvas.
• Recovery stays in the details rail: retry true capture, paste or upload a screenshot manually, or continue with a comment-only report when screenshots are unavailable.
• Successful submissions reflect the chosen evidence path so users can tell whether the report included a captured screenshot, manual screenshot evidence, or comments only.

Limitations

• Experimental 0.x API
• best capture results come from recent Chrome desktop builds
• native Chrome capture temporarily isolates the selected capture root with isolation: isolate
• browsers without the native capture APIs use DOM capture fallback
• supported Chrome runtime capture failures surface inside the details-rail recovery ladder instead of silently downgrading to DOM capture
• the current recommended path is the provider + launcher + dialog composition shown above

More

• Detailed setup is documented in the project repository's docs/react-setup.md.
• A runnable example lives in the demo-web workspace in the project repository.