Replace amplitude-js with @amplitude/analytics-browser

.nais/fyllut/config.yaml

@@ -88,7 +88,7 @@ spec:
     - name: PDL_TOKEN_SCOPE_CLUSTER
       value: {{pdl-token-scope-cluster}}
     - name: AMPLITUDE_API_ENDPOINT
-      value: "amplitude.nav.no/collect-auto"
+      value: "https://amplitude.nav.no/collect-auto"
     - name: FYLLUT_FRONTEND_URL
       value: {{fyllut-frontend-url}}
   envFrom:

mocks/mocks/routes/amplitude.js

@@ -6,10 +6,12 @@ module.exports = [
     variants: [
       {
         id: 'success',
-        type: 'text',
+        type: 'json',
         options: {
           status: 200,
-          body: 'success',
+          body: {
+            code: 200,
+          },
         },
       },
     ],

packages/fyllut-backend/.env.test

@@ -8,5 +8,6 @@ FORMS_SOURCE=formioapi
 FORMIO_PROJECT_URL=http://127.0.0.1:3300/formio-api
 SEND_INN_HOST=http://127.0.0.1:3300/send-inn
 TOKEN_X_WELL_KNOWN_URL=http://127.0.0.1:3300/tokenx/.well-known
-AMPLITUDE_API_ENDPOINT=127.0.0.1:3300/amplitude/collect-auto
+AMPLITUDE_API_ENDPOINT=http://127.0.0.1:3300/amplitude/collect-auto
+AMPLITUDE_DISABLE_BATCH=true
 # FYLLUT_BACKEND_LOGLEVEL=debug

packages/fyllut-backend/src/config/config.ts

@@ -21,6 +21,7 @@ const tokenx: TokenxConfig = {
 
 const amplitude: AmplitudeConfig = {
   apiEndpoint: process.env.AMPLITUDE_API_ENDPOINT ?? '',
+  disableBatch: process.env.AMPLITUDE_DISABLE_BATCH === 'true',
 };
 
 const frontendLoggerConfig: FrontendLoggerConfigType = configUtils.loadJsonFromEnv('FYLLUT_FRONTEND_LOGCONFIG');

packages/fyllut-backend/src/config/types.d.ts

@@ -8,6 +8,7 @@ export type TokenxConfig = {
 
 export type AmplitudeConfig = {
   apiEndpoint: string;
+  disableBatch: boolean;
 };
 
 export type SendInnConfig = {

packages/fyllut-backend/src/routers/api/config.ts

@@ -15,6 +15,7 @@ const config = {
       isDelingslenke,
       isDevelopment,
       amplitudeApiEndpoint: amplitude.apiEndpoint,
+      amplitudeDisbaleBatch: amplitude.disableBatch,
       isLoggedIn,
       loggerConfig: frontendLoggerConfig,
     });

packages/fyllut/cypress/support/commands.ts

@@ -13,7 +13,6 @@ import '@testing-library/cypress/add-commands';
 import { expect } from 'chai';
 import 'cypress-wait-until';
 import { CyHttpMessages } from 'cypress/types/net-stubbing';
-import { parse } from 'querystring';
 
 // -- This is a parent command --
 // Cypress.Commands.add('login', (email, password) => { ... })
@@ -66,8 +65,10 @@ Cypress.Commands.add('checkLogToAmplitude', (eventType: string, properties) => {
   return cy
     .wait('@amplitudeLogging')
     .its('request.body')
-    .then(parse)
-    .then((body: any) => JSON.parse(body.e)[0])
+    .then((body) => {
+      expect(body.events).to.have.length(1);
+      return body.events[0];
+    })
     .then((event) => {
       expect(event.event_type).to.equal(eventType);
       if (properties && Object.keys(properties).length > 0) {

packages/shared-components/package.json

@@ -24,13 +24,13 @@
     "prepare": "yarn build"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^2.6.2",
     "@formio/react": "5.3.0",
     "@navikt/ds-css": "^6.3.4",
     "@navikt/ds-icons": "^3.4.3",
     "@navikt/ds-react": "^6.3.4",
     "@navikt/fnrvalidator": "^2.0.7",
     "@navikt/skjemadigitalisering-shared-domain": "1.0.0",
-    "amplitude-js": "8.21.9",
     "classnames": "2.5.1",
     "eventemitter2": "^6.4.9",
     "file-saver": "2.0.5",

packages/shared-components/src/context/amplitude/index.jsx

@@ -25,15 +25,13 @@ const defaultValues = {
   loggSkjemaFullfort: () => Promise.resolve(),
 };
 
-const isGcp = (config) => !!config.NAIS_CLUSTER_NAME;
-
 const AmplitudeContext = createContext(defaultValues);
 
 function AmplitudeProvider({ children, form }) {
   const { config } = useAppConfig();
   useEffect(() => {
     if (config.amplitudeApiEndpoint) {
-      initAmplitude(config.amplitudeApiEndpoint, isGcp(config));
+      initAmplitude(config.amplitudeApiEndpoint, config.amplitudeDisbaleBatch);
     }
   }, [config]);
   const loggSkjemaStegFullfort = useSkjemaStegFullfort(form);

packages/shared-components/src/util/amplitude/amplitude.js

@@ -1,14 +1,27 @@
-import amplitude from 'amplitude-js';
+// import amplitude from 'amplitude-js';
+import * as amplitude from '@amplitude/analytics-browser';
 
-export const initAmplitude = (apiEndpoint, isGcp) => {
-  amplitude.getInstance().init('default', '', {
-    apiEndpoint,
-    saveEvents: false,
-    includeUtm: true,
-    forceHttps: isGcp,
-    includeReferrer: true,
-    platform: window.location.toString(),
-  });
+export const initAmplitude = (apiEndpoint, disableBatch) => {
+  const config = {
+    serverUrl: apiEndpoint,
+    defaultTracking: {
+      attribution: true,
+      pageViews: false,
+      sessions: false,
+      fileDownload: false,
+      formInteractions: false,
+    },
+    ingestionMetadata: {
+      // This is a hack to provide collect-auto with the correct environment, won't be used within amplitude
+      sourceName: window.location.toString(),
+    },
+  };
+
+  if (disableBatch) {
+    config.flushQueueSize = 1;
+  }
+
+  amplitude.init('default', '', config);
 };
 
 function createEventData(form, customProperties = {}) {
@@ -19,22 +32,9 @@ function createEventData(form, customProperties = {}) {
   };
 }
 
-export function logAmplitudeEvent(eventName, eventData, done) {
-  let callbackSuccess = undefined;
-  let callbackFailure = undefined;
-  if (done) {
-    callbackSuccess = () => done();
-    callbackFailure = () => {
-      console.error(`failed to log amplitude event ${eventName}`);
-      done();
-    };
-  }
-  setTimeout(() => {
-    try {
-      amplitude.getInstance().logEvent(eventName, eventData, callbackSuccess, callbackFailure);
-    } catch (error) {
-      console.error(error);
-    }
+function logAmplitudeEvent(eventName, eventData) {
+  return amplitude.track(eventName, eventData).promise.catch((error) => {
+    console.error(`failed to log amplitude event ${eventName}`, error);
   });
 }
 
@@ -76,9 +76,7 @@ export function loggEventDokumentLastetNed(form, tittel) {
 }
 
 export function loggEventSkjemaFullfort(form) {
-  return new Promise((resolve) => {
-    logAmplitudeEvent('skjema fullført', createEventData(form), resolve);
-  });
+  return logAmplitudeEvent('skjema fullført', createEventData(form));
 }
 
 export function loggEventSkjemaValideringFeilet(form) {

yarn.lock

@@ -12,28 +12,64 @@
   resolved "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.2.tgz"
   integrity sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==
 
-"@amplitude/analytics-connector@^1.4.6":
+"@amplitude/analytics-browser@^2.6.2":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-browser/-/analytics-browser-2.6.2.tgz#580ad73a334d06a50c72fca713e8ee89e8ffba2f"
+  integrity sha512-NcYOnzVln/YdWeIBf8H1KpoNyaFW1zjDSVMXktxP7L7yZpGZIY3XcZVC2eax/bcEzrxe3bj77P2TAs7zsTa1Vg==
+  dependencies:
+    "@amplitude/analytics-client-common" "^2.1.3"
+    "@amplitude/analytics-core" "^2.2.4"
+    "@amplitude/analytics-types" "^2.5.0"
+    "@amplitude/plugin-page-view-tracking-browser" "^2.2.6"
+    "@amplitude/plugin-web-attribution-browser" "^2.1.7"
+    tslib "^2.4.1"
+
+"@amplitude/analytics-client-common@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-client-common/-/analytics-client-common-2.1.3.tgz#de761b170d4626c37e498e591afafa09aef51b18"
+  integrity sha512-GMg7qCFKeOBep9QouW8m00qqO+4AX3IGJdC6EL9oJaWnlntQzstDtHDZosesyuuUXEuvX57iiFIR+SDghb3LfQ==
+  dependencies:
+    "@amplitude/analytics-connector" "^1.4.8"
+    "@amplitude/analytics-core" "^2.2.4"
+    "@amplitude/analytics-types" "^2.5.0"
+    tslib "^2.4.1"
+
+"@amplitude/analytics-connector@^1.4.8":
   version "1.5.0"
   resolved "https://registry.npmjs.org/@amplitude/analytics-connector/-/analytics-connector-1.5.0.tgz"
   integrity sha512-T8mOYzB9RRxckzhL0NTHwdge9xuFxXEOplC8B1Y3UX3NHa3BLh7DlBUZlCOwQgMc2nxDfnSweDL5S3bhC+W90g==
 
-"@amplitude/types@^1.10.2":
-  version "1.10.2"
-  resolved "https://registry.npmjs.org/@amplitude/types/-/types-1.10.2.tgz"
-  integrity sha512-I8qenRI7uU6wKNb9LiZrAosSHVoNHziXouKY81CrqxH9xhVTEIJFXeuCV0hbtBr0Al/8ejnGjQRx+S2SvU/pPg==
+"@amplitude/analytics-core@^2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-core/-/analytics-core-2.2.4.tgz#e0c12161f502215c1f1c90bf0c6f0a31ad65e582"
+  integrity sha512-EySCSz3Sm6gcLRbg7PgVgKqqxPN+08OHJm/Jy5H3R1eIqI3owzoSLxlKecQ7d14rEiUxJ4W6102GsOhpU/WXbA==
+  dependencies:
+    "@amplitude/analytics-types" "^2.5.0"
+    tslib "^2.4.1"
 
-"@amplitude/[email protected]":
-  version "0.7.33"
-  resolved "https://registry.npmjs.org/@amplitude/ua-parser-js/-/ua-parser-js-0.7.33.tgz"
-  integrity sha512-wKEtVR4vXuPT9cVEIJkYWnlF++Gx3BdLatPBM+SZ1ztVIvnhdGBZR/mn9x/PzyrMcRlZmyi6L56I2J3doVBnjA==
+"@amplitude/analytics-types@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-2.5.0.tgz#d0d1ed66474b268909ccd89a06909e99f466bc14"
+  integrity sha512-aY69WxUvVlaCU+9geShjTsAYdUTvegEXH9i4WK/97kNbNLl4/7qUuIPe4hNireDeKLuQA9SA3H7TKynuNomDxw==
 
-"@amplitude/utils@^1.10.2":
-  version "1.10.2"
-  resolved "https://registry.npmjs.org/@amplitude/utils/-/utils-1.10.2.tgz"
-  integrity sha512-tVsHXu61jITEtRjB7NugQ5cVDd4QDzne8T3ifmZye7TiJeUfVRvqe44gDtf55A+7VqhDhyEIIXTA1iVcDGqlEw==
+"@amplitude/plugin-page-view-tracking-browser@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@amplitude/plugin-page-view-tracking-browser/-/plugin-page-view-tracking-browser-2.2.6.tgz#08e5d46fa0b88d2f3e546d6e32d98b36d782fc7c"
+  integrity sha512-Vv6gDWI1bEfAKgHzwumVuwa6dZKuMh9tJZPdwA2PAYqV46v1J0L3vmGIODy/F967NgCb+GDBGEiggeEYZRelYg==
   dependencies:
-    "@amplitude/types" "^1.10.2"
-    tslib "^2.0.0"
+    "@amplitude/analytics-client-common" "^2.1.3"
+    "@amplitude/analytics-types" "^2.5.0"
+    tslib "^2.4.1"
+
+"@amplitude/plugin-web-attribution-browser@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@amplitude/plugin-web-attribution-browser/-/plugin-web-attribution-browser-2.1.7.tgz#b2c1d7cb65fe784ad6b355c2001eadc7de91451c"
+  integrity sha512-Fg3b/rVpdBbNKct9op5kKmOX1wLKGq1sxJDm/S+uRNGegv8xXc1h825lZyARX75XUu0Xfn1+AnDrSmtiPnxsIA==
+  dependencies:
+    "@amplitude/analytics-client-common" "^2.1.3"
+    "@amplitude/analytics-core" "^2.2.4"
+    "@amplitude/analytics-types" "^2.5.0"
+    tslib "^2.4.1"
 
 "@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.2.1":
   version "2.2.1"
@@ -1968,18 +2004,6 @@ ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-[email protected]:
-  version "8.21.9"
-  resolved "https://registry.npmjs.org/amplitude-js/-/amplitude-js-8.21.9.tgz"
-  integrity sha512-d0jJH00wbXu7sxKtVwkdSXtVffjqdUrxuACKlnzP7jU5qt9wriXXMgHifdH5Oq+buKmyF8wKL9S02gAykysURA==
-  dependencies:
-    "@amplitude/analytics-connector" "^1.4.6"
-    "@amplitude/ua-parser-js" "0.7.33"
-    "@amplitude/utils" "^1.10.2"
-    "@babel/runtime" "^7.21.0"
-    blueimp-md5 "^2.19.0"
-    query-string "8.1.0"
-
 animation-frame-polyfill@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/animation-frame-polyfill/-/animation-frame-polyfill-1.0.2.tgz"
@@ -2359,11 +2383,6 @@ bluebird@^3.7.2:
   resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-blueimp-md5@^2.19.0:
-  version "2.19.0"
-  resolved "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz"
-  integrity sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==
-
 [email protected]:
   version "1.20.2"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
@@ -3155,11 +3174,6 @@ decimal.js@^10.4.3:
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
 
-decode-uri-component@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz"
-  integrity sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==
-
 deep-eql@^4.1.3:
   version "4.1.3"
   resolved "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz"
@@ -4329,11 +4343,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-filter-obj@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz"
-  integrity sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==
-
 [email protected]:
   version "1.2.0"
   resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz"
@@ -6972,15 +6981,6 @@ qs@^6.11.0, qs@^6.12.0:
   dependencies:
     side-channel "^1.0.6"
 
-[email protected]:
-  version "8.1.0"
-  resolved "https://registry.npmjs.org/query-string/-/query-string-8.1.0.tgz"
-  integrity sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==
-  dependencies:
-    decode-uri-component "^0.4.1"
-    filter-obj "^5.1.0"
-    split-on-first "^3.0.0"
-
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
@@ -7636,11 +7636,6 @@ [email protected]:
   resolved "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz"
   integrity sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==
 
-split-on-first@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz"
-  integrity sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==
-
 sshpk@^1.14.1:
   version "1.17.0"
   resolved "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz"
@@ -8111,7 +8106,7 @@ tslib@^1.8.1:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0:
+tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.1:
   version "2.6.2"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==