From 3f24906c2bd3cbe246c804bca32b1db97287adf8 Mon Sep 17 00:00:00 2001 From: Daniel Graham Date: Fri, 30 May 2025 14:54:05 -0700 Subject: [PATCH] feat: stub in frustration browser plugin --- .../plugin-frustration-browser/CHANGELOG.md | 4 ++ packages/plugin-frustration-browser/README.md | 48 +++++++++++++++ .../plugin-frustration-browser/jest.config.js | 11 ++++ .../plugin-frustration-browser/package.json | 59 +++++++++++++++++++ .../rollup.config.js | 6 ++ .../src/constants.ts | 1 + .../src/frustration-plugin.ts | 28 +++++++++ .../plugin-frustration-browser/src/index.ts | 2 + .../plugin-frustration-browser/src/version.ts | 1 + .../test/index.test.ts | 13 ++++ .../tsconfig.es5.json | 10 ++++ .../tsconfig.esm.json | 10 ++++ .../plugin-frustration-browser/tsconfig.json | 11 ++++ packages/plugin-stub-browser/README.md | 8 +-- packages/plugin-stub-browser/package.json | 2 - .../plugin-web-vitals-browser/package.json | 1 - test-server/autocapture/frustration.html | 30 ++++++++++ 17 files changed, 238 insertions(+), 7 deletions(-) create mode 100644 packages/plugin-frustration-browser/CHANGELOG.md create mode 100644 packages/plugin-frustration-browser/README.md create mode 100644 packages/plugin-frustration-browser/jest.config.js create mode 100644 packages/plugin-frustration-browser/package.json create mode 100644 packages/plugin-frustration-browser/rollup.config.js create mode 100644 packages/plugin-frustration-browser/src/constants.ts create mode 100644 packages/plugin-frustration-browser/src/frustration-plugin.ts create mode 100644 packages/plugin-frustration-browser/src/index.ts create mode 100644 packages/plugin-frustration-browser/src/version.ts create mode 100644 packages/plugin-frustration-browser/test/index.test.ts create mode 100644 packages/plugin-frustration-browser/tsconfig.es5.json create mode 100644 packages/plugin-frustration-browser/tsconfig.esm.json create mode 100644 packages/plugin-frustration-browser/tsconfig.json create mode 100644 test-server/autocapture/frustration.html diff --git a/packages/plugin-frustration-browser/CHANGELOG.md b/packages/plugin-frustration-browser/CHANGELOG.md new file mode 100644 index 000000000..e4d87c4d4 --- /dev/null +++ b/packages/plugin-frustration-browser/CHANGELOG.md @@ -0,0 +1,4 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. diff --git a/packages/plugin-frustration-browser/README.md b/packages/plugin-frustration-browser/README.md new file mode 100644 index 000000000..e739646f4 --- /dev/null +++ b/packages/plugin-frustration-browser/README.md @@ -0,0 +1,48 @@ +

+ + + +
+

