Commit e500b5eb authored by Muhammad Umair Khan's avatar Muhammad Umair Khan
Browse files

Introduce frontend observability with Grafana Faro SDK 

This commit integrates the Grafana Faro Web SDK into the React frontend to enable comprehensive telemetry collection and observability.

- Integrated Grafana Faro SDK to collect and forward browser metrics, logs, and network traces.
- Implemented a custom Redux telemetry middleware to capture and log key state changes and user interactions.
- Added a Higher-Order Component (HOC) to trace React component mount and unmount lifecycles for UI debugging.
- Configured Webpack to use content-based hashing ([contenthash]) to ensure proper cache busting when deploying frontend updates.
- Included Playwright testing scripts to verify end-to-end telemetry flows.
- Updated package configurations to include the required observability dependencies.
parent c10c764c

js-apps/frontend/package-lock.json

+616 −3

File changed.

Preview size limit exceeded, changes collapsed.

js-apps/frontend/package.json

+2 −0
Original line number Diff line number Diff line
@@ -35,6 +35,8 @@ 
    "webpack-dev-server": "^6.0.0"

  },

  "dependencies": {

    "@grafana/faro-web-sdk": "^2.9.0",

    "@grafana/faro-web-tracing": "^2.9.0",

    "@material-ui/core": "^4.12.4",

    "http-status-codes": "^2.1.4",

    "ionicons": "^2.0.1",

js-apps/frontend/src/css/app-controller.scss

+16 −0
Original line number Diff line number Diff line
@@ -177,3 +177,19 @@ select { 
    font-family: 'Roboto';

    font-weight: 600;

}



/* Premium Page Transitions */

.fade-in-page {

  animation: fadeIn 0.4s ease-out forwards;

}



@keyframes fadeIn {

  0% {

    opacity: 0;

    transform: translateY(15px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

js-apps/frontend/src/js/app-controller.js

+38 −1
Original line number Diff line number Diff line
@@ -30,6 +30,42 @@ import log from './util/logger'; 


// Get state from local storage

// Set state to 'undefined' to use default values

const SBOX_LOCAL_STORAGE_STATE = 'mec-sbox-state';



// Remote logger for debugging

const originalLog = console.log;

const originalError = console.error;

const originalWarn = console.warn;

const sendLog = (type, args) => {

  try {

    const msg = encodeURIComponent(type + ': ' + Array.from(args).map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' '));

    fetch('/platform-ctrl/v1/frontend-log?msg=' + msg).catch(() => {});

  } catch (e) {}

};

console.log = function() { originalLog.apply(console, arguments); sendLog('LOG', arguments); };

console.error = function() { originalError.apply(console, arguments); sendLog('ERR', arguments); };

console.warn = function() { originalWarn.apply(console, arguments); sendLog('WARN', arguments); };



import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';

import { TracingInstrumentation } from '@grafana/faro-web-tracing';

import { telemetryMiddleware } from './state/telemetry-middleware';



// Initialize Grafana Faro

initializeFaro({

  url: window.location.origin + '/telemetry/collect', // Uses the Ingress route

  app: {

    name: 'mec-sandbox-frontend',

    version: '1.0.0',

    environment: 'development'

  },

  instrumentations: [

    ...getWebInstrumentations(),

    new TracingInstrumentation()

  ]

});



// Setup logging



var loadedState = loadState();



// Redux logger middleware
@@ -46,7 +82,8 @@ const appStore = createStore( 
  loadedState ? loadedState : undefined,

  applyMiddleware(

    thunk,

    logger

    logger,

    telemetryMiddleware

  )

);

window.appStore = appStore;

js-apps/frontend/src/js/components/dialogs/help-getting-started-dialog.js

+3 −1
Original line number Diff line number Diff line
@@ -12,6 +12,8 @@ import { 
  uiChangeHelpOnSignIn

} from '../../state/ui';



import { withTelemetry } from '../../util/withTelemetry';



class HelpGettingStartedDialog extends Component {

  constructor(props) {

    super(props);
@@ -117,4 +119,4 @@ const ConnectedHelpGettingStartedDialog = connect( 
  mapDispatchToProps

)(HelpGettingStartedDialog);



export default ConnectedHelpGettingStartedDialog;
 
export default withTelemetry(ConnectedHelpGettingStartedDialog, 'HelpGettingStartedDialog');