added dotenv to read env variables, pass faro instance to this.faro

grafana-plugin/.eslintrc.js

@@ -64,5 +64,6 @@ module.exports = {
      */
     'react-hooks/exhaustive-deps': 'off',
     'rulesdir/no-relative-import-paths': ['error', { allowSameFolder: true }],
+    '@typescript-eslint/explicit-member-accessibility': 'off',
   },
 };

grafana-plugin/package.json

@@ -61,6 +61,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@grafana/data": "^9.2.4",
     "@grafana/eslint-config": "^5.0.0",
+    "@grafana/faro-react": "^1.0.0-beta3",
     "@grafana/runtime": "9.3.0-beta1",
     "@grafana/toolkit": "^9.2.4",
     "@grafana/ui": "^9.2.4",
@@ -83,6 +84,7 @@
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "copy-webpack-plugin": "^11.0.0",
     "dompurify": "^2.3.12",
+    "dotenv": "^16.0.3",
     "eslint": "^8.25.0",
     "eslint-plugin-jsdoc": "^39.3.14",
     "eslint-plugin-react": "^7.31.10",

grafana-plugin/src/utils/faro.ts

@@ -5,33 +5,37 @@ import { TracingInstrumentation, getDefaultOTELInstrumentations } from '@grafana
 import plugin from '../../package.json'; // eslint-disable-line
 
 class FaroHelper {
-  public faro: Faro;
+  faro: Faro;
 
-  public initializeFaro() {
+  initializeFaro() {
     const { faro: faroConfig } = plugin as any;
 
-    if (!faroConfig.enabled || this.faro) return;
+    if (!faroConfig.enabled || this.faro) {
+      return;
+    }
 
-    const faroInstance = initializeFaro({
-      url: faroConfig.url,
-      apiKey: faroConfig.apiKey,
-      isolate: true,
-      instrumentations: [
-        ...getWebInstrumentations({
-          captureConsole: true,
-        }),
-        new TracingInstrumentation({
-          instrumentations: [...getDefaultOTELInstrumentations([/^((?!\/{0,1}a\/grafana\-oncall\-app\\).)*$/])],
-        }),
-      ],
-      session: (window as any).__PRELOADED_STATE__?.faro?.session,
-      app: {
-        name: 'Grafana OnCall',
-        version: plugin?.version,
-      },
-    });
+    try {
+      this.faro = initializeFaro({
+        url: faroConfig.url,
+        apiKey: faroConfig.apiKey,
+        isolate: true,
+        instrumentations: [
+          ...getWebInstrumentations({
+            captureConsole: true,
+          }),
+          new TracingInstrumentation({
+            instrumentations: [...getDefaultOTELInstrumentations([/^((?!\/{0,1}a\/grafana\-oncall\-app\\).)*$/])],
+          }),
+        ],
+        session: (window as any).__PRELOADED_STATE__?.faro?.session,
+        app: {
+          name: 'Grafana OnCall',
+          version: plugin?.version,
+        },
+      });
 
-    faroInstance.api.pushLog(['Faro was initialized for Grafana OnCall']);
+      this.faro.api.pushLog(['Faro was initialized for Grafana OnCall']);
+    } catch (ex) {}
   }
 }
 

grafana-plugin/webpack.config.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const path = require('path');
+const dotenv = require('dotenv');
 
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
@@ -9,6 +10,8 @@ Object.defineProperty(RegExp.prototype, 'toJSON', {
   value: RegExp.prototype.toString,
 });
 
+dotenv.config({ path: path.resolve(__dirname, '.env') });
+
 module.exports.getWebpackConfig = (config, options) => {
   const cssLoader = config.module.rules.find((rule) => rule.test.toString() === '/\\.css$/');
 
@@ -143,6 +146,9 @@ module.exports.getWebpackConfig = (config, options) => {
       new webpack.EnvironmentPlugin({
         ONCALL_API_URL: null,
       }),
+      new webpack.DefinePlugin({
+        'process.env': JSON.stringify(dotenv.config().parsed),
+      }),
     ],
 
     resolve: {

grafana-plugin/yarn.lock

@@ -1614,6 +1614,15 @@
     "@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"
@@ -6089,6 +6098,11 @@ dot-case@^3.0.4:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+dotenv@^16.0.3:
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
+  integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
+
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"