+ +# @amplitude/plugin-frustration-browser (beta) +**This plugin is in beta at the moment, naming and interface might change in the future.** + +This plugin captures frustration analytics events like "Dead Clicks" and "Rage Clicks". + +## Installation + +This package is not published on NPM registry and is available to be installed using npm and yarn. + +```sh +# npm +npm install @amplitude/plugin-frustration-browser@beta + +# yarn +yarn add @amplitude/plugin-frustration-browser@beta +``` + +## Usage + +```typescript +import * as amplitude from '@amplitude/analytics-browser'; +import { frustrationPlugin } from '@amplitude/plugin-frustration-browser'; +``` + +### 2. Instantiate the plugin + +```typescript +const plugin = frustrationPlugin(); +``` + +### 3. Install plugin to Amplitude SDK + +```typescript +amplitude.add(plugin); +``` + +### 4. Initialize Amplitude SDK + +```typescript +amplitude.init('API_KEY'); +``` diff --git a/packages/plugin-frustration-browser/jest.config.js b/packages/plugin-frustration-browser/jest.config.js new file mode 100644 index 000000000..2954c7d07 --- /dev/null +++ b/packages/plugin-frustration-browser/jest.config.js @@ -0,0 +1,11 @@ +const baseConfig = require('../../jest.config.js'); +const package = require('./package'); + +module.exports = { + ...baseConfig, + displayName: package.name, + rootDir: '.', + testEnvironment: 'jsdom', + coveragePathIgnorePatterns: ['index.ts'], +}; + diff --git a/packages/plugin-frustration-browser/package.json b/packages/plugin-frustration-browser/package.json new file mode 100644 index 000000000..641dea6cd --- /dev/null +++ b/packages/plugin-frustration-browser/package.json @@ -0,0 +1,59 @@ +{ + "name": "@amplitude/plugin-frustration-browser", + "version": "0.0.1-alpha.1", + "description": "", + "author": "Amplitude Inc", + "homepage": "https://github.com/amplitude/Amplitude-TypeScript", + "license": "MIT", + "main": "lib/cjs/index.js", + "module": "lib/esm/index.js", + "types": "lib/esm/index.d.ts", + "sideEffects": false, + "publishConfig": { + "access": "public", + "tag": "alpha" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/amplitude/Amplitude-TypeScript.git" + }, + "scripts": { + "build": "yarn bundle && yarn build:es5 && yarn build:esm", + "bundle": "rollup --config rollup.config.js", + "build:es5": "tsc -p ./tsconfig.es5.json", + "build:esm": "tsc -p ./tsconfig.esm.json", + "watch": "tsc -p ./tsconfig.esm.json --watch", + "clean": "rimraf node_modules lib coverage", + "fix": "yarn fix:eslint & yarn fix:prettier", + "fix:eslint": "eslint '{src,test}/**/*.ts' --fix", + "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"", + "lint": "yarn lint:eslint & yarn lint:prettier", + "lint:eslint": "eslint '{src,test}/**/*.ts'", + "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"", + "test": "jest", + "typecheck": "tsc -p ./tsconfig.json", + "version": "yarn version-file && yarn build", + "version-file": "node -p \"'export const VERSION = \\'' + require('./package.json').version + '\\';'\" > src/version.ts" + }, + "bugs": { + "url": "https://github.com/amplitude/Amplitude-TypeScript/issues" + }, + "dependencies": { + "@amplitude/analytics-core": "^2.12.0", + "tslib": "^2.4.1" + }, + "devDependencies": { + "@amplitude/analytics-browser": "^2.17.6", + "@rollup/plugin-commonjs": "^23.0.4", + "@rollup/plugin-node-resolve": "^15.0.1", + "@rollup/plugin-typescript": "^10.0.1", + "css.escape": "^1.5.1", + "rollup": "^2.79.1", + "rollup-plugin-execute": "^1.1.1", + "rollup-plugin-gzip": "^3.1.0", + "rollup-plugin-terser": "^7.0.2" + }, + "files": [ + "lib" + ] +} diff --git a/packages/plugin-frustration-browser/rollup.config.js b/packages/plugin-frustration-browser/rollup.config.js new file mode 100644 index 000000000..37a62b350 --- /dev/null +++ b/packages/plugin-frustration-browser/rollup.config.js @@ -0,0 +1,6 @@ +import { iife, umd } from '../../scripts/build/rollup.config'; + +iife.input = umd.input; +iife.output.name = 'amplitudeFrustrationPlugin'; + +export default [umd, iife]; diff --git a/packages/plugin-frustration-browser/src/constants.ts b/packages/plugin-frustration-browser/src/constants.ts new file mode 100644 index 000000000..71ee51e92 --- /dev/null +++ b/packages/plugin-frustration-browser/src/constants.ts @@ -0,0 +1 @@ +export const PLUGIN_NAME = 'frustration-browser'; diff --git a/packages/plugin-frustration-browser/src/frustration-plugin.ts b/packages/plugin-frustration-browser/src/frustration-plugin.ts new file mode 100644 index 000000000..dd6163890 --- /dev/null +++ b/packages/plugin-frustration-browser/src/frustration-plugin.ts @@ -0,0 +1,28 @@ +/* eslint-disable no-restricted-globals */ +import { BrowserClient, BrowserConfig, EnrichmentPlugin } from '@amplitude/analytics-core'; +import { PLUGIN_NAME } from './constants'; + +export type BrowserEnrichmentPlugin = EnrichmentPlugin; + +export const frustrationPlugin = (): BrowserEnrichmentPlugin => { + const setup: BrowserEnrichmentPlugin['setup'] = async (/*config, amplitude*/) => { + // add logic here to setup any resources + }; + + /* istanbul ignore next */ + const execute: BrowserEnrichmentPlugin['execute'] = async (event) => { + return event; + }; + + const teardown = async () => { + // add logic here to clean up any resources + }; + + return { + name: PLUGIN_NAME, + type: 'enrichment', + setup, + execute, + teardown, + }; +}; diff --git a/packages/plugin-frustration-browser/src/index.ts b/packages/plugin-frustration-browser/src/index.ts new file mode 100644 index 000000000..ee2f60e38 --- /dev/null +++ b/packages/plugin-frustration-browser/src/index.ts @@ -0,0 +1,2 @@ +export { frustrationPlugin as plugin, frustrationPlugin } from './frustration-plugin'; +export { VERSION } from './version'; diff --git a/packages/plugin-frustration-browser/src/version.ts b/packages/plugin-frustration-browser/src/version.ts new file mode 100644 index 000000000..7d1e79869 --- /dev/null +++ b/packages/plugin-frustration-browser/src/version.ts @@ -0,0 +1 @@ +export const VERSION = '0.0.1-alpha.1'; diff --git a/packages/plugin-frustration-browser/test/index.test.ts b/packages/plugin-frustration-browser/test/index.test.ts new file mode 100644 index 000000000..685acedbd --- /dev/null +++ b/packages/plugin-frustration-browser/test/index.test.ts @@ -0,0 +1,13 @@ +import { frustrationPlugin } from '../src/index'; + +describe('frustration-browser', () => { + it('should be defined', () => { + expect(frustrationPlugin).toBeDefined(); + }); + it('should call setup and teardown without errors', async () => { + const plugin = frustrationPlugin(); + /* eslint-disable-next-line @typescript-eslint/no-unsafe-argument */ + await plugin?.setup?.({} as unknown as any, {} as unknown as any); + await plugin?.teardown?.(); + }); +}); diff --git a/packages/plugin-frustration-browser/tsconfig.es5.json b/packages/plugin-frustration-browser/tsconfig.es5.json new file mode 100644 index 000000000..77e041d3f --- /dev/null +++ b/packages/plugin-frustration-browser/tsconfig.es5.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "include": ["src/**/*"], + "compilerOptions": { + "module": "commonjs", + "noEmit": false, + "outDir": "lib/cjs", + "rootDir": "./src" + } +} diff --git a/packages/plugin-frustration-browser/tsconfig.esm.json b/packages/plugin-frustration-browser/tsconfig.esm.json new file mode 100644 index 000000000..bec981eee --- /dev/null +++ b/packages/plugin-frustration-browser/tsconfig.esm.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "include": ["src/**/*"], + "compilerOptions": { + "module": "es6", + "noEmit": false, + "outDir": "lib/esm", + "rootDir": "./src" + } +} diff --git a/packages/plugin-frustration-browser/tsconfig.json b/packages/plugin-frustration-browser/tsconfig.json new file mode 100644 index 000000000..68713e643 --- /dev/null +++ b/packages/plugin-frustration-browser/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*", "test/**/*"], + "compilerOptions": { + "baseUrl": ".", + "esModuleInterop": true, + "lib": ["dom"], + "noEmit": true, + "rootDir": "." + } +} diff --git a/packages/plugin-stub-browser/README.md b/packages/plugin-stub-browser/README.md index 7dd2fb01d..938e5e247 100644 --- a/packages/plugin-stub-browser/README.md +++ b/packages/plugin-stub-browser/README.md @@ -5,8 +5,8 @@

