@brainfish-ai/web-tracker 0.0.1-alpha.0

package/dist/utils/capture.d.ts

@@ -0,0 +1,2 @@
+declare function captureScreenshot(domBody: HTMLElement): Promise<string>;
+export { captureScreenshot };

package/dist/utils/capture.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/redact.d.ts

@@ -0,0 +1,3 @@
+declare function redactTextContent(text: string): string;
+declare function redactPIIInDOM(element: Element): void;
+export { redactPIIInDOM, redactTextContent };

package/dist/utils/redact.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/snapshot.d.ts

@@ -0,0 +1,2 @@
+declare function screenshot(): Promise<string | undefined>;
+export { screenshot };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@brainfish-ai/web-tracker",
+  "version": "0.0.1-alpha.0",
+  "main": "dist/index.js",
+  "description": "Brainfish Tracker for Web",
+  "private": false,
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview --port 6006",
+    "test": "vitest"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-dts": "^4.0.3"
+  },
+  "dependencies": {
+    "@brainfish-ai/tracker-sdk": "*",
+    "html-to-image": "^1.11.11",
+    "redact-pii": "^3.4.0",
+    "rrweb": "^2.0.0-alpha.4"
+  },
+  "keywords": [
+    "typescript",
+    "web",
+    "brainfish",
+    "in-app",
+    "tracker"
+  ]
+}

package/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/cdn.ts

@@ -0,0 +1,31 @@
+import { Tracker } from './index';
+
+declare global {
+  interface Window {
+    tracker: {
+      q?: [string, ...any[]];
+      (method: string, ...args: any[]): void;
+    };
+  }
+}
+
+((window) => {
+  if (window.tracker && 'q' in window.tracker) {
+    const queue = window.tracker.q || [];
+    const tracker = new Tracker(queue.shift()[1]) as any;
+    queue.forEach((item) => {
+      if (item[0] in tracker) {
+        tracker[item[0]](...item.slice(1));
+      }
+    });
+
+    window.tracker = (t, ...args) => {
+      const fn = tracker[t] ? tracker[t].bind(tracker) : undefined;
+      if (typeof fn === 'function') {
+        fn(...args);
+      } else {
+        console.warn(`tracker.js: ${t} is not a function`);
+      }
+    };
+  }
+})(window);

package/src/index.ts

