Get Roadie in your IDE with our new MCP Servers
Roadie
← Backstage Plugins Guides
Nobl9 logo

Backstage Nobl9 Plugin

Created by Nobl9

Nobl9 is a reliability platform built around SLOs and error budgets. It connects to your existing telemetry. It helps you define and track the targets that reflect real user impact. Teams use it to see budget burn, understand risk, and make clearer tradeoffs.

The Nobl9 plugin brings those SLOs into Backstage. It adds an entity tab that shows status, burn rate, remaining error budget, and labels for the services you annotate. A small backend in your Backstage app talks to the Nobl9 SLO Status API so the UI can load fresh data without extra glue. You choose which projects, services, or SLOs appear for each catalog entity. The result is a single place where engineers can explore a service and see its reliability at a glance.

Common use cases include on call prep and incident follow up. You can open a service page and check how fast the budget is burning before a risky deploy. During an incident you can confirm which SLO is breaching and share the same view with product. Platform teams use the plugin to standardize SLO visibility across the catalog so teams do not bounce between tools to answer basic reliability questions.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Get Nobl9 API credentials

  • Create a Nobl9 access key in your Nobl9 account
  • Copy the client ID and client secret
  • Find your organization ID in Nobl9 under Settings then Account

You will use these in your Backstage config.

Install the backend plugin with the new Backstage backend system

  1. Add the backend package
Copy 
yarn workspace backend add @nobl9/nobl9-backstage-backend-plugin
  1. Register the backend plugin

Edit packages/backend/src/index.ts and add a line to load the plugin module.

Copy 
// packages/backend/src/index.ts
// other imports above stay as they are

// nobl9 plugin
backend.add(import('@nobl9/nobl9-backstage-backend-plugin'));

backend.start();

The plugin serves its API under the nobl9 backend path used by the UI. You can change the path with config if needed. See the config section below.

Install the backend plugin with the legacy Backstage backend

Use this only if your backend still uses the legacy ServiceBuilder pattern.

  1. Add the backend package
Copy 
yarn workspace backend add @nobl9/nobl9-backstage-backend-plugin
  1. Create a plugin router file

Create packages/backend/src/plugins/nobl9.ts with the router. This pattern matches how legacy Backstage mounts plugin routers.

Copy 
// packages/backend/src/plugins/nobl9.ts
import { PluginEnvironment } from '../types';
import { createRouter } from '@nobl9/nobl9-backstage-backend-plugin';
import express from 'express';

export default async function createPlugin(env: PluginEnvironment): Promise<express.Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    discovery: env.discovery,
  });
}
  1. Mount the router

Edit packages/backend/src/index.ts to create a plugin env and mount the router under the same path the UI expects.

Copy 
// packages/backend/src/index.ts
import nobl9 from './plugins/nobl9';
// other imports remain the same

async function main() {
  const logger = getRootLogger();
  const env = await createEnv('nobl9'); // follow your app pattern for createEnv

  // mount under the default path
  apiRouter.use('/nobl9-backend', await nobl9(env));

  // the rest of your server setup stays the same
}

main().catch(error => {
  process.exit(1);
});

Adjust createEnv and apiRouter names to match your app. Many legacy apps expose routers under app.use(‘/api’, apiRouter). In that case the full path becomes api nobl9 backend.

Install the UI plugin

  1. Add the UI package
Copy 
yarn workspace app add @nobl9/nobl9-backstage-plugin
  1. Add the SLOs tab to the entity page

Edit packages/app/src/components/catalog/EntityPage.tsx. Import the page component and the visibility helper, then add a new route in the service entity layout.

Copy 
// packages/app/src/components/catalog/EntityPage.tsx
import { Nobl9Page, isNobl9Available } from '@nobl9/nobl9-backstage-plugin';

// inside your serviceEntityPage layout
<EntityLayout.Route path="/slos" title="SLOs" if={isNobl9Available}>
  <Nobl9Page />
</EntityLayout.Route>

You can place this route anywhere inside your EntityLayout for services. Use the same pattern for other kinds if you need it.

Configure the plugin

Add a nobl9 section to your Backstage config. You can set secrets with environment variables.

Copy 
# app-config.yaml
nobl9:
  baseUrl: https://app.nobl9.com
  organization: ${NOBL9_ORGANIZATION_ID}
  clientId: ${NOBL9_CLIENT_ID}
  clientSecret: ${NOBL9_CLIENT_SECRET}

If your backend plugins are not served under the api prefix, set a custom backend path.

Copy 
# app-config.yaml
nobl9:
  baseUrl: https://app.nobl9.com
  organization: ${NOBL9_ORGANIZATION_ID}
  clientId: ${NOBL9_CLIENT_ID}
  clientSecret: ${NOBL9_CLIENT_SECRET}
  backendPluginPath: /nobl9-backend/slos

Annotate catalog entities

Add annotations to entities you want to show SLOs for. The project annotation is required. You can narrow by services or SLO names. Multiple filters use an AND operator.

Component with all SLOs from the default project

Copy 
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: service1
  annotations:
    nobl9.com/project: default
spec:
  type: service
  lifecycle: production
  owner: io
  system: nobl9

Component with all SLOs for one service in the default project

Copy 
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: service1
  annotations:
    nobl9.com/project: default
    nobl9.com/services: service1
spec:
  type: service
  lifecycle: production
  owner: io
  system: nobl9

Component with two SLOs named latency and error rate in the default project

Copy 
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: services2
  annotations:
    nobl9.com/project: default
    nobl9.com/slos: latency,error-rate
spec:
  type: service
  lifecycle: production
  owner: foundations
  system: nobl9

Changelog

This changelog is produced from commits made to the Nobl9 plugin since 6 months 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

  • Update @backstage/cli to v0.34.0

Rspack build becomes default. The EXPERIMENTAL_RSPACK flag is removed. Support for .icon.svg imports is removed. You can set LEGACY_WEBPACK_BUILD to use the old webpack build if needed. #134 merged 2 months ago

Security

  • Mark backend credentials as secret in config schema

Secrets now redact in the DevTools Config view. #129 merged 3 months ago

  • Update tar fs to v2.1.4 to address an upstream advisory

#135 merged 2 weeks ago

  • Update tar fs to v2.1.3 to patch an upstream advisory

#115 merged 4 months ago

Improvements

  • Update @backstage/theme to v0.6.7

Improves focus styles in menus. Softens colors in home page cards. #123 merged 3 months ago

Set up Backstage in minutes with Roadie

Get a demo