diff --git a/babel.config.js b/babel.config.js
index c8d4f761..c77e3adc 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,21 +1,57 @@
-module.exports = {
- presets: [
- [
- "@babel/preset-env",
- { targets: { firefox: "70", chrome: "78", electron: "8" } },
+module.exports = (api) => {
+ const target = api.env();
+
+ // Browser extension (full)
+ if (target === "extension") {
+ return {
+ presets: [
+ ["@babel/preset-env", { targets: { firefox: "70", chrome: "78" } }],
+ ...guiPresets,
+ ],
+ plugins: [
+ ...guiPlugins,
+ [
+ "babel-plugin-transform-remove-imports",
+ { test: /^(electron|fs|path)\/?/ },
+ ],
+ ],
+ };
+ }
+
+ // Electron (panel)
+ if (target === "electron") {
+ return {
+ presets: [
+ ["@babel/preset-env", { targets: { electron: "9" } }],
+ ...guiPresets,
+ ],
+ plugins: [...guiPlugins],
+ };
+ }
+
+ // Electron (main.js)
+ return {
+ presets: [
+ ["@babel/preset-env", { targets: { node: "10" } }],
+ "@babel/preset-typescript",
],
- "@babel/preset-react",
- "@babel/preset-typescript",
- ],
- plugins: [
- "inline-react-svg",
- "@babel/plugin-proposal-class-properties",
- "@babel/plugin-proposal-optional-chaining",
- [
- "babel-plugin-styled-components",
- {
- fileName: false,
- },
+ plugins: [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-proposal-optional-chaining",
],
- ],
+ };
};
+
+const guiPresets = ["@babel/preset-react", "@babel/preset-typescript"];
+
+const guiPlugins = [
+ "inline-react-svg",
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-proposal-optional-chaining",
+ [
+ "babel-plugin-styled-components",
+ {
+ fileName: false,
+ },
+ ],
+];
diff --git a/package.json b/package.json
index 23adb105..a14c2d14 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/fast-json-stable-stringify": "^2.0.0",
+ "@types/google.analytics": "^0.0.40",
"@types/graphql": "^14.5.0",
"@types/jest": "^25.2.2",
"@types/jest-environment-puppeteer": "^4.3.1",
@@ -98,6 +99,7 @@
"babel-loader": "^8.1.0",
"babel-plugin-inline-react-svg": "andyrichardson/babel-plugin-inline-react-svg#refs",
"babel-plugin-styled-components": "^1.10.7",
+ "babel-plugin-transform-remove-imports": "^1.3.2",
"bestzip": "^2.1.5",
"clean-webpack-plugin": "^3.0.0",
"codemirror": "^5.53.2",
diff --git a/src/extension/content_script.ts b/src/extension/content_script.ts
index a163bf01..3d58caee 100644
--- a/src/extension/content_script.ts
+++ b/src/extension/content_script.ts
@@ -42,3 +42,5 @@ const handleMessage = (message: ExchangeMessage) => {
const handleDisconnect = () => {
connection = undefined;
};
+
+window.addEventListener("keypress", console.log);
diff --git a/src/extension/manifest.json b/src/extension/manifest.json
index bb0a72ea..f9ff761e 100644
--- a/src/extension/manifest.json
+++ b/src/extension/manifest.json
@@ -31,8 +31,8 @@
}
},
"devtools_page": "devtools.html",
- "permissions": ["file:///*", "http://*/*", "https://*/*"],
- "content_security_policy": "script-src 'self'; object-src 'self'",
+ "permissions": ["file:///*", "http://*/*", "https://*/*", "storage"],
+ "content_security_policy": "script-src 'self' https://www.google-analytics.com/analytics.js; object-src 'self'",
"application": {
"gecko": {
"id": "{c11f3a69-f159-4708-b044-853066c2d2fe}",
diff --git a/src/panel/App.tsx b/src/panel/App.tsx
index fa2c9fd2..8d07a708 100644
--- a/src/panel/App.tsx
+++ b/src/panel/App.tsx
@@ -18,16 +18,19 @@ import {
ExplorerProvider,
useDevtoolsContext,
TimelineProvider,
+ TelemetryProvider,
} from "./context";
export const App = () => {
return (
-
-
-
-
-
+
+
+
+
+
+
+
);
diff --git a/src/panel/context/Telemetry.tsx b/src/panel/context/Telemetry.tsx
new file mode 100644
index 00000000..84c047a2
--- /dev/null
+++ b/src/panel/context/Telemetry.tsx
@@ -0,0 +1,138 @@
+import React, {
+ createContext,
+ useContext,
+ useLayoutEffect,
+ useState,
+ useCallback,
+ useMemo,
+ FC,
+ useEffect,
+ useRef,
+} from "react";
+import { nanoid } from "nanoid";
+import * as storage from "../util/storage";
+
+type Page =
+ | "explorer"
+ | "events"
+ | "request"
+ | "disconnected"
+ | "error"
+ | "mismatch";
+interface TelemetryContextValue {
+ state: "enabled" | "disabled" | "pending";
+ disableTelemetry: () => void;
+ enableTelemetry: () => void;
+ setPage: (page: Page) => void;
+}
+
+const TelemetryContext = createContext(null as any);
+
+export const useTelemetry = () => useContext(TelemetryContext);
+
+export const usePageTelemetry = (page: Page) => {
+ const { setPage } = useTelemetry();
+
+ useEffect(() => {
+ setPage(page);
+ }, []);
+};
+
+export const TelemetryProvider: FC = ({ children }) => {
+ const active = useRef(false);
+ const [state, setState] = useState();
+
+ useLayoutEffect(() => {
+ storage.get("allowTelemetry").then((telemetryEnabled) =>
+ setState(() => {
+ if (telemetryEnabled === undefined) {
+ return "pending";
+ }
+
+ if (telemetryEnabled === false) {
+ return "disabled";
+ }
+
+ return "enabled";
+ })
+ );
+ }, []);
+
+ useEffect(() => {
+ if (state !== "enabled") {
+ return;
+ }
+
+ (async () => {
+ startAnalytics({ clientId: await storage.get("userId") });
+ active.current = true;
+ })();
+ }, [state]);
+
+ const ga = useCallback((...args: Parameters) => {
+ if (!active.current) {
+ return;
+ }
+
+ window.ga(...args);
+ }, []);
+
+ const enableTelemetry = useCallback(async () => {
+ await storage.set("allowTelemetry", true);
+ await storage.set("userId", nanoid());
+ setState("enabled");
+ }, []);
+
+ const disableTelemetry = useCallback(async () => {
+ await storage.set("allowTelemetry", false);
+ setState("disabled");
+ }, []);
+
+ const setPage = useCallback(
+ (page) => {
+ console.log(active.current);
+ ga("set", "page", page);
+ ga("send", { hitType: "pageview" });
+ },
+ [ga]
+ );
+
+ const value = useMemo(
+ () => ({
+ state: state as TelemetryContextValue["state"],
+ enableTelemetry,
+ disableTelemetry,
+ setPage,
+ }),
+ [state, enableTelemetry, disableTelemetry, setPage]
+ );
+
+ if (state === undefined) {
+ return null;
+ }
+
+ return (
+
+ {children}
+
+ );
+};
+
+/** Global script to enable google analytics. */
+const startAnalytics = ({ clientId }: { clientId: string }) => {
+ window.ga =
+ window.ga || ((...args) => (window.ga.q = window.ga.q || []).push(args));
+ window.ga.l = +new Date();
+
+ ga("create", "UA-98443810-2", {
+ storage: "none",
+ clientId,
+ });
+ /*
+ * See here for explanation - https://stackoverflow.com/questions/3591847/google-analytics-from-a-file-url
+ */
+ ga("set", "checkProtocolTask", null);
+ ga("set", "checkStorageTask", null);
+ ga("set", "historyImportTask", null);
+ ga("set", "dataSource", "devtools");
+};
diff --git a/src/panel/context/index.ts b/src/panel/context/index.ts
index a6280f65..708cfd04 100644
--- a/src/panel/context/index.ts
+++ b/src/panel/context/index.ts
@@ -2,3 +2,4 @@ export * from "./Devtools";
export * from "./Request";
export * from "./Explorer";
export * from "./Timeline";
+export * from "./Telemetry";
diff --git a/src/panel/pages/disconnected/Disconnected.tsx b/src/panel/pages/disconnected/Disconnected.tsx
index 73723b65..b0ddea64 100644
--- a/src/panel/pages/disconnected/Disconnected.tsx
+++ b/src/panel/pages/disconnected/Disconnected.tsx
@@ -1,17 +1,22 @@
import React, { FC, ComponentProps } from "react";
import styled, { createGlobalStyle } from "styled-components";
+import { usePageTelemetry } from "../../context";
import Icon from "../../../assets/icon.svg";
-export const Disconnected: FC> = (props) => (
- <>
-
-
-
-
- Make sure {"you're"} using the Urql Devtools exchange!
-
-
-);
+export const Disconnected: FC> = (props) => {
+ usePageTelemetry("disconnected");
+
+ return (
+ <>
+
+
+
+
+ Make sure {"you're"} using the Urql Devtools exchange!
+
+
+ );
+};
const GlobalStyle = createGlobalStyle`
body {
diff --git a/src/panel/pages/error/ErrorBoundary.tsx b/src/panel/pages/error/ErrorBoundary.tsx
index 339fb52e..4d9600d6 100644
--- a/src/panel/pages/error/ErrorBoundary.tsx
+++ b/src/panel/pages/error/ErrorBoundary.tsx
@@ -1,9 +1,10 @@
-import React, { Component, ComponentProps } from "react";
+import React, { Component, ComponentProps, useCallback, FC } from "react";
import { faBug, faRedoAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import styled from "styled-components";
import { CodeHighlight } from "../../components";
import { openExternalUrl } from "../../util";
+import { usePageTelemetry } from "../../context";
export class ErrorBoundary extends Component<
ComponentProps,
@@ -17,47 +18,46 @@ export class ErrorBoundary extends Component<
});
}
- private handleReloadClick = () => {
- window.location.reload();
- };
-
- private handleReportClick = () => {
- if (!this.state.error) {
- return;
- }
-
- const url = createIssueUrl(this.state.error);
- openExternalUrl(url);
- };
-
render() {
if (!this.state.error) {
return this.props.children;
}
- return (
-
-
-
-
-
- Something went wrong and {"we're"} not totally sure why...
-
-
-
-
-
-
-
-