Get Roadie in your IDE with our new MCP Servers
Roadie
← Backstage Plugins Guides
New Relic Dashboard logo

Backstage New Relic Dashboard Plugin

Created by @timwheelercorn

New Relic dashboards help you see service health and business metrics in one place. You can build custom charts, query with NRQL, and share views across teams. This gives engineers a clear picture of what is happening and why.

The New Relic Dashboard plugin brings those dashboards into Backstage. It adds dashboard links on a service page overview. It can show near real time snapshots of your New Relic dashboards inside Backstage. You get the context of your catalog with the visuals you already trust, without a tab switch.

Under the hood it talks to New Relic through the Backstage proxy and uses NerdGraph. Your dashboards stay in New Relic. Backstage surfaces them beside ownership, docs, and runbooks. Common uses include incident triage, pre release checks, and onboarding sessions where a team walks through golden signals for a service. If you already rely on New Relic dashboards, this plugin meets you where you work and keeps your flow intact.

A screenshot of the GCP Projects plugin.

Installation Instructions

These instructions apply to self-hosted Backstage only. To use this plugin on Roadie, visit the docs.

Configure the proxy

This plugin uses the Backstage proxy to reach New Relic.

Add this to app-config.yaml

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

The API key must be a User type key in New Relic. In local development you can hard code it in app-config.local.yaml

Copy 
proxy:
  '/newrelic/apm/api':
    headers:
      X-Api-Key: NRRA-YourActualApiKey
    allowedHeaders:
      - link

Make sure the proxy backend plugin is running

If your app already has the proxy backend plugin you can keep it. If not, add it.

Legacy backend system

Add the dependency in the backend package

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

Create packages/backend/src/plugins/proxy.ts

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

export default async function createPlugin(env: PluginEnvironment) {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    discovery: env.discovery,
    tokenManager: env.tokenManager,
  });
}

Wire it in packages/backend/src/index.ts

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

// inside the main bootstrap function
const apiRouter = Router();

// other routers
apiRouter.use('/proxy', await proxy(env));

app.use('/api', apiRouter);

New backend system

Add the dependency in the backend package

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

Register the proxy plugin in packages/backend/src/index.ts

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

const backend = createBackend();
backend.add(proxyPlugin());
backend.start();

Install the New Relic plugin in the frontend

Add the dependency in the app package

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

Add the page route

Import the page and mount it at a route. Edit packages/app/src/App.tsx

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

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

Edit packages/app/src/components/Root/Root.tsx

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

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

Provide the API key at runtime

Set the variable before starting the backend

Copy 
export NEW_RELIC_REST_API_KEY=NRRA-YourActualApiKey

Changelog

This changelog is produced from commits made to the New Relic Dashboard plugin since a year ago. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Breaking changes

  • Change the plugin ID for the New Relic dashboard plugin in the new frontend system. Fix a conflict with the other New Relic plugin. #4780 merged 2 months ago

Features

  • Add support for the new frontend system for New Relic plugins. #4586 merged 2 months ago

Bug fixes

  • Rename the New Relic dashboards tab. #4605 merged 2 months ago

Maintenance

  • Remove unused dev dependency canvas. #3565 merged 5 months ago
  • Remove unused dev dependency canvas. #3637 merged 5 months ago
  • Reduce false positives in knip reports by updating repo tools. #3018 merged 6 months ago

Set up Backstage in minutes with Roadie

Get a demo