fix: use POST instead of GET for fetch request (#6)

Author: bgiori

packages/browser-demo/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.1",
   "private": true,
   "dependencies": {
-    "@amplitude/experiment-js-client": "^1.0.1",
+    "@amplitude/experiment-js-client": "file:../browser",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

packages/browser/jest.config.js

@@ -6,7 +6,7 @@ const { compilerOptions } = require('./tsconfig.test.json');
 
 module.exports = {
   preset: 'ts-jest',
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
   displayName: package.name,
   name: package.name,
   rootDir: '.',

packages/browser/package.json

@@ -28,7 +28,6 @@
   },
   "homepage": "https://github.com/amplitude/experiment-js-client#readme",
   "dependencies": {
-    "base64-js": "^1.3.1",
     "unfetch": "^4.1.0"
   },
   "gitHead": "0a910f04a64dafcf37b68be45ed7dca58fdd6acf"

packages/browser/src/experimentClient.ts

@@ -14,7 +14,6 @@ import { HttpClient } from './types/transport';
 import { ExperimentUser, ExperimentUserProvider } from './types/user';
 import { Variant, Variants } from './types/variant';
 import { Backoff } from './util/backoff';
-import { urlSafeBase64Encode } from './util/base64';
 import { randomString } from './util/randomstring';
 
 // Configs which have been removed from the public API.
@@ -224,21 +223,27 @@ export class ExperimentClient implements Client {
     timeoutMillis: number,
   ): Promise<Variants> {
     const userContext = this.addContext(user);
-    const encodedContext = urlSafeBase64Encode(JSON.stringify(userContext));
     let queryString = '';
     if (this.config.debug) {
       queryString = `?d=${randomString(8)}`;
     }
-    const endpoint = `${this.config.serverUrl}/sdk/vardata/${encodedContext}${queryString}`;
+    const endpoint = `${this.config.serverUrl}/sdk/vardata${queryString}`;
     const headers = {
       Authorization: `Api-Key ${this.apiKey}`,
     };
+    const body = JSON.stringify(user);
+    // CDN can only cache requests where the body is < 8KB
+    if (body.length > 8000) {
+      console.warn(
+        `[Experiment] encoded user object length ${body.length} cannot be cached by CDN; must be < 8KB`,
+      );
+    }
     this.debug('[Experiment] Fetch variants for user: ', userContext);
     const response = await this.httpClient.request(
       endpoint,
-      'GET',
+      'POST',
       headers,
-      null,
+      body,
       timeoutMillis,
     );
     if (response.status != 200) {

packages/browser/src/transport/http.ts

@@ -34,14 +34,14 @@ const request: HttpClient['request'] = (
   requestUrl: string,
   method: string,
   headers: Record<string, string>,
-  data?: Record<string, string>,
+  data: string,
   timeoutMillis?: number,
 ): Promise<Response> => {
   return timeout(
     fetch(requestUrl, {
-      method,
-      headers,
-      body: data && JSON.stringify(data),
+      method: method,
+      headers: headers,
+      body: data,
     }),
     timeoutMillis,
   );

packages/browser/src/types/transport.ts

@@ -3,7 +3,7 @@ export interface HttpClient {
     requestUrl: string,
     method: string,
     headers: Record<string, string>,
-    data?: Record<string, string>,
+    data: string,
     timeoutMillis?: number,
   ): Promise<Response>;
 }

packages/browser/src/util/base64.ts

@@ -0,0 +1,38 @@
+import { ExperimentClient } from '../src/experimentClient';
+import { ExperimentUser } from '../src/types/user';
+
+const API_KEY = 'client-DvWljIjiiuqLbyjqdvBaLFfEBrAvGuA3';
+
+const testUser: ExperimentUser = { user_id: 'test_user' };
+const testClient: ExperimentClient = new ExperimentClient(API_KEY, {});
+
+const testTimeoutNoRetriesClient = new ExperimentClient(API_KEY, {
+  retryFetchOnFailure: false,
+  fetchTimeoutMillis: 1,
+});
+
+const testTimeoutRetrySuccessClient = new ExperimentClient(API_KEY, {
+  fetchTimeoutMillis: 1,
+});
+
+beforeEach(() => {
+  localStorage.clear();
+});
+
+test('ExperimentClient.fetch, success', async () => {
+  await testClient.fetch(testUser);
+  const variant = testClient.variant('sdk-ci-test');
+  expect(variant).toEqual({ value: 'on', payload: 'payload' });
+});
+
+test('ExperimentClient.fetch, no retries, timeout failure', async () => {
+  await testTimeoutNoRetriesClient.fetch(testUser);
+  const variants = testTimeoutNoRetriesClient.all();
+  expect(variants).toEqual({});
+});
+
+test('ExperimentClient.fetch, no retries, timeout failure', async () => {
+  await testTimeoutRetrySuccessClient.fetch(testUser);
+  const variant = testClient.variant('sdk-ci-test');
+  expect(variant).toEqual({ value: 'on', payload: 'payload' });
+});

packages/browser/test/client.test.ts

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@amplitude/experiment-js-client@file:packages/browser":
+  version "1.0.0"
+  dependencies:
+    unfetch "^4.1.0"
+
 "@babel/[email protected]":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
@@ -4358,7 +4363,7 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
-base64-js@^1.0.2, base64-js@^1.3.1:
+base64-js@^1.0.2:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
   integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==