Backstage New Relic Plugin

New Relic is an observability platform for engineers. It helps you monitor services, apps, and infrastructure in one place. You get performance data, traces, logs, and alerts, all tied to the code you run.

The New Relic plugin brings that context into Backstage. You can open a single page and see APM data for your services. Typical fields include latency, throughput per minute, error rate, instance counts, and apdex. It fits common workflows. During a release you can check a service page, spot a spike, then jump to New Relic for deeper drill downs. In day to day work it reduces tab switching and keeps health next to ownership data in the catalog.

Teams in the community connect Backstage to New Relic in different ways. Spotify ships a New Relic integration inside Soundcheck that collects facts from New Relic. They describe it as “leveraging NewRelic’s NerdGraph API.” See the docs at the Spotify site.Today this plugin focuses on APM data. That makes it a simple way to start adding observability to your portal. If New Relic is already your source of truth, the plugin lets your service owners bring key signals into the same place where they discover components, read docs, and track ownership.

Configure the Backstage proxy

This plugin calls New Relic through the Backstage proxy. Add this config to your app config file.

Base config

Copy

# app-config.yaml
proxy:
  '/newrelic/apm/api':
    target: https://api.newrelic.com/v2
    headers:
      X-Api-Key: ${NEW_RELIC_REST_API_KEY}
    allowedHeaders:
      - link

Use a New Relic user type API key. Set the NEW_RELIC_REST_API_KEY environment variable in your backend process.

Local config for development

Copy

# app-config.local.yaml
proxy:
  '/newrelic/apm/api':
    headers:
      X-Api-Key: NRRA-YourActualApiKey
    allowedHeaders:
      - link

Install the frontend package

Run this from your Backstage root

Copy

yarn --cwd packages/app add @backstage-community/plugin-newrelic

Wire up the page in a classic frontend app

Add the route to your app so the page is visible.

Copy

// packages/app/src/App.tsx
import React from 'react';
import { FlatRoutes } from '@backstage/core-app-api';
import { Route } from 'react-router-dom';
import { NewRelicPage } from '@backstage-community/plugin-newrelic';

export const AppRoutes = () => (
  <FlatRoutes>
    {/* other routes */}
    <Route path="/newrelic" element={<NewRelicPage />} />
  </FlatRoutes>
);

Copy

// packages/app/src/components/Root/Root.tsx
import React, { PropsWithChildren } from 'react';
import ExtensionIcon from '@material-ui/icons/ExtensionOutlined';
import {
  SidebarPage,
  Sidebar,
  SidebarItem,
} from '@backstage/core-components';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      {/* other items */}
      <SidebarItem icon={ExtensionIcon} to="newrelic" text="New Relic" />
      {/* other items */}
    </Sidebar>
    {children}
  </SidebarPage>
);

Use the new frontend system

If your app uses the new frontend system, add the plugin feature. It registers its page and a nav item.

Copy

// packages/app/src/App.tsx
import { createApp } from '@backstage/frontend-app-api';
import newRelic from '@backstage-community/plugin-newrelic/alpha';

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

export default app.createRoot();

You can keep using the classic sidebar item if you prefer. The route path is newrelic.

Backend setup classic backend

Most Backstage backends already include the proxy backend plugin. If yours does not, add it.

Install the package if missing

Copy

yarn --cwd packages/backend add @backstage/plugin-proxy-backend

Create a plugin router and mount it in the backend

Copy

// packages/backend/src/plugins/proxy.ts
import { LoggerService } from '@backstage/backend-plugin-api';
import { createRouter } from '@backstage/plugin-proxy-backend';
import { Config } from '@backstage/config';
import { Router } from 'express';

export async function createPlugin(
  options: { logger: LoggerService; config: Config },
): Promise<Router> {
  const { logger, config } = options;
  return await createRouter({ logger, config });
}

Copy

// packages/backend/src/index.ts
import { createServiceBuilder } from '@backstage/backend-common';
import { loadBackendConfig } from '@backstage/backend-common';
import { Logger } from 'winston';
import { createPlugin as createProxyPlugin } from './plugins/proxy';

async function main() {
  const config = await loadBackendConfig();
  const logger = /* your logger */ {} as Logger;

  const service = createServiceBuilder(module)
    .setPort(7007)
    .addRouter('', await createProxyPlugin({ logger, config }));

  await service.start();
}

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

The proxy uses the config you added earlier. No extra routing changes are needed for this plugin.

Backend setup new backend system

If you use the new backend system, add the proxy backend module.

Install the package if missing

Copy

yarn --cwd packages/backend add @backstage/plugin-proxy-backend

Copy

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

const backend = createBackend();

// other backend modules
backend.add(import('@backstage/plugin-app-backend/alpha'));
backend.add(import('@backstage/plugin-proxy-backend/alpha'));

backend.start();

The proxy reads the same config you added in app config. No extra code is required for this plugin.

Backstage New Relic Plugin

Installation Instructions

Configure the Backstage proxy

Base config

Local config for development

Install the frontend package

Wire up the page in a classic frontend app

Add a sidebar link in a classic app

Use the new frontend system

Backend setup classic backend

Backend setup new backend system

Changelog

Breaking changes

Features

Bug fixes

Set up Backstage in minutes with Roadie