feat: Add telemetry opt-in/out buttons to consent page (#145)

Another Mozilla requirement. Hopefully this is satisfactory.

Author: spalmurray

public/consent.html

@@ -46,7 +46,7 @@
 
       button {
         width: 214px;
-        height: 49px;
+        height: 75px;
         border-radius: 4px;
         border-width: 1px;
         padding-top: 4px;
@@ -67,11 +67,14 @@
         cursor: pointer;
       }
 
+      button + button {
+        margin-left: 10px;
+      }
+
       button#codecov-uninstall {
         background: white;
         border: 1px solid black;
         color: black;
-        margin-left: 10px;
       }
     </style>
   </head>
@@ -102,15 +105,23 @@ <h1>Codecov Browser Extension</h1>
         The Codecov extension may collect and use information from your browser
         such as your IP address and the URLs of the pages you access on
         https://github.com or on an enterprise version or self-hosted
-        installation of Github you explicitly grant the extension access to.
+        installation of GitHub to which you explicitly grant the extension
+        access.
+      </p>
+      <p>
+        Additionally, you may choose to opt-in or opt-out of non-personal
+        telemetry collection (error reporting and performance data).
       </p>
       <p>
         By clicking 'Accept', you confirm that you understand and agree to the
         privacy policy of the Codecov Browser Extension. Should you decide not
         to accept, please note that the extension will not work.
       </p>
       <br />
-      <button id="codecov-consent-accept">Accept</button>
+      <button id="codecov-consent-accept">Accept and allow telemetry</button>
+      <button id="codecov-consent-accept-essential">
+        Accept and opt-out of telemetry
+      </button>
       <button id="codecov-uninstall">Uninstall</button>
     </div>
   </body>

public/consent.js

