@limekex/bugreport-widget-sdk

Reusable browser SDK for embedding the Stage Bug Reporter widget into staging/UAT applications.

Installation

npm install @limekex/bugreport-widget-sdk
# or
pnpm add @limekex/bugreport-widget-sdk
# or
yarn add @limekex/bugreport-widget-sdk

Usage

import { initBugReporter } from '@limekex/bugreport-widget-sdk';

initBugReporter({
  apiBaseUrl: 'https://bugreport.betait.no',
  environment: 'staging',
  enabled: true,
  appVersion: '1.2.3',
  commitSha: process.env.VITE_COMMIT_SHA,
  currentUser: { id: 'tester-001', email: '[email protected]', role: 'qa' },
  requireAuth: true,  // Optional: require testers to log in
});

This injects a floating 🐛 Report bug button into the page. Clicking it opens the bug report modal.

Config

See BugReporterConfig in @bugreport/shared-types for full config options.

React example

cd examples/react-example
pnpm dev

Scripts

pnpm build        # compile TypeScript
pnpm typecheck    # type-check without emit
pnpm dev          # watch mode

Architecture notes

• The init.ts entry point is framework-agnostic.
• The floating button is a plain DOM element — no React required for the trigger.
• The modal (modal.ts) is a TODO placeholder — replace with a real React component or Headless UI modal.
• payloadBuilder.ts auto-collects browser context (URL, viewport, locale, user-agent).
• apiClient.ts handles the multipart POST to the backend.