Angular

// feedback.ts
import {
  DestroyRef,
  Injectable,
  afterNextRender,
  inject,
  makeEnvironmentProviders,
  type EnvironmentProviders,
} from "@angular/core";
import { mountBugbottle, type BugbottleWidget } from "bugbottle/ui";
import { htmlToImage } from "bugbottle/html-to-image";
import { da } from "bugbottle/locales";

export type FeedbackConfig = {
  endpoint: string;
  extra?: Record<string, unknown>;
  /** Defaults to English. */
  locale?: typeof da;
};

@Injectable()
export class Feedback {
  private widget: BugbottleWidget | null = null;
  private wanted = false;
  private readonly destroyRef = inject(DestroyRef);

  constructor(private readonly config: FeedbackConfig) {
    // Only ever in the browser. `mountBugbottle` throws where there is no
    // `document`, which is every SSR render and every prerender, and
    // `afterNextRender` is the one hook that simply never runs there.
    afterNextRender(() => {
      this.widget = mountBugbottle({
        endpoint: config.endpoint,
        screenshot: htmlToImage,
        locale: config.locale,
        extra: config.extra,
        // The window-level half, with the message already in the box. Read
        // "Errors with no window event" below for why this alone is not the
        // whole answer.
        openOnError: { prefill: true },
      });
      // An error that asked for the panel before it existed still wants it.
      // Without this the first crash of a cold page is the one crash nobody
      // hears about, because the panel is mounted a render later.
      if (this.wanted) this.widget.open();
      this.destroyRef.onDestroy(() => this.widget?.destroy());
    });
  }

  /** Open the form. Safe before the panel is mounted, and a no-op on the server. */
  open(): void {
    this.wanted = true;
    this.widget?.open();
  }

  close(): void {
    this.widget?.close();
  }
}

export function provideBugbottle(config: FeedbackConfig): EnvironmentProviders {
  return makeEnvironmentProviders([{ provide: Feedback, useFactory: () => new Feedback(config) }]);
}

// bugbottle-error-handler.ts
import { ErrorHandler, Injectable, inject } from "@angular/core";
import { Feedback } from "./feedback";

@Injectable()
export class BugbottleErrorHandler implements ErrorHandler {
  private readonly feedback = inject(Feedback);

  handleError(error: unknown): void {
    // `implements`, not `extends`: the default handler is `console.error`, and
    // an application that replaces it silently loses the console too.
    console.error(error);
    // The message goes in the box, so the reporter writes about the error they
    // are already looking at instead of starting from an empty field. The
    // console line above is what carries it into the report as well.
    this.feedback.open({ message: error instanceof Error ? error.message : String(error) });
  }

  /**
   * Optional, and called for errors thrown while a component's own view is
   * being rendered. Angular's type is `onViewError?(error, details)`. It
   * arrives *instead of* nothing and *before* the panel exists, so route it
   * through the same service rather than dropping it.
   */
  onViewError?(error: Error): void;
}

// app.config.ts
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from "@angular/core";
import { provideRouter } from "@angular/router";
import { provideBugbottle } from "./feedback";
import { BugbottleErrorHandler } from "./bugbottle-error-handler";
import { ErrorHandler } from "@angular/core";

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    provideBugbottle({ endpoint: "/api/feedback", extra: { appVersion: "1.4.2" } }),
    { provide: ErrorHandler, useClass: BugbottleErrorHandler },
  ],
};

// report-button.component.ts
import { Component, inject, signal } from "@angular/core";
import { buildReport, captureScreenshot, sendReport } from "bugbottle";
import { htmlToImage } from "bugbottle/html-to-image";

@Component({
  selector: "app-report-button",
  template: `<button type="button" (click)="report()">Report a problem</button>`,
})
export class ReportButton {
  private readonly busy = signal(false);

  async report(): Promise<void> {
    this.busy.set(true);
    try {
      // Screenshots fail open. A render that throws costs the picture, not
      // the report — which is why this is a `catch` and not a branch.
      const screenshot = await captureScreenshot(htmlToImage).catch(() => null);
      await sendReport(
        "/api/feedback",
        buildReport({ type: "bug", message: "The save button did nothing", screenshotDataUrl: screenshot }),
      );
    } finally {
      this.busy.set(false);
    }
  }
}

<script
  src="https://cdn.jsdelivr.net/npm/bugbottle@1.0.1/dist/bugbottle.js"
  data-endpoint="/api/feedback"
  data-open-on-error="prefill"
  data-locale="da"
></script>

import express from "express";
import { expressHandler, fileStore, toWebhook } from "bugbottle/server";

const store = fileStore({ dir: "./reports" }).store;

app.post(
  "/api/feedback",
  express.json({ limit: "5mb" }),
  expressHandler({ store, sinks: [toWebhook({ endpoint: process.env.SLACK_WEBHOOK_URL!, format: "slack" })] }),
);