backstage / backstage/backstage

TechDocs not using custom component for NotFoundErrorPage consistently

Open Beginner friendly
#32,839 6 comments 1 reaction 0 assignees View on GitHub
area:techdocs needs:triage type:bug
Dominant language
TypeScript
Stars
34.4k
Forks
7.6k
Avg merge
2d 16h
Merged PRs (30d)
211

Description

### 📜 Issue Labels

- [x] Please familiarize yourself with the issue labels used in this project: [LABELS.md](https://github.com/backstage/backstage/blob/master/LABELS.md)

### 🔎 Search Terms

```plain
TechDocs NotFound Page
```

### 🗃️ Project Area

TechDocs

### 🔗 External Integration

N/A

### 📝 Description & Context

Backstage allows apps to register a custom NotFoundErrorPage component, which should be used instead of the default. TechDocs, however, does not consistently use this custom component. This results in an inconsistent user experience where users are unexpectedly shown the custom Spotify MicDrop page.

A similar issue was raised here: https://github.com/backstage/backstage/issues/24443
. That issue was closed as “not planned”, despite interest from both maintainers and contributors. I’m happy to continue the discussion there if that’s more appropriate.

Bumping this here because this appears to be a fairly straightforward fix and it has a notably negative impact on our portal’s UX.

Currently `TechDocsReaderPageContent` already has this code:

```typescript
const app = useApp();
const { NotFoundErrorPage } = app.getComponents();
```

It then uses it in the code as follows:

```typescript
// No entity metadata = 404. Don't render content at all.
if (entityMetadataLoading === false && !entityMetadata)
return ;
```

This is good. _However_ that component then renders ``.

And that component simply renders the following when `state === 'CONTENT_NOT_FOUND'`
```

```

It seems trivial to either get the right component from `app.getComponents` inside `TechDocsStateIndicator` or pass it down as a prop. We would be more than happy to contribute a PR.

### 👍 Expected Behavior

- when you register a custom NotFoundErrorPage component in your app
- it should be consistently use everywhere in the app, including in TechDocs when a page is not found

### 📦 Reproduction Repo

_No response_

### 🥾 Reproduction steps

See issue description and related issue

### Have you read the Code of Conduct?

- [x] I have read the [Code of Conduct](https://github.com/backstage/backstage/blob/master/CODE_OF_CONDUCT.md)

### Are you willing to submit PR?

Yes, and I have enough information to get started

Contributor guide

Open the contributing guide

Research direction

Start in TechDocsReaderPageContent and TechDocsStateIndicator, following the existing useApp() and NotFoundErrorPage handling into the CONTENT_NOT_FOUND state. Check the related TechDocsNotFound rendering and any nearby tests, then verify that a registered custom NotFoundErrorPage is shown consistently when TechDocs content is missing.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.