@@ -3,11 +3,30 @@ document.addEventListener("DOMContentLoaded", function () {
   consentButton.addEventListener("click", async function () {
     const result = await browser.runtime.sendMessage({
       type: "set_consent",
-      payload: true,
+      payload: "all",
     });
 
     if (result) {
-      console.log("Consent granted, closing tab");
+      console.log("All consent granted, closing tab");
+      close();
+    } else {
+      console.error(
+        "Something went wrong saving consent. Please report this at https://github.com/codecov/codecov-browser-extension/issues"
+      );
+    }
+  });
+
+  var essentialConsentButton = document.getElementById(
+    "codecov-consent-accept-essential"
+  );
+  essentialConsentButton.addEventListener("click", async function () {
+    const result = await browser.runtime.sendMessage({
+      type: "set_consent",
+      payload: "essential",
+    });
+
+    if (result) {
+      console.log("Essential consent granted, closing tab");
       close();
     } else {
       console.error(

src/background/main.ts

@@ -14,7 +14,7 @@ import {
 
 async function handleConsent(): Promise<void> {
   const consent = await new Codecov().getConsent();
-  if (!consent) {
+  if (consent === "none") {
     const url = browser.runtime.getURL("consent.html");
     await browser.tabs.create({ url, active: true });
   }
@@ -41,8 +41,8 @@ async function handleMessages(message: {
   referrer?: string;
 }) {
   const codecov = new Codecov();
-  if (await codecov.getConsent()) {
-    console.log("Have data consent, initializing Sentry");
+  if ((await codecov.getConsent()) === "all") {
+    console.log("Have full data consent, initializing Sentry");
     sentryInit({
       dsn: process.env.SENTRY_DSN,
 

src/constants.ts

@@ -1,6 +1,7 @@
 // The version number here should represent the last version where consent requirement was updated.
 // We must update the key's version to re-request consent whenever the data we collect changes.
-export const consentStorageKey = "codecov-consent-0.5.9";
+export const allConsentStorageKey = "codecov-consent-0.6.3";
+export const onlyEssentialConsentStorageKey = "codecov-essential-consent-0.6.3";
 
 export const codecovApiTokenStorageKey = "self_hosted_codecov_api_token";
 export const selfHostedCodecovURLStorageKey = "self_hosted_codecov_url";

src/content/common/sentry.ts

@@ -8,27 +8,34 @@ import {
   dedupeIntegration,
   Scope,
 } from "@sentry/browser";
+import { Consent } from "src/types";
 
 // Sentry config
 // Browser extensions must initialize Sentry a bit differently to avoid
 // conflicts between Sentry instances should the site the extension is running
 // on also use Sentry. Read more here:
 // https://docs.sentry.io/platforms/javascript/best-practices/browser-extensions/
 
-const sentryClient = new BrowserClient({
-  dsn: process.env.SENTRY_DSN,
-  transport: makeFetchTransport,
-  stackParser: defaultStackParser,
-  integrations: [
-    breadcrumbsIntegration,
-    browserApiErrorsIntegration,
-    globalHandlersIntegration,
-    dedupeIntegration,
-  ],
-});
+export function initSentry(consent: Consent): Scope | undefined {
+  // Only enable Sentry if have "all" data consent.
+  if (consent !== "all") {
+    return undefined;
+  }
 
-const Sentry = new Scope();
-Sentry.setClient(sentryClient);
-sentryClient.init();
+  const sentryClient = new BrowserClient({
+    dsn: process.env.SENTRY_DSN,
+    transport: makeFetchTransport,
+    stackParser: defaultStackParser,
+    integrations: [
+      breadcrumbsIntegration,
+      browserApiErrorsIntegration,
+      globalHandlersIntegration,
+      dedupeIntegration,
+    ],
+  });
 
-export default Sentry;
+  const Sentry = new Scope();
+  Sentry.setClient(sentryClient);
+  sentryClient.init();
+  return Sentry;
+}

src/content/github/common/fetchers.ts

@@ -1,5 +1,6 @@
 import browser from "webextension-polyfill";
 import {
+  Consent,
   FileCoverageReportResponse,
   FileMetadata,
   MessageType,
@@ -102,7 +103,7 @@ export async function getPRReport(url: any) {
   return response.data;
 }
 
-export async function getConsent() {
+export async function getConsent(): Promise<Consent> {
   const response = await browser.runtime.sendMessage({
     type: MessageType.GET_CONSENT,
   });

src/content/github/file/main.tsx

@@ -6,6 +6,7 @@ import "tether-drop/dist/css/drop-theme-arrows.css";
 import "src/basscss.css";
 import "./style.css";
 import {
+  Consent,
   CoverageStatus,
   FileCoverageReport,
   FileCoverageReportResponse,
@@ -32,7 +33,7 @@ import {
   getConsent,
 } from "../common/fetchers";
 import { print } from "src/utils";
-import Sentry from "../../common/sentry";
+import { initSentry } from "../../common/sentry";
 
 const globals: {
   coverageReport?: FileCoverageReport;
@@ -44,9 +45,16 @@ const globals: {
   prompt?: HTMLElement;
 } = {};
 
-init();
+let Sentry: ReturnType<typeof initSentry> = undefined;
+let consent: Consent = "none";
+
+await init();
+
+async function init(): Promise<void> {
+  consent = await getConsent();
+
+  Sentry = initSentry(consent);
 
-function init(): Promise<void> {
   // this event discovered by "reverse-engineering GitHub"
   // https://github.com/refined-github/refined-github/blob/main/contributing.md#reverse-engineering-github
   // TODO: this event is not fired when navigating using the browser's back and forward buttons
@@ -60,7 +68,8 @@ function init(): Promise<void> {
 
 async function main(): Promise<void> {
   try {
-    if (!(await getConsent())) {
+    if (consent === "none") {
+      // No data consent, do nothing.
       return;
     }
 
@@ -72,7 +81,9 @@ async function main(): Promise<void> {
     globals.coverageButton = createCoverageButton();
     await process(urlMetadata);
   } catch (e) {
-    Sentry.captureException(e);
+    if (Sentry) {
+      Sentry.captureException(e);
+    }
     throw e;
   }
 }

src/content/github/pr/main.tsx

@@ -3,7 +3,7 @@ import _ from "lodash";
 
 import "src/basscss.css";
 import { displayChange } from "src/utils";
-import { CoverageStatus, PullCoverageReport } from "src/types";
+import { Consent, CoverageStatus, PullCoverageReport } from "src/types";
 import {
   animateAndAnnotateLines,
   clearAnimation,
@@ -14,22 +14,38 @@ import { colors } from "../common/constants";
 import { print } from "src/utils";
 import { getConsent, getPRReport } from "../common/fetchers";
 import { isPrUrl } from "../common/utils";
-import Sentry from "src/content/common/sentry";
+import { initSentry } from "src/content/common/sentry";
 
 const globals: {
   coverageReport?: PullCoverageReport;
 } = {};
 
+let Sentry: ReturnType<typeof initSentry> = undefined;
+let consent: Consent = "none";
+
+await init();
+
+async function init(): Promise<void> {
+  consent = await getConsent();
+
+  Sentry = initSentry(consent);
+
+  return main();
+}
+
 async function main() {
   try {
-    if (!(await getConsent())) {
+    if (consent === "none") {
+      // No data consent, do nothing.
       return;
     }
 
     document.addEventListener("soft-nav:end", execute);
     await execute();
   } catch (e) {
-    Sentry.captureException(e);
+    if (Sentry) {
+      Sentry.captureException(e);
+    }
     throw e;
   }
 }
@@ -193,5 +209,3 @@ function clearAnimationAndAnnotations() {
   clearAnimation(lineSelector, annotateLine);
   clearAnnotations((line: HTMLElement) => (line.style.boxShadow = "inherit"));
 }
-
-main();

src/service.ts

@@ -9,8 +9,10 @@ import {
   selfHostedGitHubURLStorageKey,
   providers,
   cacheTtlMs,
-  consentStorageKey,
+  allConsentStorageKey,
+  onlyEssentialConsentStorageKey,
 } from "src/constants";
+import { Consent } from "./types";
 
 export class Codecov {
   apiToken: string = "";
@@ -251,23 +253,34 @@ export class Codecov {
     };
   }
 
-  async getConsent(): Promise<boolean> {
+  async getConsent(): Promise<Consent> {
     // We only need to get consent for firefox
     // @ts-ignore IS_FIREFOX is populated by Webpack at build time
     if (!IS_FIREFOX) {
-      return true;
+      return "all";
     }
 
-    const consent: boolean | undefined = await browser.storage.local
-      .get(consentStorageKey)
-      .then((res) => res[consentStorageKey]);
+    const consents = await browser.storage.local.get([
+      allConsentStorageKey,
+      onlyEssentialConsentStorageKey,
+    ]);
 
-    return !!consent;
+    if (consents[allConsentStorageKey]) {
+      return "all";
+    } else if (consents[onlyEssentialConsentStorageKey]) {
+      return "essential";
+    } else {
+      return "none";
+    }
   }
 
-  async setConsent(consent: boolean): Promise<boolean> {
+  async setConsent(consent: Consent): Promise<Consent> {
+    const allConsent = consent === "all";
+    const essentialConsent = consent === "essential";
+
     const storageObject: { [id: string]: boolean } = {};
-    storageObject[consentStorageKey] = consent;
+    storageObject[allConsentStorageKey] = allConsent;
+    storageObject[onlyEssentialConsentStorageKey] = essentialConsent;
 
     await browser.storage.local.set(storageObject);
 

src/types.ts

@@ -41,3 +41,5 @@ export enum MessageType {
   GET_CONSENT = "get_consent",
   SET_CONSENT = "set_consent",
 }
+
+export type Consent = "all" | "essential" | "none";