From d88b32361fc54250694706fd45ab941fe00db43e Mon Sep 17 00:00:00 2001
From: Karan Shah <karan.shah@simplybusiness.co.uk>
Date: Mon, 28 Feb 2022 11:21:30 +0000
Subject: [PATCH] Update the Airbrake installation instructions

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>
---
 plugins/airbrake/README.md | 64 ++++++++++++++++++++++++++++++--------
 1 file changed, 51 insertions(+), 13 deletions(-)

diff --git a/plugins/airbrake/README.md b/plugins/airbrake/README.md
index d5ea9bb006..28c230fb05 100644
--- a/plugins/airbrake/README.md
+++ b/plugins/airbrake/README.md
@@ -20,7 +20,7 @@ The Airbrake plugin provides connectivity between Backstage and Airbrake (https:
    yarn add @backstage/plugin-airbrake-backend
    ```
 
-3. Add the `EntityAirbrakeContent` to `packages/app/src/components/catalog/EntityPage.tsx`:
+3. Add the `EntityAirbrakeContent` to `packages/app/src/components/catalog/EntityPage.tsx` for all entity pages you want Airbrake to be in:
 
    ```typescript jsx
    import { EntityAirbrakeContent } from '@backstage/plugin-airbrake';
@@ -32,40 +32,78 @@ The Airbrake plugin provides connectivity between Backstage and Airbrake (https:
        </EntityLayout.Route>
      </EntityLayoutWrapper>
    );
+
+   const websiteEntityPage = (
+     <EntityLayoutWrapper>
+       <EntityLayout.Route path="/airbrake" title="Airbrake">
+         <EntityAirbrakeContent />
+       </EntityLayout.Route>
+     </EntityLayoutWrapper>
+   );
+
+   const defaultEntityPage = (
+     <EntityLayoutWrapper>
+       <EntityLayout.Route path="/airbrake" title="Airbrake">
+         <EntityAirbrakeContent />
+       </EntityLayout.Route>
+     </EntityLayoutWrapper>
+   );
    ```
 
-4. Setup the Backend code in `packages/backend/src/index.ts`:
+4. Create `packages/backend/src/plugins/airbrake.ts` with these contents:
 
    ```typescript
+   import { Router } from 'express';
+   import { PluginEnvironment } from '../types';
    import {
-     createRouter as createAirbrakeRouter,
+     createRouter,
      extractAirbrakeConfig,
    } from '@backstage/plugin-airbrake-backend';
 
-   async function main() {
-     //... After const config = await loadBackendConfig({ ...
-
-     const airbrakeRouter = await createAirbrakeRouter({
+   export default async function createPlugin({
+     logger,
+     config,
+   }: PluginEnvironment): Promise<Router> {
+     return createRouter({
        logger,
        airbrakeConfig: extractAirbrakeConfig(config),
      });
-
-     const service = createServiceBuilder(module)
-       // ... Add the airbrakeRouter here
-       .addRouter('/api/airbrake', airbrakeRouter);
    }
    ```
 
-5. Add this config as a top level section in your `app-config.yaml`:
+5. Setup the Backend code in `packages/backend/src/index.ts`:
+
+   ```typescript
+   import airbrake from './plugins/airbrake';
+
+   async function main() {
+     //... After const createEnv = makeCreateEnv(config) ...
+
+     const airbrakeEnv = useHotMemoize(module, () => createEnv('airbrake'));
+
+     //... After const apiRouter = Router() ...
+     apiRouter.use('/airbrake', await airbrake(airbrakeEnv));
+   }
+   ```
+
+6. Add this config as a top level section in your `app-config.yaml`:
 
    ```yaml
    airbrake:
      apiKey: ${AIRBRAKE_API_KEY}
    ```
 
-6. Set an environment variable `AIRBRAKE_API_KEY` with your [API key](https://airbrake.io/docs/api/#authentication)
+7. Set an environment variable `AIRBRAKE_API_KEY` with your [API key](https://airbrake.io/docs/api/#authentication)
    before starting Backstage backend.
 
+8. Add the following annotation to the `catalog-info.yaml` for a repo you want to link to an Airbrake project:
+
+   ```yaml
+   metadata:
+     annotations:
+       airbrake.io/project-id: '123456'
+   ```
+
 ## Local Development
 
 Start this plugin in standalone mode by running `yarn start` inside the plugin directory. This method of serving the plugin provides quicker