Backstage Feedback Plugin

Feedback adds a simple way for engineers to rate and comment on any entity in Backstage. Think services, libraries, docs, or groups. It lets people give a quick signal with a like or a star rating. When someone gives a low rating, it can prompt for a short note so you capture what is missing or confusing. Those notes live with the entity so owners can review them in context.

The plugin also gives owners a view of how their stuff is doing across the catalog. You can scan totals and breakdowns to spot patterns. Maybe a service gets love but its docs trail behind. Maybe a new template needs polish. This helps teams turn vague complaints into clear work.

Use it when you want fast sentiment on a service launch. Use it to watch the effect of a doc rewrite over a few weeks. Use it to give platform teams a steady signal from users without another form. Because feedback is tied to entities, it fits how Backstage models your world. Engineers can rate in seconds during normal work. Owners can track trends and read the real comments that explain the numbers. It keeps the loop short so you can fix the right things sooner.

Install the frontend package

Run this from the Backstage root.

Copy

yarn --cwd packages/app add @backstage-community/plugin-entity-feedback

This plugin needs user identity. Do not test with the guest identity provider. It will not work.

Add UI to your classic EntityPage

Open packages app src components catalog EntityPage.tsx. Import the components.

Copy

import { InfoCard } from '@backstage/core-components';
import {
  EntityFeedbackResponseContent,
  EntityLikeDislikeRatingsCard,
  LikeDislikeButtons,
  // For star ratings use these instead
  // EntityStarredRatingsCard,
  // StarredRatingButtons,
} from '@backstage-community/plugin-entity-feedback';

Add rating buttons to each entity view you want to support. Place this in the overview content for those pages.

Copy

<Grid item md={2}>
  <InfoCard title="Rate this entity">
    <LikeDislikeButtons />
    {/* Or use star ratings */}
    {/* <StarredRatingButtons /> */}
  </InfoCard>
</Grid>

Add a Feedback tab to entity pages where owners should see responses.

Copy

<EntityLayout.Route path="/feedback" title="Feedback">
  <EntityFeedbackResponseContent />
</EntityLayout.Route>

Add a ratings card to user and group pages. This shows aggregated ratings for owned entities.

Copy

// In the user overview page content
<Grid item xs={12}>
  <EntityLikeDislikeRatingsCard />
  {/* Or use the starred variant */}
  {/* <EntityStarredRatingsCard /> */}
</Grid>

// In the group overview page content
<Grid item xs={12}>
  <EntityLikeDislikeRatingsCard />
  {/* Or use the starred variant */}
  {/* <EntityStarredRatingsCard /> */}
</Grid>

Use the new frontend system

You can enable the package by config or by code.

Enable by config

Add one of these to app config. Use the one that matches your setup.

Copy

# app-config.yaml
app:
  packages: 'all'

Copy

# app-config.yaml
app:
  packages:
    include:
      - '@backstage-community/plugin-entity-feedback'

You can also customize the installed extensions. The plugin provides one api, two entity cards, and one entity page content. Here are examples.

Copy

# app-config.yaml
app:
  extensions:
    # Disable the rating buttons card
    - 'entity-card:entity-feedback/ratings-buttons': false

    # Customize the rating buttons card
    - 'entity-card:entity-feedback/ratings-buttons':
        config:
          variant: 'starred'          # defaults to like-dislike
          title: 'Rating Buttons'     # defaults to Rate this entity
          requireResponse: false      # defaults to true
          dialogTitle: 'What could be better?'  # defaults to Tell us what could be better
          dialogResponses:            # defaults to Incorrect info, Missing info and Other
            - id: 'inaccurate'
              label: 'Inaccurate'
            - id: 'other'
              label: 'Other'

    # Disable the ratings table card
    - 'entity-card:entity-feedback/ratings-table': false

    # Customize the ratings table card
    - 'entity-card:entity-feedback/ratings-table':
        config:
          variant: 'starred'          # defaults to like-dislike
          title: 'Rating Table'       # defaults to Entity Ratings
          allEntities: true           # defaults to false

    # Disable the entity feedback content tab
    - 'entity-content:entity-feedback': false

    # Customize the entity feedback content tab
    - 'entity-content:entity-feedback':
        config:
          path: '/feedbacks'
          title: 'Feedbacks'

Enable by code

Add the feature to your app.

Copy

// packages/app/src/App.tsx
import { createApp } from '@backstage/frontend-defaults';
import entityFeedbackPlugin from '@backstage-community/plugin-entity-feedback/alpha';

const app = createApp({
  features: [
    entityFeedbackPlugin,
  ],
});

export default app.createRoot();

Install the backend package

Run this from the Backstage root.

Copy

yarn --cwd packages/backend add @backstage-community/plugin-entity-feedback-backend

Configure the backend old system

Create a plugin router file.

Copy

// packages/backend/src/plugins/entityFeedback.ts
import { Router } from 'express';
import { PluginEnvironment } from '../types';
import { createRouter } from '@backstage-community/plugin-entity-feedback-backend';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    discovery: env.discovery,
    database: env.database,
    identity: env.identity,
    auth: env.auth,
  });
}

Mount the router in the backend index.

Copy

// packages/backend/src/index.ts
import entityFeedback from './plugins/entityFeedback';

// inside the main function after creating apiRouter and envs
const entityFeedbackEnv = useHotMemoize(module, () => createEnv('entity-feedback'));
apiRouter.use('/entity-feedback', await entityFeedback(entityFeedbackEnv));

The frontend will reach this at the default api path. In most apps that is under api entity feedback.

Configure the backend new system

Add the backend module to the new backend app.

Copy

// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();

// other core modules you already add
// backend.add(import('@backstage/plugin-auth-backend'));
// backend.add(import('@backstage/plugin-catalog-backend/alpha'));

backend.add(import('@backstage-community/plugin-entity-feedback-backend'));

backend.start();

Notes on identity

This plugin needs a real user identity. Configure auth and identity in your app. The guest provider will not work.

Backstage Feedback Plugin

Installation Instructions

Install the frontend package

Add UI to your classic EntityPage

Use the new frontend system

Enable by config

Enable by code

Install the backend package

Configure the backend old system

Configure the backend new system

Notes on identity

Changelog

Features

Documentation

Maintenance

Set up Backstage in minutes with Roadie