@deftstar/support-web

Framework-agnostic error→ticket glue for Support — React, Vue, Svelte, vanilla, anything. On a server error (5xx), offer to turn it into a ticket that carries the real server detail. Pairs with @deftstar/support-widget (the widget) and a backend package (deftstar/support-laravel, gosupport).

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

Install

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

React (axios)

import axios from 'axios';
import { createAxiosErrorHandler } from '@deftstar/support-web';

const cfg = { flushUrl: '/api/support/errors/flush', flushHeaders: () => ({ Authorization: `Bearer ${getToken()}` }) };

axios.interceptors.response.use(null, createAxiosErrorHandler(cfg, (ctx) => {
  // show your toast/snackbar; call ctx.report() when the user opts in
  toast(ctx.message ?? 'Something went wrong', { action: { label: 'Report', onClick: ctx.report } });
}));

Vanilla fetch

import { inspectResponse } from '@deftstar/support-web';

const res = await fetch(url);
const ctx = inspectResponse(res, { flushUrl: '/api/support/errors/flush' });
if (ctx) showReportPrompt(ctx);   // ctx.report() flushes + opens the widget

Direct

import { reportServerError } from '@deftstar/support-web';
await reportServerError({ flushUrl: '/api/support/errors/flush' }, { requestId, message, status: 500 });

ctx.report() / reportServerError() flush the buffered error to Support and open the widget's prefilled form (window.SupportWidget.reportError), so the ticket links to the server-side detail.

Angular apps: use @deftstar/support-angular (a ready HttpInterceptor) instead.