Files

T

ImgBotApp 68db610ce5 [ImgBot] Optimize images

*Total -- 1,143.96kb -> 883.47kb (22.77%)

/microsite/blog/assets/2020-12-22/versions-bump.png -- 143.92kb -> 82.45kb (42.71%)
/plugins/fossa/docs/fossa-card.png -- 60.17kb -> 40.17kb (33.24%)
/plugins/sentry/docs/sentry-card.png -- 142.60kb -> 96.30kb (32.47%)
/plugins/lighthouse/images/audit-view.png -- 143.60kb -> 99.46kb (30.74%)
/plugins/lighthouse/images/lighthouse-page.png -- 130.63kb -> 91.65kb (29.84%)
/docs/assets/software-catalog/bsc-register-2.png -- 128.51kb -> 100.98kb (21.42%)
/microsite/blog/assets/2020-12-22/stability-index-hero.gif -- 391.12kb -> 369.08kb (5.63%)
/plugins/pagerduty/src/assets/emptystate.svg -- 3.41kb -> 3.37kb (1.06%)

Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>

2021-01-04 16:41:13 +00:00

dev

Setup a devapp for Sentry that shows the different states of the widget

2020-12-08 16:53:51 +01:00

docs

[ImgBot] Optimize images

2021-01-04 16:41:13 +00:00

src

remove React's FC type from codebase (#3527 )

2020-12-10 11:23:29 +01:00

.eslintrc.js

Add Sentry plugin front-end

2020-05-20 12:12:57 +02:00

CHANGELOG.md

Version Packages

2020-12-17 10:16:33 +00:00

config.d.ts

Introduced config schema for plugins/sentry

2020-12-12 12:27:15 +05:30

package.json

Version Packages

2020-12-29 10:59:38 +00:00

README.md

Refactor the Sentry plugin to use the proxy backend instead of a custom backend

2020-12-07 17:21:59 +01:00

README.md

Sentry Plugin

The Sentry Plugin displays issues from Sentry.

Getting Started

Install the Sentry Plugin:

# packages/app

yarn add @backstage/plugin-sentry

Add plugin to the app:

// packages/app/src/plugins.ts

export { plugin as Sentry } from '@backstage/plugin-sentry';

Add the SentryIssuesWidget to the EntityPage:

// packages/app/src/components/catalog/EntityPage.tsx

import { SentryIssuesWidget } from '@backstage/plugin-sentry';

const OverviewContent = ({ entity }: { entity: Entity }) => (
  <Grid container spacing={3} alignItems="stretch">
    // ...
    <Grid item xs={12} sm={6} md={4}>
      <SentryIssuesWidget entity={entity} />
    </Grid>
    // ...
  </Grid>
);

You can also import a Router if you want to have a dedicated sentry page:

// packages/app/src/components/catalog/EntityPage.tsx

import { Router as SentryRouter } from '@backstage/plugin-sentry';

const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
  <EntityPageLayout>
    // ...
    <EntityPageLayout.Content
      path="/sentry"
      title="Sentry"
      element={<SentryRouter entity={entity} />}
    />
    // ...
  </EntityPageLayout>
);

Add the proxy config:

# app-config.yaml

proxy:
  '/sentry/api':
    target: https://sentry.io/api/
    allowedMethods: ['GET']
    headers:
      Authorization:
        # Content: 'Bearer <your-sentry-token>'
        $env: SENTRY_TOKEN

sentry:
  organization: <your-organization>

Create a new internal integration with the permissions Issues & Events: Read (https://docs.sentry.io/product/integrations/integration-platform/) and provide it as SENTRY_TOKEN as env variable.
Add the sentry.io/project-slug annotation to your catalog-info.yaml file:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage
  description: |
    Backstage is an open-source developer portal that puts the developer experience first.
  annotations:
    sentry.io/project-slug: YOUR_PROJECT_SLUG
spec:
  type: library
  owner: CNCF
  lifecycle: experimental

Demo Mode

The plugin provides a MockAPI that always returns dummy data instead of talking to the sentry backend. You can add it by overriding the sentryApiRef:

// packages/app/src/apis.ts

import { createApiFactory } from '@backstage/core';
import { MockSentryApi, sentryApiRef } from '@backstage/plugin-sentry';

export const apis = [
  // ...

  createApiFactory(sentryApiRef, new MockSentryApi()),
];