mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Closes DOCS-1281 ## Problem Two defects in the "Related error codes" list, both from the page diverging from what `Troubleshooting.utils.ts` already does. * **Empty pills.** `formatError` returns an empty string when an error has neither an HTTP status code nor a code. The page renders the pill anyway, giving a link with no text whose `href` ends in `errorCodes=` with no value. So it is both an unnamed link and a pill filtering on nothing. * **Duplicate pills.** The same formatted code renders once per underlying error object, so one entry shows seven identical "500 unexpected_failure" pills. Measured on production, across the 59 entries that render the section: | | Count | | -- | -- | | Entries with an empty pill | 23 | | Empty pills | 33 | | Entries with duplicate pills | 4 | | Redundant pills | 9 | The guard also evaluated to `0` rather than `false` for an empty array, which React renders as a literal "0". ## Solution * Derive the formatted codes once, drop the empties, and dedupe. An entry whose every code formats empty no longer renders a heading and rule with nothing under them. * Call `formatError` once per code instead of twice per pill, and key on the code now that codes are unique. * Fix the same `0`-rendering guard on the keywords section. `Troubleshooting.utils.ts` already filters on `error?.http_status_code || error?.code` at lines 69 and 150, and already dedupes by formatted code at lines 72 to 79. This brings the page in line with the sidebar and filter list rather than introducing a new pattern. `formatError` itself is unchanged. It also produces grouping and sort keys in `Troubleshooting.utils.ts` and `Troubleshooting.ui.tsx`, so changing its return contract would reach well beyond this fix. ## Manual testing Compare each page against production, which still shows both defects. 1. Open [dashboard-errors-when-managing-users on production](https://supabase.com/docs/guides/troubleshooting/dashboard-errors-when-managing-users-N1ls4A). It shows 8 pills: seven identical "500 unexpected_failure" and one empty. 2. Open [the same page on the preview](https://docs-git-docs-troubleshooting-empty-error-pills-supabase.vercel.app/docs/guides/troubleshooting/dashboard-errors-when-managing-users-N1ls4A). One "500 unexpected_failure" pill remains. 3. Open [prisma-error-management on production](https://supabase.com/docs/guides/troubleshooting/prisma-error-management-Cm5P_o). It shows 6 empty pills. 4. Open [the same page on the preview](https://docs-git-docs-troubleshooting-empty-error-pills-supabase.vercel.app/docs/guides/troubleshooting/prisma-error-management-Cm5P_o). The section is gone, because every code on that entry formats empty. 5. Run axe on either preview page. `link-name` reports zero elements. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved troubleshooting displays by formatting and deduplicating error values. * Removed empty or invalid error entries from the rendered results. * Related error-code links now appear only when valid error codes are available. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Reference Docs
Supabase Reference Docs
Maintainers
If you are a maintainer of any tools in the Supabase ecosystem, you can use this site to provide documentation for the tools & libraries that you maintain.
DocSpec
We use documentation specifications which can be used to generate human-readable docs.
- OpenAPI: for documenting API endpoints.
- SDKSpec (custom to Supabase): for SDKs and client libraries.
- ConfigSpec (custom to Supabase): for configuration options.
- CLISpec (custom to Supabase): for CLI commands and usage.
The benefit of using custom specifications is that we can generate many other types from a strict schema (eg, HTML and manpages). It also means that we can switch to any documentation system we want. On this site we use Next.js, but on Supabase's official website, we use a custom React site and expose only a subset of the available API for each tool.
Contributing
To contribute to docs, see the developers' guide and contributing guide.