Bug Reports

Let users report bugs with context. Automatic capture of browser, URL, user info, and optional screenshots.

Setup

app/layout.tsx

import { Analytics, BugReportFAB } from '@thisbefine/analytics/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics apiKey="tif_xxx" />
        <BugReportFAB />
      </body>
    </html>
  );
}

Options

<BugReportFAB
  position="bottom-right"
  buttonColor="#3b82f6"
  buttonText="Report Bug"
/>

Prop	Default	Options
`position`	`bottom-right`	`bottom-left`
`buttonColor`	theme default	any CSS color
`buttonText`	"Report Bug"	any string

Automatic Context

Data	Captured
URL	Current page
Browser	Chrome, Safari, Firefox, etc.
OS	Windows, Mac, iOS, Android
Screen size	Viewport dimensions
User ID	If identified
Timestamp	When submitted

Form Fields

Title (required)
Description (required)
Severity: Low, Medium, High, Critical
Screenshot (optional): upload or paste from clipboard

Programmatic Control

import { createBugReportWidget, getAnalytics } from '@thisbefine/analytics';

const widget = createBugReportWidget(getAnalytics()!, {
  position: 'bottom-right',
  buttonColor: '#ef4444',
});

widget.destroy();

Conditional Display

'use client';

import { usePathname } from 'next/navigation';
import { BugReportFAB } from '@thisbefine/analytics/react';

const ConditionalBugReport = () => {
  const pathname = usePathname();
  const hideOnPaths = ['/login', '/signup', '/onboarding'];

  if (hideOnPaths.some(path => pathname.startsWith(path))) return null;
  return <BugReportFAB />;
};

Screenshots

Auto-resized if over 500KB
Supports PNG, JPEG, GIF, WebP
Users can paste from clipboard with Ctrl+V / Cmd+V

Integrations

Route bug reports to Linear, GitHub, or Slack. Configure in Settings → Integrations. Or use webhooks for custom integrations.

Custom UI

Build your own bug report form using the API:

const submitBugReport = async (data) => {
  const user = getAnalytics()?.getUser();

  const formData = new FormData();
  formData.append('title', data.title);
  formData.append('description', data.description);
  formData.append('severity', data.severity);
  formData.append('url', window.location.href);
  if (user?.userId) formData.append('userId', user.userId);
  if (data.screenshot) formData.append('screenshot', data.screenshot);

  await fetch('/api/bug-reports', { method: 'POST', body: formData });
};

Best Practices

Make it visible: Corner of the screen, not hidden in menus.

Clear language: "Report Bug" or "Found an Issue?" not "Submit" or "Error".

Don't block content: Switch corners or add padding if it overlaps important UI.

Respond to reports: Acknowledge, update status, close when fixed. Bugs that go into a void kill trust.

Bug Reports

On this page