track perf

Author: dferber90

package/src/client.csr.spec.ts

@@ -55,6 +55,8 @@ describe("when cookie is not set", () => {
       }
     );
 
+    fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
     configure({ envKey: "flags_pub_000000" });
     expect(document.cookie).toEqual("");
 
@@ -143,6 +145,7 @@ describe("when cookie is set", () => {
         },
       }
     );
+    fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
 
     configure({ envKey: "flags_pub_000000" });
     expect(document.cookie).toEqual(`hkvk=${visitorKeyInCookie}`);
@@ -234,6 +237,8 @@ describe("stories", () => {
         }
       );
 
+      fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
       configure({ envKey: "flags_pub_000000" });
       expect(document.cookie).toEqual("");
 

package/src/client.ssg.spec.ts

@@ -54,6 +54,7 @@ describe("when cookie is not set", () => {
         };
       }
     );
+    fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
 
     configure({ envKey: "flags_pub_000000" });
     expect(document.cookie).toEqual("");
@@ -202,6 +203,7 @@ describe("when cookie is set", () => {
         visitor: { key: visitorKeyInCookie },
       }
     );
+    fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
 
     configure({ envKey: "flags_pub_000000" });
 

package/src/client.ts

@@ -28,6 +28,7 @@ import {
   ObjectMap,
   has,
 } from "./utils";
+import { perfContent } from "./track-perf";
 
 export type {
   FlagUser,
@@ -503,6 +504,7 @@ export function useFlags<F extends Flags = Flags>(
             );
           }
 
+          const before = Date.now();
           fetch([input.endpoint, input.envKey].join("/"), {
             method: "POST",
             headers: { "content-type": "application/json" },
@@ -512,6 +514,20 @@ export function useFlags<F extends Flags = Flags>(
             (response) => {
               clearTimeout(timeoutId);
 
+              if (navigator.sendBeacon) {
+                navigator.sendBeacon(
+                  "https://happykit.dev/api/flags-perf",
+                  perfContent({
+                    duration: Date.now() - before,
+                    location: "client",
+                    envKey: input.envKey,
+                    responseStatusCode: response.status,
+                    serverTiming: response.headers.get("Server-Timing"),
+                    cfRay: response.headers.get("CF-RAY"),
+                  })
+                );
+              }
+
               if (!response.ok /* response.status is not 200-299 */) {
                 dispatch({
                   type: "settle/failure",

package/src/edge.spec.ts

@@ -65,6 +65,7 @@ describe("middleware", () => {
           },
         }
       );
+      fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
 
       const request = createNextRequest({
         cookies: { hkvk: "V1StGXR8_Z5jdHi6B-myT" },
@@ -132,6 +133,8 @@ describe("middleware", () => {
         }
       );
 
+      fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
       const request = createNextRequest({
         cookies: { hkvk: "V1StGXR8_Z5jdHi6B-myT" },
       });
@@ -214,6 +217,8 @@ describe("middleware", () => {
         }
       );
 
+      fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
       const request = createNextRequest({
         cookies: { foo: "bar" },
       });

package/src/edge.ts

@@ -14,6 +14,7 @@ import type {
   Input,
 } from "./types";
 import { combineRawFlagsWithDefaultFlags } from "./utils";
+import { trackPerf } from "./track-perf";
 
 export type { EvaluationResponseBody } from "./types";
 
@@ -125,6 +126,7 @@ export function getEdgeFlags<F extends Flags = Flags>(options: {
       { "x-forwarded-for": requestingIp }
     : {};
 
+  const before = Date.now();
   return fetch([input.endpoint, input.envKey].join("/"), {
     method: "POST",
     headers: Object.assign(
@@ -138,6 +140,15 @@ export function getEdgeFlags<F extends Flags = Flags>(options: {
     ):
       | Promise<GetFlagsSuccessBag<F> | GetFlagsErrorBag<F>>
       | GetFlagsErrorBag<F> => {
+      trackPerf({
+        duration: Date.now() - before,
+        location: "edge",
+        envKey: input.envKey,
+        responseStatusCode: workerResponse.status,
+        serverTiming: workerResponse.headers.get("Server-Timing"),
+        cfRay: workerResponse.headers.get("CF-RAY"),
+      });
+
       if (!workerResponse.ok /* status not 200-299 */) {
         return {
           flags: staticConfig.defaultFlags as F,

package/src/server.spec.ts

@@ -48,6 +48,8 @@ describe("server-side rendering (pure + hybrid)", () => {
         }
       );
 
+      fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
       const context = {
         req: {
           headers: { cookie: "hkvk=V1StGXR8_Z5jdHi6B-myT" },
@@ -114,6 +116,8 @@ describe("server-side rendering (pure + hybrid)", () => {
         }
       );
 
+      fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
       const context = {
         req: {
           headers: { cookie: "hkvk=V1StGXR8_Z5jdHi6B-myT" },
@@ -187,6 +191,8 @@ describe("server-side rendering (pure + hybrid)", () => {
         }
       );
 
+      fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
       const context = {
         req: {
           headers: { cookie: "foo=bar" },
@@ -308,6 +314,8 @@ describe("static site generation (pure + hybrid)", () => {
       }
     );
 
+    fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
     expect(await getFlags({ context: {} as GetStaticPropsContext })).toEqual({
       flags: { meal: "large" },
       data: {
@@ -354,6 +362,8 @@ describe("static site generation (pure + hybrid)", () => {
         }
       );
 
+      fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
       expect(
         await getFlags({
           context: {} as GetStaticPropsContext,
@@ -406,6 +416,8 @@ describe("static site generation (pure + hybrid)", () => {
         }
       );
 
+      fetchMock.post(`https://happykit.dev/api/flags-perf`, {});
+
       expect(
         await getFlags({
           context: {} as GetStaticPropsContext,

package/src/server.ts

@@ -25,6 +25,7 @@ import {
   combineRawFlagsWithDefaultFlags,
   getCookie,
 } from "./utils";
+import { trackPerf } from "./track-perf";
 
 export type { EvaluationResponseBody } from "./types";
 
@@ -145,6 +146,7 @@ export function getFlags<F extends Flags = Flags>(options: {
       ? null
       : setTimeout(() => controller.abort(), timeoutDuration);
 
+  const before = Date.now();
   return fetch([input.endpoint, input.envKey].join("/"), {
     method: "POST",
     headers: Object.assign(
@@ -161,6 +163,15 @@ export function getFlags<F extends Flags = Flags>(options: {
       | GetFlagsErrorBag<F> => {
       if (timeoutId) clearTimeout(timeoutId);
 
+      trackPerf({
+        duration: Date.now() - before,
+        location: has(options.context, "req") ? "ssr" : "ssg",
+        envKey: input.envKey,
+        responseStatusCode: workerResponse.status,
+        serverTiming: workerResponse.headers.get("Server-Timing"),
+        cfRay: workerResponse.headers.get("CF-RAY"),
+      });
+
       if (!workerResponse.ok /* status not 200-299 */) {
         return {
           flags: staticConfig.defaultFlags as F,

package/src/track-perf.ts

@@ -0,0 +1,20 @@
+type Options = {
+  duration: number;
+  location: "client" | "edge" | "ssr" | "ssg";
+  envKey: string;
+  responseStatusCode: number;
+  serverTiming: string | null;
+  cfRay: string | null;
+};
+
+export function perfContent(options: Options) {
+  return JSON.stringify(options);
+}
+
+export function trackPerf(options: Options) {
+  return fetch(`https://happykit.dev/api/flags-perf`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: perfContent(options),
+  }).catch(() => null);
+}