@@ -0,0 +1,190 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+
+import type {
+  TrackerSdkOptions,
+  TrackProperties,
+} from '@brainfish-ai/tracker-sdk';
+import { TrackerSdk } from '@brainfish-ai/tracker-sdk';
+import { screenshot } from './utils/snapshot';
+
+export type * from '@brainfish-ai/tracker-sdk';
+
+export type TrackerOptions = TrackerSdkOptions & {
+  trackOutgoingLinks?: boolean;
+  trackScreenViews?: boolean;
+  trackAttributes?: boolean;
+  trackHashChanges?: boolean;
+};
+
+function toCamelCase(str: string) {
+  return str.replace(/([-_][a-z])/gi, ($1) =>
+    $1.toUpperCase().replace('-', '').replace('_', ''),
+  );
+}
+
+export class Tracker extends TrackerSdk {
+  private lastPath = '';
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(public options: TrackerOptions) {
+    super({
+      sdk: 'web',
+      sdkVersion: __PACKAGE_VERSION__,
+      ...options,
+    });
+
+    if (!this.isServer()) {
+      this.setGlobalProperties({
+        __referrer: document.referrer,
+      });
+
+      if (this.options.trackOutgoingLinks) {
+        this.trackOutgoingLinks();
+      }
+
+      if (this.options.trackScreenViews) {
+        this.trackScreenViews();
+      }
+
+      if (this.options.trackAttributes) {
+        this.trackAttributes();
+      }
+    }
+  }
+
+  private debounce(func: () => void, delay: number) {
+    this.debounceTimer && clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(func, delay);
+  }
+
+  private isServer() {
+    return typeof document === 'undefined';
+  }
+
+  public trackOutgoingLinks() {
+    if (this.isServer()) {
+      return;
+    }
+
+    document.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      const link = target.closest('a');
+      if (link && target) {
+        const href = link.getAttribute('href');
+        if (href?.startsWith('http')) {
+          super.track('link_out', {
+            href,
+            text:
+              link.innerText ||
+              link.getAttribute('title') ||
+              target.getAttribute('alt') ||
+              target.getAttribute('title'),
+          });
+        }
+      }
+    });
+  }
+
+  public trackScreenViews() {
+    if (this.isServer()) {
+      return;
+    }
+
+    this.screenView();
+
+    const oldPushState = history.pushState;
+    history.pushState = function pushState(...args) {
+      const ret = oldPushState.apply(this, args);
+      window.dispatchEvent(new Event('pushstate'));
+      window.dispatchEvent(new Event('locationchange'));
+      return ret;
+    };
+
+    const oldReplaceState = history.replaceState;
+    history.replaceState = function replaceState(...args) {
+      const ret = oldReplaceState.apply(this, args);
+      window.dispatchEvent(new Event('replacestate'));
+      window.dispatchEvent(new Event('locationchange'));
+      return ret;
+    };
+
+    window.addEventListener('popstate', function () {
+      window.dispatchEvent(new Event('locationchange'));
+    });
+
+    const eventHandler = () => this.debounce(() => this.screenView(), 50);
+
+    if (this.options.trackHashChanges) {
+      window.addEventListener('hashchange', eventHandler);
+    } else {
+      window.addEventListener('locationchange', eventHandler);
+    }
+  }
+
+  public trackAttributes() {
+    if (this.isServer()) {
+      return;
+    }
+
+    document.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      const btn = target.closest('button');
+      const anchor = target.closest('a');
+      const element = btn?.getAttribute('data-track')
+        ? btn
+        : anchor?.getAttribute('data-track')
+          ? anchor
+          : null;
+      if (element) {
+        const properties: Record<string, unknown> = {};
+        for (const attr of element.attributes) {
+          if (attr.name.startsWith('data-') && attr.name !== 'data-track') {
+            properties[toCamelCase(attr.name.replace(/^data-/, ''))] =
+              attr.value;
+          }
+        }
+        const name = element.getAttribute('data-track');
+        if (name) {
+          super.track(name, properties);
+        }
+      }
+    });
+  }
+
+  async screenView(properties?: TrackProperties): Promise<void>;
+  async screenView(path: string, properties?: TrackProperties): Promise<void>;
+  async screenView(
+    pathOrProperties?: string | TrackProperties,
+    propertiesOrUndefined?: TrackProperties,
+  ): Promise<void> {
+    if (this.isServer()) {
+      return;
+    }
+
+    let path: string;
+    let properties: TrackProperties | undefined;
+
+    if (typeof pathOrProperties === 'string') {
+      path = pathOrProperties;
+      properties = propertiesOrUndefined;
+    } else {
+      path = window.location.href;
+      properties = pathOrProperties;
+    }
+
+    if (this.lastPath === path) {
+      return;
+    }
+
+    // capture screenshot
+    const snapshot = await screenshot();
+
+    this.lastPath = path;
+    super.track('screen_view', {
+      ...(properties ?? {}),
+      screenshot: snapshot,
+      __path: path,
+      __title: document.title,
+    });
+  }
+}

package/src/setupTests.ts

@@ -0,0 +1 @@
+// Setup for Jest tests

package/src/utils/capture.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { captureScreenshot } from './capture';
+import { toPng } from 'html-to-image';
+
+// Mock the html-to-image module
+vi.mock('html-to-image', () => ({
+  toPng: vi.fn(),
+}));
+
+describe('captureScreenshot', () => {
+  let mockDomBody: HTMLElement;
+
+  beforeEach(() => {
+    // Create a mock DOM body
+    mockDomBody = document.createElement('div');
+    document.body.appendChild(mockDomBody);
+
+    // Mock document properties
+    vi.spyOn(document.documentElement, 'scrollHeight', 'get').mockReturnValue(1000);
+    vi.spyOn(document.documentElement, 'scrollWidth', 'get').mockReturnValue(800);
+
+    // Mock styleSheets
+    Object.defineProperty(document, 'styleSheets', {
+      value: [
+        {
+          cssRules: [
+            { cssText: 'body { background-color: white; }' },
+            { cssText: 'h1 { color: black; }' },
+          ],
+        },
+      ],
+      configurable: true,
+    });
+
+    // Mock toPng function
+    vi.mocked(toPng).mockResolvedValue('mock-image-data');
+  });
+
+  afterEach(() => {
+    document.body.removeChild(mockDomBody);
+    vi.restoreAllMocks();
+  });
+
+  it('should capture a screenshot of the entire page', async () => {
+    const result = await captureScreenshot(mockDomBody);
+
+    expect(result).toBe('mock-image-data');
+    expect(toPng).toHaveBeenCalledWith(mockDomBody, expect.objectContaining({
+      quality: 0.7,
+      width: 800,
+      height: 1000,
+      style: { transform: 'scale(1)' },
+      skipFonts: true,
+      cacheBust: true,
+      backgroundColor: 'white',
+      fetchRequestInit: { mode: 'cors' },
+    }));
+  });
+
+  it('should handle errors when accessing stylesheet rules', async () => {
+    const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    
+    // Mock styleSheets to throw an error
+    Object.defineProperty(document, 'styleSheets', {
+      get: () => ({
+        [Symbol.iterator]: function* () {
+          yield {
+            cssRules: {
+              [Symbol.iterator]: function* () {
+                throw new Error('Access denied');
+              },
+            },
+          };
+        },
+      }),
+      configurable: true,
+    });
+
+    await captureScreenshot(mockDomBody);
+
+    expect(consoleLogSpy).toHaveBeenCalledWith('Error accessing stylesheet rules:', expect.any(Error));
+  });
+});

