JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adobe Analytics Call Crawler</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        textarea {
            width: 100%;
            height: 150px;
            margin-bottom: 10px;
        }
        button {
            font-size: 16px;
            cursor: pointer;
        }
        #results {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            white-space: pre-wrap;
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
            vertical-align: top;
            white-space: nowrap;
        }
        th {
            background-color: #f2f2f2;
        }
        .empty-value {
            color: red;
        }
        .call-icon {
            cursor: pointer;
            font-size: 20px;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
           ...

JavaScript

const express = require('express');
const puppeteer = require('puppeteer');
const cors = require('cors');

const app = express();
app.use(express.json());
app.use(cors());

async function crawlUrl(url, userAgent) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    if (userAgent) {
        await page.setUserAgent(userAgent);
    }

    const adobeAnalyticsCalls = [];

    await page.setRequestInterception(true);
    page.on('request', request => {
        if (request.url().includes('b/ss/')) {
            adobeAnalyticsCalls.push(request.url());
        }
        request.continue();
    });

    try {
        await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 });
    } catch (error) {
        console.error(`Error navigating to ${url}: ${error.message}`);
    }

    await browser.close();
    return adobeAnalyticsCalls;
}

app.post('/crawl', async (req, res) => {
    const { urls, userAgent } = req.body;
    const results = [];

    for (const url of urls) {
        try {
            const calls = await crawlUrl(url, userAgent);
            results.push({ url, calls, error: null });
        } catch (error) {
            results.push({ url, calls: [], error: error.message });
        }
    }

    res.json(results);
});

const PORT = 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));