@fogg/bug-reporter 1.0.0

package/examples/sandbox-vite/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bug-reporter-sandbox-vite",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "prepare:sdk": "npm --prefix ../.. run build",
+    "dev": "npm run prepare:sdk && vite",
+    "build": "npm run prepare:sdk && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fogg/bug-reporter": "file:../..",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^5.0.2",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.3"
+  }
+}

package/examples/sandbox-vite/src/App.tsx

@@ -0,0 +1,200 @@
+import { useState } from "react";
+import { BugReporter } from "@fogg/bug-reporter";
+import type { CustomFormProps } from "@fogg/bug-reporter";
+
+declare global {
+  interface Window {
+    __bugReporterSandboxFetchMocked?: boolean;
+  }
+}
+
+function parseBody(body: BodyInit | null | undefined): unknown {
+  if (typeof body !== "string") {
+    return undefined;
+  }
+  try {
+    return JSON.parse(body);
+  } catch {
+    return body;
+  }
+}
+
+if (!window.__bugReporterSandboxFetchMocked) {
+  const originalFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+
+    if (url.includes("/sandbox/upload")) {
+      return new Response(
+        JSON.stringify({
+          url: `https://example.local/assets/${Date.now()}`,
+          key: `assets/${Date.now()}`
+        }),
+        { status: 200, headers: { "content-type": "application/json" } }
+      );
+    }
+
+    if (url.includes("/sandbox/report")) {
+      const payload = parseBody(init?.body);
+      console.log("[sandbox] submitted payload", payload);
+
+      return new Response(
+        JSON.stringify({
+          id: `report-${Date.now()}`,
+          message: "Received in sandbox"
+        }),
+        { status: 200, headers: { "content-type": "application/json" } }
+      );
+    }
+
+    if (url.includes("/sandbox/fake-api-failure")) {
+      return new Response(
+        JSON.stringify({
+          error: "Simulated backend outage"
+        }),
+        { status: 503, headers: { "content-type": "application/json" } }
+      );
+    }
+
+    if (url.includes("/sandbox/success-with-bad-data")) {
+      return new Response(
+        JSON.stringify({
+          ok: true,
+          payload: null
+        }),
+        { status: 200, headers: { "content-type": "application/json" } }
+      );
+    }
+
+    return originalFetch(input, init);
+  };
+  window.__bugReporterSandboxFetchMocked = true;
+}
+
+function SeverityCustomForm({ attributes, updateAttribute }: CustomFormProps) {
+  const severityLevel = typeof attributes.severityLevel === "string" ? attributes.severityLevel : "";
+
+  return (
+    <label className="br-field">
+      What is the severity level?
+      <select value={severityLevel} onChange={(event) => updateAttribute("severityLevel", event.target.value)}>
+        <option value="" disabled>
+          Select severity level
+        </option>
+        <option value="preventing_release_campaign">Is preventing to release a Campaign</option>
+        <option value="campaign_already_live">My campaign is already live</option>
+        <option value="campaign_live_in_few_hours">The campaign will be live in a few hours</option>
+        <option value="campaign_live_later_today">The campaign will be live later today</option>
+      </select>
+    </label>
+  );
+}
+
+export function App() {
+  const [scenarioStatus, setScenarioStatus] = useState("No scenario triggered yet.");
+
+  const simulateApiFailure = async () => {
+    try {
+      const response = await fetch("/sandbox/fake-api-failure", { method: "POST" });
+      if (!response.ok) {
+        const body = await response.json().catch(() => null);
+        throw new Error(`API failure ${response.status}: ${JSON.stringify(body)}`);
+      }
+    } catch (error) {
+      console.error("[sandbox] simulated API failure", error);
+      setScenarioStatus("Triggered: fake API failure (503).");
+    }
+  };
+
+  const simulateConsoleErrors = () => {
+    console.error("[sandbox] console error #1: failed to parse widget config.");
+    console.error("[sandbox] console error #2", { reason: "Unexpected null value", source: "sandbox-button" });
+    console.warn("[sandbox] warning: stale feature flags detected.");
+    setScenarioStatus("Triggered: console error burst.");
+  };
+
+  const simulate200WithFrontendErrors = async () => {
+    try {
+      const response = await fetch("/sandbox/success-with-bad-data", { method: "GET" });
+      const body = (await response.json()) as { payload?: { items?: Array<{ id: string }> } | null };
+
+      // Intentional frontend processing bug to simulate runtime errors after a 200 response.
+      const firstItemId = body.payload!.items![0]!.id;
+      console.log("[sandbox] first item id", firstItemId);
+    } catch (error) {
+      console.error("[sandbox] 200 response but frontend processing failed", error);
+      setScenarioStatus("Triggered: 200 response with frontend runtime error.");
+    }
+  };
+
+  return (
+    <div className="page">
+      <main className="card">
+        <h1>bug-reporter local sandbox</h1>
+        <p>
+          Use the floating launcher at the bottom-right to test screenshot capture, optional annotation, recording,
+          diagnostics, upload flow, and final submission.
+        </p>
+
+        <section className="demo-block">
+          <h2>Visible content</h2>
+          <p>Use this text to validate screenshot selection and report details.</p>
+        </section>
+
+        <section className="demo-block">
+          <h2>Scenario buttons</h2>
+          <p>Use these to generate reproducible logs and request traces in bug-reporter diagnostics.</p>
+          <div className="sandbox-actions">
+            <button type="button" className="sandbox-btn" onClick={() => void simulateApiFailure()}>
+              Simulate fake API failure
+            </button>
+            <button type="button" className="sandbox-btn" onClick={simulateConsoleErrors}>
+              Simulate console errors
+            </button>
+            <button type="button" className="sandbox-btn" onClick={() => void simulate200WithFrontendErrors()}>
+              Simulate 200 + frontend error
+            </button>
+          </div>
+          <p className="sandbox-status">{scenarioStatus}</p>
+        </section>
+
+        <section className="demo-block sensitive" data-bug-reporter-mask="true">
+          <h2>Masked region</h2>
+          <p>This block should appear blurred in screenshots because of mask selectors.</p>
+        </section>
+      </main>
+
+      <BugReporter
+        CustomForm={SeverityCustomForm}
+        themeMode="light"
+        buttonColor="#374151"
+        config={{
+          apiEndpoint: "/sandbox/report",
+          projectId: "sandbox-vite",
+          appVersion: "0.0.1",
+          environment: "development",
+          storage: {
+            mode: "proxy",
+            proxy: {
+              uploadEndpoint: "/sandbox/upload"
+            }
+          },
+          features: {
+            screenshot: true,
+            recording: true,
+            annotations: true,
+            consoleLogs: true,
+            networkInfo: true
+          },
+          diagnostics: {
+            consoleBufferSize: 50,
+            requestBufferSize: 100
+          },
+          privacy: {
+            maskSelectors: ["[data-bug-reporter-mask='true']", "input[type='password']"]
+          }
+        }}
+      />
+    </div>
+  );
+}