-# @amplitude/plugin-stub-browser (beta) -**This plugin is in beta at the moment, naming and interface might change in the future.** +# @amplitude/plugin-stub-browser (alpha) +**This plugin is in alpha at the moment, naming and interface might change in the future.** A stub plugin. Copy and paste this and rename to make a new plugin. @@ -18,10 +18,10 @@ This package is not published on NPM registry and is available to be installed u ```sh # npm -npm install @amplitude/plugin-stub-browser@beta +npm install @amplitude/plugin-stub-browser@alpha # yarn -yarn add @amplitude/plugin-stub-browser@beta +yarn add @amplitude/plugin-stub-browser@alpha ``` ## Usage diff --git a/packages/plugin-stub-browser/package.json b/packages/plugin-stub-browser/package.json index 49b283406..5e91e87db 100644 --- a/packages/plugin-stub-browser/package.json +++ b/packages/plugin-stub-browser/package.json @@ -31,7 +31,6 @@ "lint": "yarn lint:eslint & yarn lint:prettier", "lint:eslint": "eslint '{src,test}/**/*.ts'", "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"", - "publish": "node ../../scripts/publish/upload-to-s3.js", "test": "jest", "typecheck": "tsc -p ./tsconfig.json", "version": "yarn version-file && yarn build", @@ -42,7 +41,6 @@ }, "dependencies": { "@amplitude/analytics-core": "^2.12.0", - "rxjs": "^7.8.1", "tslib": "^2.4.1" }, "devDependencies": { diff --git a/packages/plugin-web-vitals-browser/package.json b/packages/plugin-web-vitals-browser/package.json index 2cf37ae46..dcc141a4f 100644 --- a/packages/plugin-web-vitals-browser/package.json +++ b/packages/plugin-web-vitals-browser/package.json @@ -40,7 +40,6 @@ }, "dependencies": { "@amplitude/analytics-core": "^2.12.0", - "rxjs": "^7.8.1", "tslib": "^2.4.1", "web-vitals": "^5.0.1" }, diff --git a/test-server/autocapture/frustration.html b/test-server/autocapture/frustration.html new file mode 100644 index 000000000..f8f26f93c --- /dev/null +++ b/test-server/autocapture/frustration.html @@ -0,0 +1,30 @@ + + + + + + + Frustration Analytics Test + + +
+
Placeholder to add a Rage Click test
+
Placeholder to add a Dead Click test
+
Placeholder to add a non-Dead Click test
+
+ + +