Change Details

**Scope**: Add a "Report this error" button to the two hard-error panels in upload-workbench, opening a modal that lets the user submit a pre-filled report either as a Phabricator task or as a section on `User talk:Daanvr` on Commons. == Problem == When the app shows an error message (the existing one with the Reload button), the user has no way to report it from inside the tool. Today they have to copy the error text by hand, open Phabricator separately, and write the report from scratch — and if they don't have a Phabricator account, there is no other channel. == Affected code == Both error panels live in `src/main.jsx`: - `<Bootstrap>` "Couldn't start" panel — `src/main.jsx:209-218` - `<ErrorBoundary>` "Something broke" panel — `src/main.jsx:273-281` Both use the `.boot-error` CSS class (`src/app.css:4091`). == Desired behaviour == Add a third button **"Report this error"** to both panels (next to Reload). Clicking opens a new modal that: 1. **Captures context automatically** (read-only on display, but editable in the body textarea): - Timestamp (ISO 8601) - Tool version + deploy target (from `__APP_VERSION__` and `__DEPLOY_TARGET__` Vite defines) - Error message - Error stack (collapsed by default) - User agent - Current URL 2. **Free-text comment field**: "What were you doing when this happened? (optional)" 3. **Two submit options**: - **Open Phabricator task** — `window.open` to `https://phabricator.wikimedia.org/maniphest/task/edit/form/default/?projects=tool-upload-workbench&title=<encoded>&description=<encoded>` (Phabricator accepts these query params on the create-task form) - **Post to User talk:Daanvr** — `window.open` to `https://commons.wikimedia.org/w/index.php?title=User_talk:Daanvr&action=edit&section=new&preloadtitle=<encoded>`, **plus** a "Copy report to clipboard" button next to it (MediaWiki's URL pre-fill for the body uses `&preload=<wiki-template-page>`, not a literal string, so the user pastes after the edit form loads) 4. **Cancel** dismisses without doing anything. The "Report this error" button can also be reused as an MR-preview testing aid: a developer can manually throw an error from the console and exercise the report flow. == Design notes == - No new OAuth scopes — `window.open` is a user action, not an API call. - No username auto-prefilled in body — the Phab task / talk-page post is signed by whoever submits. - Body is shown in an editable textarea so users can redact (e.g. strip a filename from the URL hash) before submitting. - Modal follows the existing `.modal-backdrop` / `.modal` / `.modal__head` / `.modal__body` / `.modal__foot` pattern used by `src/ui/info-modal.jsx` and `src/ui/publish-modal.jsx`. == Acceptance criteria == - [ ] Both error panels show a "Report this error" button alongside Reload. - [ ] Clicking opens a modal with all captured context visible and editable in the body textarea. - [ ] "Open Phabricator task" opens a new tab to the Maniphest create form with title and description pre-filled. - [ ] "Post to User talk:Daanvr" opens a new tab to the talk-page edit form with section title pre-filled, with a "Copy report to clipboard" button for the body. - [ ] No new OAuth scopes. - [ ] `npm run build` (including the undefined-identifier scanner) passes. - [ ] `CHANGELOG.md` has an `[Unreleased]` entry under Added. == Out of scope == - "Last action" / breadcrumb history capture — would require instrumenting many click handlers across `app.jsx` / `table.jsx`. The error message + URL is already a strong locator. Layer in as a follow-up task if maintainer wants more. - Report button on inline error chips (per-row upload/save errors). Those are row-level with direct repair options. == Original report == Filed by Daanvr via voice-to-text — preserved verbatim in the Grooming pass comment below.