package/examples/sandbox-vite/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./sandbox.css";
+
+createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/examples/sandbox-vite/src/sandbox.css

@@ -0,0 +1,74 @@
+:root {
+  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.4;
+  color: #0f172a;
+  background: #eef3f8;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.page {
+  min-height: 100vh;
+  padding: 32px 16px 96px;
+}
+
+.card {
+  max-width: 840px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 16px;
+  border: 1px solid #d9e3ef;
+  padding: 24px;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+}
+
+h1 {
+  margin: 0 0 8px;
+}
+
+.demo-block {
+  margin-top: 16px;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid #d9e3ef;
+  background: #f8fbff;
+}
+
+.sandbox-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.sandbox-btn {
+  border: 1px solid #c7d6e7;
+  background: #fff;
+  color: #0f172a;
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.sandbox-btn:hover {
+  background: #eef5ff;
+}
+
+.sandbox-status {
+  margin-top: 10px;
+  font-size: 13px;
+  color: #334155;
+}
+
+.sensitive {
+  background: #fff8f8;
+  border-color: #ffd9d9;
+}

package/examples/sandbox-vite/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}

package/examples/sandbox-vite/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5174
+  }
+});

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@fogg/bug-reporter",
+  "version": "1.0.0",
+  "description": "Production-ready React bug reporting SDK with screenshot, recording, diagnostics, and pluggable storage backends.",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "docs",
+    "examples"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "changeset": "changeset",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:site": "vite --config tests/e2e/site/vite.config.ts --host 127.0.0.1 --port 4173",
+    "release:verify": "npm run lint && npm run typecheck && npm test && npm run build",
+    "version:packages": "changeset version",
+    "publish:dry-run": "npm run release:verify && npm publish --dry-run --ignore-scripts",
+    "publish:npm": "npm publish",
+    "release": "changeset publish",
+    "sandbox:vite": "npm run sandbox:vite:install && npm --prefix examples/sandbox-vite run dev",
+    "sandbox:vite:build": "npm run sandbox:vite:install && npm --prefix examples/sandbox-vite run build",
+    "sandbox:vite:install": "npm --prefix examples/sandbox-vite install",
+    "prepublishOnly": "npm run release:verify"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.6",
+    "@playwright/test": "^1.56.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.42.0",
+    "@typescript-eslint/parser": "^8.42.0",
+    "@vitejs/plugin-react": "^5.0.2",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.9.2",
+    "tsup": "^8.5.0",
+    "vite": "^7.1.3",
+    "vitest": "^3.2.4"
+  },
+  "keywords": [
+    "react",
+    "bug-reporting",
+    "screenshot",
+    "screen-recording",
+    "diagnostics",
+    "sdk"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-org/bug-reporter.git"
+  },
+  "bugs": {
+    "url": "https://github.com/your-org/bug-reporter/issues"
+  },
+  "homepage": "https://github.com/your-org/bug-reporter#readme"
+}