package/src/utils/capture.ts

@@ -0,0 +1,51 @@
+import { toPng } from 'html-to-image';
+
+// Function to capture a screenshot of the entire page
+async function captureScreenshot(domBody: HTMLElement): Promise<string> {
+    const height = document.documentElement.scrollHeight;
+    const width = document.documentElement.scrollWidth;
+
+    // Collect all stylesheet rules
+    const styles = Array.from(document.styleSheets)
+        .map(styleSheet => {
+            try {
+                return Array.from(styleSheet.cssRules)
+                    .map(rule => rule.cssText)
+                    .join('');
+            } catch (e) {
+                console.log('Error accessing stylesheet rules:', e);
+                return '';
+            }
+        })
+        .join('\n');
+
+    // Create a new style element with all the rules
+    const styleElement = document.createElement('style');
+    styleElement.textContent = styles;
+    domBody.appendChild(styleElement);
+
+    // Capture the screenshot
+    const image = await toPng(domBody, {
+        quality: 0.7,               // Set quality to 0.7
+        width,                    // Set width to the scroll width
+        height,                   // Set height to the scroll height
+        style: {
+            transform: 'scale(1)', // Set scale to 1 to avoid scaling
+        },
+        skipFonts: true,          // Avoid embedding web fonts to bypass SecurityError
+        cacheBust: true,          // Prevent caching
+        backgroundColor: 'white', // Set background color to white
+        fetchRequestInit: {
+            mode: 'cors',          // Enable CORS
+        },
+    })
+
+    // Remove the style element
+    domBody.removeChild(styleElement);
+
+    return image;
+}
+
+export { captureScreenshot };
+
+

package/src/utils/redact.test.ts

@@ -0,0 +1,74 @@
+import { redactTextContent, redactPIIInDOM } from './redact';
+import { describe, it, expect, beforeEach } from 'vitest';
+
+describe('redactTextContent', () => {
+    it('should redact email addresses', () => {
+        const text = 'Contact me at john.doe@example.com';
+        const redacted = redactTextContent(text);
+        expect(redacted).toBe('Contact me at EMAIL_ADDRESS');
+    });
+
+    it('should redact phone numbers', () => {
+        const text = 'My phone number is 123-456-7890';
+        const redacted = redactTextContent(text);
+        expect(redacted).toBe('My phone number is PHONE_NUMBER');
+    });
+
+    it('should redact SSNs', () => {
+        const text = 'SSN: 123-45-6789';
+        const redacted = redactTextContent(text);
+        expect(redacted).toBe('SSN: US_SOCIAL_SECURITY_NUMBER');
+    });
+
+    it('should redact passport numbers', () => {
+        const text = 'Passport number: A1234567';
+        const redacted = redactTextContent(text);
+        expect(redacted).toBe('Passport number: PASSPORT_NUMBER');
+    });
+
+    it('should return the original text if no PII is found', () => {
+        const text = 'No PII here';
+        const redacted = redactTextContent(text);
+        expect(redacted).toBe(text);
+    });
+
+    it('should redact credit card numbers', () => {
+        const text = 'Credit Card: 1234-5678-1234-5678';
+        const redacted = redactTextContent(text);
+        expect(redacted).toBe('Credit Card: CREDIT_CARD_NUMBER');
+    });
+});
+
+describe('redactPIIInDOM', () => {
+    beforeEach(() => {
+        document.body.innerHTML = `
+            <div id="content">
+                <p>Email: john.doe@example.com</p>
+                <p>Phone: 123-456-7890</p>
+                <p>SSN: 123-45-6789</p>
+                <p>Passport: A1234567</p>
+                <p>No PII here</p>
+            </div>
+        `;
+    });
+
+    it('should redact PII in text nodes', () => {
+        const element = document.getElementById('content') as Element;
+        redactPIIInDOM(element);
+
+        expect(element.innerHTML).toContain('Email: EMAIL_ADDRESS');
+        expect(element.innerHTML).toContain('Phone: PHONE_NUMBER');
+        expect(element.innerHTML).toContain('SSN: US_SOCIAL_SECURITY_NUMBER');
+        expect(element.innerHTML).toContain('Passport: PASSPORT_NUMBER');
+        expect(element.innerHTML).toContain('No PII here');
+    });
+
+    it('should not change text content without PII', () => {
+        const element = document.querySelector('p:last-child') as Element;
+        const originalText = element.textContent;
+
+        redactPIIInDOM(element);
+
+        expect(element.textContent).toBe(originalText);
+    });
+});

