Sending reports from your own form

npm install @bugdump/sdk

import { Bugdump } from '@bugdump/sdk';

const bugdump = Bugdump.init({
  apiKey: 'your-widget-key',
  hideButton: true,
});

const { taskPublicId } = await bugdump.submit({
  description: 'I clicked Pay and nothing happened',
  reporterName: 'Jane Doe',
  reporterEmail: 'jane@example.com',
  priority: 'High',
  files: Array.from(fileInput.files ?? []),
});

import { useState, type FormEvent } from 'react';
import { BugdumpApiError } from '@bugdump/sdk';
import { useBugdump } from '@bugdump/react';

// Rendered under <BugdumpProvider config={{ apiKey: import.meta.env.VITE_BUGDUMP_KEY, hideButton: true }}>
export function ReportForm({ onSent }: { onSent: (taskNumber: number) => void }) {
  const bugdump = useBugdump();
  const [sending, setSending] = useState(false);
  const [error, setError] = useState('');

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!bugdump) return;
    const data = new FormData(event.currentTarget);
    setSending(true);
    setError('');
    try {
      const { taskPublicId } = await bugdump.submit({
        description: String(data.get('description')),
        reporterEmail: String(data.get('email')) || undefined,
        files: data.getAll('files').filter((f): f is File => f instanceof File && f.size > 0),
      });
      onSent(taskPublicId);
    } catch (e) {
      setError(e instanceof BugdumpApiError ? e.message : 'Could not send the report.');
    } finally {
      setSending(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <textarea name="description" required maxLength={10000} />
      <input name="email" type="email" />
      <input name="files" type="file" multiple />
      {error && <p role="alert">{error}</p>}
      <button disabled={!bugdump || sending}>{sending ? 'Sending…' : 'Send report'}</button>
    </form>
  );
}

import { Injectable, PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Bugdump, type SubmitOptions } from '@bugdump/sdk';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class BugReportService {
  private readonly bugdump = isPlatformBrowser(inject(PLATFORM_ID))
    ? Bugdump.init({ apiKey: environment.bugdumpKey, hideButton: true })
    : null;

  submit(options: SubmitOptions) {
    if (!this.bugdump) {
      return Promise.reject(new Error('Bug reports can only be sent from the browser.'));
    }
    return this.bugdump.submit(options);
  }
}

import { Component, inject, output, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { BugdumpApiError } from '@bugdump/sdk';
import { BugReportService } from './bug-report.service';

@Component({
  selector: 'app-report-form',
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="send()">
      <textarea formControlName="description"></textarea>
      <input formControlName="email" type="email" />
      <input type="file" multiple (change)="onFiles($event)" />
      @if (error()) {
        <p role="alert">{{ error() }}</p>
      }
      <button type="submit" [disabled]="form.invalid || sending()">Send report</button>
    </form>
  `,
})
export class ReportFormComponent {
  private readonly reports = inject(BugReportService);
  private files: File[] = [];

  /** Emits the new task's number, so the dialog can close and thank the user. */
  readonly sent = output<number>();

  readonly form = inject(FormBuilder).nonNullable.group({
    description: ['', [Validators.required, Validators.maxLength(10000)]],
    email: ['', Validators.email],
  });
  readonly sending = signal(false);
  readonly error = signal('');

  onFiles(event: Event) {
    this.files = Array.from((event.target as HTMLInputElement).files ?? []);
  }

  async send() {
    const { description, email } = this.form.getRawValue();
    this.sending.set(true);
    this.error.set('');
    try {
      const { taskPublicId } = await this.reports.submit({
        description,
        reporterEmail: email || undefined,
        files: this.files,
      });
      this.sent.emit(taskPublicId);
    } catch (e) {
      this.error.set(e instanceof BugdumpApiError ? e.message : 'Could not send the report.');
    } finally {
      this.sending.set(false);
    }
  }
}

async function sendReport(description) {
  const bugdump = window.Bugdump?.getInstance();
  if (!bugdump) throw new Error('BugDump has not loaded yet.');
  const { taskPublicId } = await bugdump.submit({ description });
  return taskPublicId;
}

if (e instanceof BugdumpApiError && (e.code === 'REPORT_QUOTA_EXCEEDED' || e.code === 'TASK_LIMIT_REACHED')) {
  setError('Reporting is paused right now. Please try again later.');
}

curl -X POST https://api.bugdump.com/api/widget/v1/reports \
  -H "X-API-Key: your-widget-key" \
  -H "Content-Type: application/json" \
  -d '{"description": "Export to CSV times out", "reporterEmail": "jane@example.com", "priority": "High"}'