chore: Don’t import Glean modules dynamically
This commit is contained in:
Florian Zia
Родитель
0b0cc80b71
Коммит
3c449905ce
|
|
@ -135,11 +135,6 @@ const nextConfig = {
|
|||
type: "asset/source",
|
||||
});
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.ya?ml$/,
|
||||
use: "yaml-loader",
|
||||
});
|
||||
|
||||
config.externals ??= {};
|
||||
config.externals.push({
|
||||
knex: "commonjs knex",
|
||||
|
|
|
|||
|
|
@ -96,8 +96,7 @@
|
|||
"stylelint-scss": "^5.3.1",
|
||||
"ts-jest": "^29.1.0",
|
||||
"typescript": "^5.3.2",
|
||||
"yaml": "^2.3.4",
|
||||
"yaml-loader": "^0.8.0"
|
||||
"yaml": "^2.3.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": "20.9.x",
|
||||
|
|
@ -18553,12 +18552,6 @@
|
|||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/javascript-stringify": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
|
||||
"integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest": {
|
||||
"version": "29.7.0",
|
||||
"resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
|
||||
|
|
@ -28108,34 +28101,6 @@
|
|||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/yaml-loader": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/yaml-loader/-/yaml-loader-0.8.0.tgz",
|
||||
"integrity": "sha512-LjeKnTzVBKWiQBeE2L9ssl6WprqaUIxCSNs5tle8PaDydgu3wVFXTbMfsvF2MSErpy9TDVa092n4q6adYwJaWg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"javascript-stringify": "^2.0.1",
|
||||
"loader-utils": "^2.0.0",
|
||||
"yaml": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.13"
|
||||
}
|
||||
},
|
||||
"node_modules/yaml-loader/node_modules/loader-utils": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs": {
|
||||
"version": "17.7.2",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
|
||||
|
|
@ -41797,12 +41762,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"javascript-stringify": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
|
||||
"integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
|
||||
"dev": true
|
||||
},
|
||||
"jest": {
|
||||
"version": "29.7.0",
|
||||
"resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
|
||||
|
|
@ -48885,30 +48844,6 @@
|
|||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
|
||||
"integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA=="
|
||||
},
|
||||
"yaml-loader": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/yaml-loader/-/yaml-loader-0.8.0.tgz",
|
||||
"integrity": "sha512-LjeKnTzVBKWiQBeE2L9ssl6WprqaUIxCSNs5tle8PaDydgu3wVFXTbMfsvF2MSErpy9TDVa092n4q6adYwJaWg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"javascript-stringify": "^2.0.1",
|
||||
"loader-utils": "^2.0.0",
|
||||
"yaml": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"loader-utils": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"yargs": {
|
||||
"version": "17.7.2",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@
|
|||
"build-storybook": "storybook build",
|
||||
"create-location-data": "node src/scripts/uploadAutoCompleteLocations.js",
|
||||
"get-location-data": "node src/scripts/getAutoCompleteLocations.js",
|
||||
"build-glean": "glean translate src/telemetry/metrics.yaml --format typescript --output src/telemetry/generated",
|
||||
"build-glean": "npm run build-glean-index && glean translate src/telemetry/metrics.yaml --format typescript --output src/telemetry/generated",
|
||||
"build-glean-index": "src/scripts/buildGleanModulesIndex.js",
|
||||
"build-glean-docs": "glean translate src/telemetry/metrics.yaml --format markdown --output docs"
|
||||
},
|
||||
"nodemonConfig": {
|
||||
|
|
@ -134,7 +135,6 @@
|
|||
"stylelint-scss": "^5.3.1",
|
||||
"ts-jest": "^29.1.0",
|
||||
"typescript": "^5.3.2",
|
||||
"yaml": "^2.3.4",
|
||||
"yaml-loader": "^0.8.0"
|
||||
"yaml": "^2.3.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,88 +4,16 @@
|
|||
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import Glean from "@mozilla/glean/web";
|
||||
// @ts-expect-error We do not have type declarations for metrics.yaml, yet.
|
||||
import gleanMetrics from "../../telemetry/metrics.yaml";
|
||||
import {
|
||||
SnakeToCamelCase,
|
||||
convertSnakeToCamelCase,
|
||||
} from "../functions/universal/convertSnakeToCamelCase";
|
||||
import * as gleanEvents from "../../telemetry/generated";
|
||||
|
||||
const APP_ENV = process.env.NEXT_PUBLIC_APP_ENV || "";
|
||||
|
||||
export type GleanExtraKeys = Record<string, string | boolean | number>;
|
||||
|
||||
type GleanCategoryKey = keyof typeof gleanMetrics;
|
||||
|
||||
type GleanEvent = {
|
||||
[key: string]: {
|
||||
type: string;
|
||||
description: string;
|
||||
bugs: string;
|
||||
data_reviews: string;
|
||||
data_sensitivity: string;
|
||||
notification_emails: string;
|
||||
expires: string;
|
||||
extra_keys: GleanExtraKeys;
|
||||
record: (params: GleanExtraKeys) => void;
|
||||
};
|
||||
};
|
||||
|
||||
type GleanCategories = {
|
||||
[key: GleanCategoryKey]: GleanEvent;
|
||||
};
|
||||
|
||||
type GleanMetrics = {
|
||||
$schema: string;
|
||||
} & GleanCategories;
|
||||
|
||||
// We do not need $schema here — ignore it.
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { $schema, ...metrics }: GleanMetrics = gleanMetrics;
|
||||
|
||||
type GleanMetricModules =
|
||||
| {
|
||||
[K in keyof GleanCategories as SnakeToCamelCase<string>]: GleanCategories[K];
|
||||
}
|
||||
| null;
|
||||
|
||||
// Custom hook that initializes Glean and returns the Glean objects required
|
||||
// to record data.
|
||||
// Custom hook that initializes Glean and returns all available events.
|
||||
export const useGlean = () => {
|
||||
const [gleanEvents, setGleanEvents] = useState<GleanMetricModules>(null);
|
||||
|
||||
const loadGleanModules = () => {
|
||||
const gleanModuleNames = Object.keys(metrics).map((metricCategory) =>
|
||||
convertSnakeToCamelCase(metricCategory),
|
||||
);
|
||||
const modulePromises = gleanModuleNames.map(
|
||||
(moduleName) => import(`../../telemetry/generated/${moduleName}`),
|
||||
);
|
||||
|
||||
Promise.all(modulePromises)
|
||||
.then((importedModules) => {
|
||||
const exportModules = gleanModuleNames.reduce(
|
||||
(modules, moduleName, moduleIndex) => ({
|
||||
...modules,
|
||||
[moduleName]: importedModules[moduleIndex],
|
||||
}),
|
||||
{},
|
||||
);
|
||||
setGleanEvents(exportModules);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Failed to load Glean modules:", error);
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize Glean only on the first render of our custom hook.
|
||||
useEffect(() => {
|
||||
if (gleanEvents) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable upload only if the user has not opted out of tracking.
|
||||
const uploadEnabled = navigator.doNotTrack !== "1";
|
||||
|
||||
|
|
@ -107,13 +35,10 @@ export const useGlean = () => {
|
|||
// Tag pings for the Debug Viewer
|
||||
// @see https://debug-ping-preview.firebaseapp.com/pings/fx-monitor-local-dev
|
||||
Glean.setDebugViewTag(`fx-monitor-${APP_ENV}-dev`);
|
||||
|
||||
void loadGleanModules();
|
||||
}
|
||||
// This effect should only run once
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Return all generated Glean objects required for recording data.
|
||||
return gleanEvents;
|
||||
};
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче