Logging: Report error boundary errors to Faro (#65164)

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 });

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",

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 () => {

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<Props, State> {
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     captureException(error, { contexts: { react: { componentStack: errorInfo.componentStack } } });
+    faro?.api?.pushError(error);
     this.setState({ error, errorInfo });
 
     if (this.props.onError) {

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