Bu sayfanın Türkçesi de var. Türkçe oku → Close

Embed widget guide

The ready-made React components let you show Errorbird data in your customer's own dashboard. This is where the real value lies for agencies: the end customer never sees Errorbird, they see the data in their own dashboard under their own brand.

npm install @errorbird/client @errorbird/react

Setup

The components run inside a shared provider. The provider reads both the client and the branding settings (color, logo, white-label) from the server and passes them to the components:

import { ErrorbirdProvider, ErrorbirdIssueList, ErrorbirdUptimeBadge } from '@errorbird/react'

export function CustomerDashboard() {
  return (
    <ErrorbirdProvider apiKey="ebrd_pub_…" projectId="01a01b…">
      <ErrorbirdUptimeBadge monitorId="01a01c…" days={30} />
      <ErrorbirdIssueList limit={5} title="Latest errors" />
    </ErrorbirdProvider>
  )
}

Components

The components fetch their own data and cancel the request when they unmount; you do not need to set up a separate data layer.

White-label

ErrorbirdProvider automatically reads the branding settings of the ClientWorkspace the project belongs to:

• The accent color is used as the components' accent color.
• The logo and the workspace name appear in headings.
• With white-label on, the Errorbird brand appears in no component.

Branding is changed in the dashboard under Agency console → Branding; do not hard-code colors in your component code — you would have to redeploy whenever the customer changes their brand.

Security

The components run in the browser and use the publishable key. This key:

• can only read,
• is accepted only from origins on its allowed domain list,
• can only access its own project's data.

The key ending up in your bundle is expected; the design assumes it. The secret key, however, must never be put in client code.

Writing your own component

The ready-made components are built on @errorbird/client and use no privileged API. If you need something different, write your own component with the same client:

import { useErrorbird } from '@errorbird/react'

function QuotaIndicator() {
  const { client } = useErrorbird()
  const [summary, setSummary] = useState(null)

  useEffect(() => {
    const controller = new AbortController()
    client.getSummary(controller.signal).then(setSummary).catch(() => {})
    return () => controller.abort()
  }, [client])

  return <span>{summary?.events.thisMonth ?? '—'}</span>
}

Framework-independent use

If you do not use React, @errorbird/client is enough on its own; the components are a thin layer over it. You can fetch the same data with Vue, Svelte or plain JavaScript and build your own view.