Rollbar logo

Backstage Rollbar Plugin

Created by @andrewthauer

Rollbar is an error monitoring and tracking service. It collects errors from your apps, groups them into issues, and shows what to fix first. Teams use it to spot new problems quickly and understand impact without digging through logs.

The Rollbar plugin brings that view into Backstage. It adds a Rollbar tab to any catalog entity that carries the rollbar.com/project-slug annotation. Inside that tab you can see the top active items for the linked project. You can focus on a time window that matters to you and view data by environment. The plugin supports a custom environment name when your setup differs from the default.

This fits common workflows. Service owners get a single place to watch errors next to docs, ownership, and on call info. On call engineers can triage faster during incidents. Platform teams can make error status visible across many services without extra tooling.

The frontend talks to Rollbar through a small backend proxy in your Backstage. That avoids exposing tokens in the browser. Keep in mind that Rollbar applies rate limits per token.

A screenshot of the Rollbar plugin. It is showing a list of errors.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the frontend package

  1. From your Backstage root run
Copy
yarn --cwd packages/app add @backstage-community/plugin-rollbar

Add the Rollbar tab to the service entity page

  1. Open packages/app/src/components/catalog/EntityPage.tsx
  2. Import the component
Copy
import { EntityRollbarContent } from '@backstage-community/plugin-rollbar';
  1. Add a tab on the service entity page
Copy
// packages/app/src/components/catalog/EntityPage.tsx

import React from 'react';
import { EntityLayout } from '@backstage/plugin-catalog';

import { EntityRollbarContent } from '@backstage-community/plugin-rollbar';

const serviceEntityPage = (
  <EntityLayout>
    {/* other tabs */}
    <EntityLayout.Route path="/rollbar" title="Rollbar">
      <EntityRollbarContent />
    </EntityLayout.Route>
  </EntityLayout>
);

export default serviceEntityPage;

Optional logic to show the tab only when annotated

Copy
import { isRollbarAvailable } from '@backstage-community/plugin-rollbar';

// inside the layout
{isRollbarAvailable(entity) && (
  <EntityLayout.Route path="/rollbar" title="Rollbar">
    <EntityRollbarContent />
  </EntityLayout.Route>
)}

Register the Rollbar API in the app

  1. Open packages/app/src/apis.ts
  2. Add a factory for the client
Copy
// packages/app/src/apis.ts

import {
  AnyApiFactory,
  ConfigApi,
  configApiRef,
  createApiFactory,
  discoveryApiRef,
  identityApiRef,
} from '@backstage/core-plugin-api';

import {
  rollbarApiRef,
  RollbarClient,
} from '@backstage-community/plugin-rollbar';

export const apis: AnyApiFactory[] = [
  // existing factories

  createApiFactory({
    api: rollbarApiRef,
    deps: { discoveryApi: discoveryApiRef, identityApi: identityApiRef },
    factory: ({ discoveryApi, identityApi }) =>
      new RollbarClient({ discoveryApi, identityApi }),
  }),
];

Configure app config

  1. Add this to app-config.yaml
Copy
rollbar:
  organization: organization-name
  accountToken: ${ROLLBAR_ACCOUNT_TOKEN}
  1. Set the environment variable in your runtime environment
Copy
export ROLLBAR_ACCOUNT_TOKEN=your-account-token

Annotate catalog entities

  1. Add the project slug to the entity in your catalog file
Copy
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: pump-station
  annotations:
    rollbar.com/project-slug: organization-name/project-name
    # or just the project if organization matches your configured organization
    # rollbar.com/project-slug: project-name

    # optional environment
    # default is production
    rollbar.com/environment: environment-name
spec:
  type: service
  owner: team-a
  lifecycle: production

Install the backend package

Copy
yarn --cwd packages/backend add @backstage-community/plugin-rollbar-backend

New backend system

  1. Open packages/backend/src/index.ts
  2. Add the Rollbar backend module
  3. Use the variant that matches your package exports

Option A

Copy
// packages/backend/src/index.ts

import { createBackend } from '@backstage/backend-defaults';
import { rollbarPlugin } from '@backstage-community/plugin-rollbar-backend';

const backend = createBackend();

backend.add(rollbarPlugin());

backend.start();

Option B

Copy
// packages/backend/src/index.ts

import { createBackend } from '@backstage/backend-defaults';
import { rollbarModule } from '@backstage-community/plugin-rollbar-backend';

const backend = createBackend();

backend.add(rollbarModule());

backend.start();

Classic backend system

  1. Create a plugin file at packages/backend/src/plugins/rollbar.ts
Copy
// packages/backend/src/plugins/rollbar.ts

import { Router } from 'express';
import { PluginEnvironment } from '../types';
import { createRouter } from '@backstage-community/plugin-rollbar-backend';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    discovery: env.discovery,
    identity: env.identity,
    tokenManager: env.tokenManager,
  });
}
  1. Wire the router in packages/backend/src/index.ts
Copy
// packages/backend/src/index.ts

import rollbar from './plugins/rollbar';

// inside the main bootstrap function
const rollbarRouter = await rollbar(env);
apiRouter.use('/rollbar', rollbarRouter);

Things to Know

You can find account access tokens by navigating to your organization settings -> Account Access Tokens in your Rollbar account.

Rollbar access token page

Changelog

This changelog is produced from commits made to the Rollbar plugin since a year ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Breaking changes

  • Remove the deprecated legacy backend interface in the Rollbar backend #4778 1 month ago
    Use the current backend interface

Features

  • Allow a custom Rollbar environment per component with an optional annotation #4777 12 days ago
    The catalog page can show items from test or QA environments

Fixes

  • Evict stale Rollbar project data when a project access token expires #4776 27 days ago
    Use the cache service to refresh tokens without a restart

Documentation

  • Update README links to point to the community plugins repository #3931 4 months ago

Chore

  • Remove unused canvas dev dependency #3565 5 months ago
  • Reduce knip false positives by using a single workspace config #3018 6 months ago
  • Remove usage of the backend common package in Rollbar code #1956 10 months ago

Set up Backstage in minutes with Roadie