@deftstar/support-angular

@deftstar/support-angular

Angular glue for Support: on a server error (5xx), offer to turn it into a ticket that carries the real server-side detail. Pairs with a backend package (deftstar/support-laravel, gosupport) and @deftstar/support-widget.

Report-gated: the backend only buffers the error; this interceptor pushes it to Support (via the backend's flush endpoint) only when the user chooses to report.

Install

npm i @deftstar/support-angular @deftstar/support-widget

Use

import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideSupportErrorReporting, supportErrorInterceptor } from '@deftstar/support-angular';
import { MatSnackBar } from '@angular/material/snack-bar';

bootstrapApplication(App, {
  providers: [
    provideHttpClient(withInterceptors([supportErrorInterceptor])),
    provideSupportErrorReporting({
      flushUrl: '/api/support/errors/flush',            // your backend flush route
      flushHeaders: () => ({ Authorization: `Bearer ${getToken()}` }), // if you use bearer auth
      onServerError: (ctx) => {
        // prompt however you like; call ctx.report() when the user opts in
        const ref = inject(MatSnackBar).open(ctx.message, 'Report a problem', { duration: 8000 });
        ref.onAction().subscribe(() => ctx.report());
      },
    }),
  ],
});

ctx.report() flushes the buffered error to Support and opens the widget's prefilled "report a problem" form (window.SupportWidget.reportError), so the ticket links to the server-side detail.

API

• supportErrorInterceptor — add to withInterceptors([...]).
• provideSupportErrorReporting(config) — provides the config token.
• SupportErrorReportingConfig — { flushUrl, flushHeaders?, minStatus?, onServerError? }.
• SupportErrorContext — { requestId?, message, status, report() }.

The interceptor injects nothing HTTP-related (uses fetch for the flush), so there's no interceptorHttpClient circular dependency.