@brainfish-ai/web-tracker 0.0.4-alpha.9 → 0.0.4-beta.1

package/src/utils/capture.test.ts

@@ -1,83 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,7 +0,0 @@
-interface ImportMetaEnv {
-    readonly PACKAGE_VERSION: string;
-}
-
-interface ImportMeta {
-    readonly env: ImportMetaEnv;
-}

package/tailwind.config.cjs

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

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "types": ["vite/client", "jest"],
-    "baseUrl": ".",
-    "declaration": true
-  },
-  "include": ["src"],
-  "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/tests/**"]
-}

package/vite.config.ts

@@ -1,50 +0,0 @@
-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';
-import tsconfigPaths from 'vite-tsconfig-paths';
-import { version } from './package.json';
-
-export default defineConfig({
-  plugins: [
-    tsconfigPaths(),
-    dts({
-      tsconfigPath: './tsconfig.json',
-      insertTypesEntry: true,
-      include: ['src'],
-    }),
-    compression(),
-    visualizer(),
-  ],
-  build: {
-    target: 'esnext',
-    sourcemap: false,
-    lib: {
-      entry: ['index.ts', 'src/tracker.ts'],
-      formats: ['es'],
-      fileName: (format, entryName) => `${entryName}.js`,
-    },
-    minify: false,
-    terserOptions: {
-      compress: {
-        drop_console: true,
-        drop_debugger: true,
-      },
-    },
-    rollupOptions: {
-      treeshake: true,
-      plugins: [terser()],
-      external: ['@google-cloud/dlp'],
-    },
-  },
-  test: {
-    environment: 'jsdom',
-  },
-  define: {
-   'import.meta.env.PACKAGE_VERSION': JSON.stringify(version)
-  },
-  optimizeDeps: {
-    include: ['@brainfish-ai/tracker-sdk'],
-  }
-});