package/src/utils/redact.ts

@@ -0,0 +1,57 @@
+import { SyncRedactor } from "redact-pii";
+
+const customRedactors = {
+    before: [
+        {
+            regexpPattern: /\b[A-Z]\d{7}\b/g,
+            replaceWith: 'PASSPORT_NUMBER'
+        },
+        {
+            regexpPattern: /(?<=password: )(.*)/gi,
+            replaceWith: '[REDACTED]'
+        }
+    ],
+};
+
+// Function to redact PII in text content
+function redactTextContent(text: string): string {
+    const redactor = new SyncRedactor({
+        builtInRedactors: {
+            names: {
+                replaceWith: 'ANONYMOUS_PERSON'
+            }
+        },
+        customRedactors
+    });
+    return redactor.redact(text);
+}
+
+// Function to recursively find and redact PII in text nodes
+function redactPIIInDOM(element: Element) {
+    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+    let currentNode;
+
+    while ((currentNode = treeWalker.nextNode())) {
+        const originalText = currentNode.nodeValue as string;
+        const redactedText = redactTextContent(originalText);
+
+        if (originalText !== redactedText) {
+            currentNode.nodeValue = redactedText;
+        }
+    }
+
+    // Redact PII in input fields
+    redactPIIInInputs(element);
+}
+
+// Function to redact PII from passwords in input fields
+function redactPIIInInputs(element: Element) {
+    const inputs = Array.from(element.querySelectorAll('input[type="password"]'));
+    inputs.forEach(input => {
+        const passwordInput = input as HTMLInputElement;
+        passwordInput.value = '[REDACTED]';
+    });
+}
+
+export { redactPIIInDOM, redactTextContent };
+

package/src/utils/snapshot.ts

@@ -0,0 +1,35 @@
+import { captureScreenshot } from "./capture";
+import { redactPIIInDOM } from "./redact";
+
+async function screenshot() {
+    try {
+        // Wait for page to load
+        await new Promise((resolve) => {
+            if (document.readyState === 'complete') {
+                resolve(null);
+            } else {
+                window.addEventListener('load', resolve);
+            }
+        });
+
+        // Clone the document body to avoid modifying the original
+        const clonedBody = document.body.cloneNode(true) as HTMLElement;
+
+        // Redact PII in text content
+        redactPIIInDOM(clonedBody);
+
+        // Capture the screenshot
+        const imageDataUrl = await captureScreenshot(clonedBody);
+
+        // if local env, print the imageDataUrl to the console
+        if (window.location.hostname === 'localhost') {
+            console.log(imageDataUrl);
+        }
+
+        return imageDataUrl;
+    } catch (error) {
+        console.error('An error occurred:', error);
+    }
+}
+
+export { screenshot };

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+declare const __PACKAGE_VERSION__: string;

package/tailwind.config.cjs

@@ -0,0 +1,9 @@
+const { withAnimations } = require('animated-tailwindcss')
+
+module.exports = withAnimations({
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+});

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "types": ["vite/client", "jest"],
+    "baseUrl": ".",
+    "declaration": true
+  }
+}

package/vite.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig } from 'vite';
+import { terser } from 'rollup-plugin-terser';
+import dts from 'vite-plugin-dts';
+import compression from 'vite-plugin-compression';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+export default defineConfig({
+  plugins: [
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+    }),
+    compression(),
+    visualizer(),
+  ],
+  build: {
+    target: 'esnext',
+    sourcemap: false,
+    lib: {
+      entry: ['src/index.ts', 'src/cdn.ts'],
+      formats: ['cjs', 'es'],
+      fileName: (format, entryName) =>
+        `${entryName}${format === 'es' ? '' : '.cjs'}.js`,
+    },
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+      },
+    },
+    rollupOptions: {
+      plugins: [terser()],
+    },
+  },
+  test: {
+    environment: 'jsdom',
+  },
+  define: {
+    __PACKAGE_VERSION__: JSON.stringify(process.env.npm_package_version),
+  },
+  optimizeDeps: {
+    include: ['@brainfish-ai/tracker-sdk'],
+  }
+});