initialize faro only on prod (#4566)

# What this PR does

initialize faro only on prod

## Which issue(s) this PR closes

Closes https://github.com/grafana/oncall-private/issues/2756

<!--
*Note*: if you have more than one GitHub issue that this PR closes, be
sure to preface
each issue link with a [closing
keyword](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests#linking-a-pull-request-to-an-issue).
This ensures that the issue(s) are auto-closed once the PR has been
merged.
-->

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] Added the relevant release notes label (see labels prefixed w/
`release:`). These labels dictate how your PR will
    show up in the autogenerated release notes.

grafana-plugin/package.json

@@ -7,8 +7,8 @@
     "lint:fix": "eslint --max-warnings=0 --fix --cache --ext .js,.jsx,.ts,.tsx ./src ./e2e-tests",
     "stylelint": "stylelint ./src/**/*.{css,scss,module.css,module.scss}",
     "stylelint:fix": "stylelint --fix ./src/**/*.{css,scss,module.css,module.scss}",
-    "build": "webpack -c ./webpack.config.ts --env production",
-    "build:dev": "webpack -c ./webpack.config.ts --env development",
+    "build": "NODE_ENV=production webpack -c ./webpack.config.ts --env production",
+    "build:dev": "NODE_ENV=development webpack -c ./webpack.config.ts --env development",
     "labels:link": "yarn --cwd ../../gops-labels/frontend link && yarn link \"@grafana/labels\" && yarn --cwd ../../gops-labels/frontend watch",
     "labels:unlink": "yarn --cwd ../../gops-labels/frontend unlink",
     "test-utc": "TZ=UTC jest --verbose --testNamePattern '^((?!@london-tz).)*$'",
@@ -23,7 +23,7 @@
     "test:e2e:gen": "yarn playwright codegen http://localhost:3000",
     "e2e-show-report": "yarn playwright show-report",
     "generate-types": "cd ./src/network/oncall-api/types-generator && yarn generate",
-    "watch": "webpack -w -c ./webpack.config.ts --env development",
+    "watch": "NODE_ENV=development webpack -w -c ./webpack.config.ts --env development",
     "sign": "npx --yes @grafana/sign-plugin@latest",
     "start": "yarn watch",
     "plop": "plop",

grafana-plugin/src/utils/consts.ts

@@ -35,12 +35,23 @@ export const ONCALL_PROD = 'https://oncall-prod-us-central-0.grafana.net/oncall'
 export const ONCALL_OPS = 'https://oncall-ops-us-east-0.grafana.net/oncall';
 export const ONCALL_DEV = 'https://oncall-dev-us-central-0.grafana.net/oncall';
 
+export const getProcessEnvVarSafely = (name: string) => {
+  try {
+    return process.env[name];
+  } catch (error) {
+    console.error(error);
+    return undefined;
+  }
+};
+
+export const getIsDevelopmentEnv = () => getProcessEnvVarSafely['NODE_ENV'] === 'development';
+
 // Single source of truth on the frontend for OnCall API URL
 export const getOnCallApiUrl = (meta?: OnCallAppPluginMeta) => {
   if (meta?.jsonData?.onCallApiUrl) {
     return meta?.jsonData?.onCallApiUrl;
   } else if (typeof window === 'undefined') {
-    return process.env.ONCALL_API_URL;
+    return getProcessEnvVarSafely('ONCALL_API_URL');
   }
   return undefined;
 };

grafana-plugin/src/utils/faro.ts

@@ -9,6 +9,7 @@ import {
   ONCALL_DEV,
   ONCALL_OPS,
   ONCALL_PROD,
+  getIsDevelopmentEnv,
 } from './consts';
 import { safeJSONStringify } from './string';
 
@@ -31,7 +32,7 @@ class BaseFaroHelper {
   faro: Faro;
 
   initializeFaro(onCallApiUrl: string) {
-    if (this.faro) {
+    if (this.faro || getIsDevelopmentEnv()) {
       return undefined;
     }
 

grafana-plugin/webpack.config.ts

@@ -64,6 +64,7 @@ const config = async (env): Promise<Configuration> => {
       ...(env.development ? [new LiveReloadPlugin({ appendScriptTag: true, useSourceHash: true })] : []),
       new EnvironmentPlugin({
         ONCALL_API_URL: null,
+        NODE_ENV: 'development',
       }),
       new DefinePlugin({
         'process.env': JSON.stringify(dotenv.config().parsed),