Files
supabase/apps/docs
Miranda LimonczenkoandClaude Opus 5 61b2a18724 fix(docs): stop rendering empty troubleshooting error-code pills (#49344)
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>
2026-08-21 08:44:28 -07:00
..
2026-07-01 12:59:00 +02:00
2026-07-08 12:30:42 +10:00

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.