diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index 7b150730..22443f27 100644 --- a/grafana-plugin/package.json +++ b/grafana-plugin/package.json @@ -104,9 +104,8 @@ "node": ">=14" }, "dependencies": { - "@grafana/faro-core": "^1.0.0-beta3", - "@grafana/faro-react": "^1.0.0-beta3", "@grafana/faro-web-sdk": "^1.0.0-beta3", + "@grafana/faro-web-tracing": "^1.0.0-beta3", "@opentelemetry/api": "^1.3.0", "array-move": "^4.0.0", "change-case": "^4.1.1", diff --git a/grafana-plugin/src/network/index.ts b/grafana-plugin/src/network/index.ts index 6763e965..cf9f37af 100644 --- a/grafana-plugin/src/network/index.ts +++ b/grafana-plugin/src/network/index.ts @@ -1,4 +1,4 @@ -import { faro } from '@grafana/faro-react'; +import { faro } from '@grafana/faro-web-sdk'; import { SpanStatusCode } from '@opentelemetry/api'; import axios from 'axios'; import qs from 'query-string'; @@ -37,18 +37,7 @@ export const makeRequest = async (path: string, config: RequestConfig) const url = `${API_PROXY_PREFIX}${API_PATH_PREFIX}${path}`; - const response = await instance({ - method, - url, - params, - data, - validateStatus, - }); - - // for now just return response.data and figure OTEL later on - return response.data as RT; - - const otel = faro.api.getOTEL(); + const otel = faro?.api?.getOTEL(); if (otel) { const tracer = otel.trace.getTracer('default'); @@ -92,12 +81,12 @@ export const makeRequest = async (path: string, config: RequestConfig) validateStatus, }); - faro.api.pushEvent('Request completed', { url }); + faro?.api?.pushEvent('Request completed', { url }); return response.data as RT; } catch (ex) { - faro.api.pushEvent('Request failed', { url }); - faro.api.pushError(ex); - throw ex; + faro?.api?.pushEvent('Request failed', { url }); + faro?.api?.pushError(ex); + return undefined; } }; diff --git a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx index 5530e3b3..cd9753aa 100644 --- a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx +++ b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useMemo, useState } from 'react'; -import { initializeFaro, getWebInstrumentations } from '@grafana/faro-react'; -import { TracingInstrumentation } from '@grafana/faro-web-tracing'; +import { initializeFaro, getWebInstrumentations } from '@grafana/faro-web-sdk'; +import { TracingInstrumentation, getDefaultOTELInstrumentations } from '@grafana/faro-web-tracing'; import { locationService } from '@grafana/runtime'; import classnames from 'classnames'; import dayjs from 'dayjs'; @@ -10,12 +10,13 @@ import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; import isoWeek from 'dayjs/plugin/isoWeek'; import localeData from 'dayjs/plugin/localeData'; import timezone from 'dayjs/plugin/timezone'; - import utc from 'dayjs/plugin/utc'; import weekday from 'dayjs/plugin/weekday'; import { observer, Provider } from 'mobx-react'; import Header from 'navbar/Header/Header'; import LegacyNavTabsBar from 'navbar/LegacyNavTabsBar'; + +import plugin from '../../package.json'; // eslint-disable-line import { AppRootProps } from 'types'; import Unauthorized from 'components/Unauthorized'; @@ -28,8 +29,6 @@ import { useStore } from 'state/useStore'; import { isUserActionAllowed } from 'utils/authorization'; import { useQueryParams, useQueryPath } from 'utils/hooks'; -import { FaroErrorBoundary } from '@grafana/faro-react'; - dayjs.extend(utc); dayjs.extend(timezone); dayjs.extend(weekday); @@ -45,8 +44,6 @@ import 'style/utils.css'; import { getQueryParams, isTopNavbar } from './GrafanaPluginRootPage.helpers'; import PluginSetup from './PluginSetup'; -import { RootBaseStore } from 'state/rootBaseStore'; - export const GrafanaPluginRootPage = (props: AppRootProps) => ( @@ -76,7 +73,7 @@ export const Root = observer((props: AppRootProps) => { document.head.appendChild(link); - initFaro(store); + initFaro(); return () => { document.head.removeChild(link); @@ -98,36 +95,34 @@ export const Root = observer((props: AppRootProps) => { const userHasAccess = pagePermissionAction ? isUserActionAllowed(pagePermissionAction) : true; return ( - - - {!isTopNavbar() && ( - <> -
- - - )} + + {!isTopNavbar() && ( + <> +
+ + + )} -
- {userHasAccess ? ( - - ) : ( - - )} -
- - +
+ {userHasAccess ? ( + + ) : ( + + )} +
+ ); }); -function initFaro(store: RootBaseStore) { +function initFaro() { const faro = initializeFaro({ url: `http://localhost:12345/collect`, apiKey: 'secret', @@ -135,19 +130,19 @@ function initFaro(store: RootBaseStore) { ...getWebInstrumentations({ captureConsole: true, }), - new TracingInstrumentation(), + new TracingInstrumentation({ + instrumentations: [...getDefaultOTELInstrumentations([/^((?!\/{0,1}a\/grafana\-oncall\-app\\).)*$/])], + }), ], session: (window as any).__PRELOADED_STATE__?.faro?.session, app: { - name: 'oncall', - version: '1.0.0', - environment: 'dev', + name: plugin?.name || 'Grafana OnCall', + version: plugin?.version || '1.0.0', + // environment: 'dev', // TODO: sort this out }, }); faro.api.pushLog(['Faro was initialized for Grafana On Call']); - - store.faro = faro; } function getPageMatchingComponent(pageId: string): (props?: any) => JSX.Element { diff --git a/grafana-plugin/src/state/rootBaseStore/index.ts b/grafana-plugin/src/state/rootBaseStore/index.ts index d30d13dd..6b069ca7 100644 --- a/grafana-plugin/src/state/rootBaseStore/index.ts +++ b/grafana-plugin/src/state/rootBaseStore/index.ts @@ -1,4 +1,3 @@ -import { Faro } from '@grafana/faro-core'; import { action, observable } from 'mobx'; import moment from 'moment-timezone'; import qs from 'query-string'; @@ -73,9 +72,6 @@ export class RootBaseStore { @observable onCallApiUrl: string; - @observable - faro: Faro = undefined; - // -------------------------- userStore: UserStore = new UserStore(this); diff --git a/grafana-plugin/yarn.lock b/grafana-plugin/yarn.lock index 8b6b11ab..3a44bb62 100644 --- a/grafana-plugin/yarn.lock +++ b/grafana-plugin/yarn.lock @@ -1614,15 +1614,6 @@ "@opentelemetry/otlp-transformer" "^0.34.0" fast-deep-equal "^3.1.3" -"@grafana/faro-react@^1.0.0-beta3": - version "1.0.0-beta3" - resolved "https://registry.yarnpkg.com/@grafana/faro-react/-/faro-react-1.0.0-beta3.tgz#f28ba2fba136cd6d0417f6894218f359a5cdc88e" - integrity sha512-E8aI8FPqzs9NgOa3ApfeCNtmhakgMgfg1xu0snNz7Gt0KHssoHyIYrOHlI/C45BhkSXRMetIvhJv/YQkE9Ua7Q== - dependencies: - "@grafana/faro-web-sdk" "^1.0.0-beta3" - "@grafana/faro-web-tracing" "^1.0.0-beta3" - hoist-non-react-statics "^3.3.2" - "@grafana/faro-web-sdk@1.0.0-beta2": version "1.0.0-beta2" resolved "https://registry.yarnpkg.com/@grafana/faro-web-sdk/-/faro-web-sdk-1.0.0-beta2.tgz#d096a350d6366a108428a205753c797802eb480d"