When the user uh uses the tool, sometimes they encounter an error and it shows like uh some information about the error text and then a refresh button. When this message is shown, I would like there to be a button enabling the user to report this error and this would create a text ex describing this the the situation the user is in um like the point in time, the version of the tool. Um the last action or something or like what the user was doing at that point the error message of course Maybe a comment from the user. And when the user clicks OK, it opens a fabricated task. Um, I think that's the same thing. Or maybe no, because maybe the user doesn't have a fabricator account, so it can either um post it on Fabricator or post it to my user chat My talk page. Um so basically it creates an error log, an error description, uh and room for the user to say a bit more what happened, when happened, or something if they want to it's uh uh up to them and then a publish to fabricator or a publish to uh my talk page And hopefully both can be just a button. If you click it, it goes to that page but everything pre-filled **Scope**: Add a "Report this error" button to the two hard-error panels in upload-workbench, opening a modal that lets the user submit a pre-filled report either as a Phabricator task or as a section on `User talk:Daanvr` on Commons. == Problem == When the app shows an error message (the existing one with the Reload button), the user has no way to report it from inside the tool. Today they have to copy the error text by hand, open Phabricator separately, and write the report from scratch — and if they don't have a Phabricator account, there is no other channel. == Affected code == Both error panels live in `src/main.jsx`: - `<Bootstrap>` "Couldn't start" panel — `src/main.jsx:209-218` - `<ErrorBoundary>` "Something broke" panel — `src/main.jsx:273-281` Both use the `.boot-error` CSS class (`src/app.css:4091`). == Desired behaviour == Add a third button **"Report this error"** to both panels (next to Reload). Clicking opens a new modal that: 1. **Captures context automatically** (read-only on display, but editable in the body textarea): - Timestamp (ISO 8601) - Tool version + deploy target (from `__APP_VERSION__` and `__DEPLOY_TARGET__` Vite defines) - Error message - Error stack (collapsed by default) - User agent - Current URL 2. **Free-text comment field**: "What were you doing when this happened? (optional)" 3. **Two submit options**: - **Open Phabricator task** — `window.open` to `https://phabricator.wikimedia.org/maniphest/task/edit/form/default/?projects=tool-upload-workbench&title=<encoded>&description=<encoded>` (Phabricator accepts these query params on the create-task form) - **Post to User talk:Daanvr** — `window.open` to `https://commons.wikimedia.org/w/index.php?title=User_talk:Daanvr&action=edit&section=new&preloadtitle=<encoded>`, **plus** a "Copy report to clipboard" button next to it (MediaWiki's URL pre-fill for the body uses `&preload=<wiki-template-page>`, not a literal string, so the user pastes after the edit form loads) 4. **Cancel** dismisses without doing anything. The "Report this error" button can also be reused as an MR-preview testing aid: a developer can manually throw an error from the console and exercise the report flow. == Design notes == - No new OAuth scopes — `window.open` is a user action, not an API call. - No username auto-prefilled in body — the Phab task / talk-page post is signed by whoever submits. - Body is shown in an editable textarea so users can redact (e.g. strip a filename from the URL hash) before submitting. - Modal follows the existing `.modal-backdrop` / `.modal` / `.modal__head` / `.modal__body` / `.modal__foot` pattern used by `src/ui/info-modal.jsx` and `src/ui/publish-modal.jsx`. == Acceptance criteria == - [ ] Both error panels show a "Report this error" button alongside Reload. - [ ] Clicking opens a modal with all captured context visible and editable in the body textarea. - [ ] "Open Phabricator task" opens a new tab to the Maniphest create form with title and description pre-filled. - [ ] "Post to User talk:Daanvr" opens a new tab to the talk-page edit form with section title pre-filled, with a "Copy report to clipboard" button for the body. - [ ] No new OAuth scopes. - [ ] `npm run build` (including the undefined-identifier scanner) passes. - [ ] `CHANGELOG.md` has an `[Unreleased]` entry under Added. == Out of scope == - "Last action" / breadcrumb history capture — would require instrumenting many click handlers across `app.jsx` / `table.jsx`. The error message + URL is already a strong locator. Layer in as a follow-up task if maintainer wants more. - Report button on inline error chips (per-row upload/save errors). Those are row-level with direct repair options. == Original report == Filed by Daanvr via voice-to-text — preserved verbatim in the Grooming pass comment below.