diff --git a/packages/grafana-runtime/src/utils/logging.ts b/packages/grafana-runtime/src/utils/logging.ts index b4369298ce7..5443f264cba 100644 --- a/packages/grafana-runtime/src/utils/logging.ts +++ b/packages/grafana-runtime/src/utils/logging.ts @@ -76,10 +76,7 @@ export function logDebug(message: string, contexts?: Contexts) { */ export function logError(err: Error, contexts?: Contexts) { if (config.grafanaJavascriptAgent.enabled) { - faro.api.pushLog([err.message], { - level: GrafanaLogLevel.ERROR, - context: contexts, - }); + faro.api.pushError(err); } if (config.sentry.enabled) { captureException(err, { contexts }); diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 660c046da69..570b58d2d7f 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -51,6 +51,7 @@ "@emotion/react": "11.10.6", "@grafana/data": "9.5.0-pre", "@grafana/e2e-selectors": "9.5.0-pre", + "@grafana/faro-web-sdk": "1.0.2", "@grafana/schema": "9.5.0-pre", "@leeoniya/ufuzzy": "1.0.6", "@monaco-editor/react": "4.4.6", diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.test.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.test.tsx index 62d888eccf8..72eb6d9084b 100644 --- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.test.tsx +++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.test.tsx @@ -2,9 +2,18 @@ import { captureException } from '@sentry/browser'; import { render, screen } from '@testing-library/react'; import React, { FC } from 'react'; +import { faro } from '@grafana/faro-web-sdk'; + import { ErrorBoundary } from './ErrorBoundary'; jest.mock('@sentry/browser'); +jest.mock('@grafana/faro-web-sdk', () => ({ + faro: { + api: { + pushError: jest.fn(), + }, + }, +})); const ErrorThrower: FC<{ error: Error }> = ({ error }) => { throw error; @@ -44,6 +53,8 @@ describe('ErrorBoundary', () => { expect(context.contexts).toHaveProperty('react'); expect(context.contexts.react).toHaveProperty('componentStack'); expect(context.contexts.react.componentStack).toMatch(/^\s+at ErrorThrower (.*)\s+at ErrorBoundary (.*)\s*$/); + expect(faro.api.pushError).toHaveBeenCalledTimes(1); + expect((faro.api.pushError as jest.Mock).mock.calls[0][0]).toBe(problem); }); it('should recover when when recover props change', async () => { diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx index cb00ad35e09..2afe61423cc 100644 --- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx @@ -1,6 +1,8 @@ import { captureException } from '@sentry/browser'; import React, { PureComponent, ReactNode, ComponentType } from 'react'; +import { faro } from '@grafana/faro-web-sdk'; + import { Alert } from '../Alert/Alert'; import { ErrorWithStack } from './ErrorWithStack'; @@ -37,6 +39,7 @@ export class ErrorBoundary extends PureComponent { componentDidCatch(error: Error, errorInfo: ErrorInfo) { captureException(error, { contexts: { react: { componentStack: errorInfo.componentStack } } }); + faro?.api?.pushError(error); this.setState({ error, errorInfo }); if (this.props.onError) { diff --git a/yarn.lock b/yarn.lock index 40785b588b8..4b1eccbe4dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5491,6 +5491,7 @@ __metadata: "@emotion/react": 11.10.6 "@grafana/data": 9.5.0-pre "@grafana/e2e-selectors": 9.5.0-pre + "@grafana/faro-web-sdk": 1.0.2 "@grafana/schema": 9.5.0-pre "@grafana/tsconfig": ^1.2.0-rc1 "@leeoniya/ufuzzy": 1.0.6