Browser-based gTag OSINT tool does not run, is not fully functional, and returns no scan results after form submission

`I’m building a browser-based gTag OSINT tool to monitor spoofed user-agents using Puppeteer and a WebSocket/Express backend.

The frontend dashboard renders correctly, and the form accepts input, but submitting the form does not trigger scans or produce any data. I also notice that some WebGL options don’t behave as expected, though I’m not sure if that’s related.

There are:

  • No JS console errors
  • No backend logs showing incoming POSTs or WebSocket activity
  • No chart data or scan results rendering

Any help would be appreciated. I’m a novice and just want to get form→scan→result working before scaling up.


What I expect:

  • Form submission should call /api/scan (via fetch() or WebSocket)
  • Backend should run scanTag(tag, url) and return result
  • UI should update with new scan data and chart stats

What I’ve tried:

  • Verified endpoint /api/scan exists and works when hit manually (Postman)
  • Checked dashboard.js to confirm form handler is present and fetch() call exists
  • Backend logs show nothing when form is submitted
  • scanTag() works correctly if triggered from backend during startup

Code (frontend)

form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const submitBtn = form.querySelector('button[type="submit"]');
      if (submitBtn) submitBtn.disabled = true;

      try {
        const formData = new FormData(form);
        const data = {
          tag: formData.get('tag'),
          url: formData.get('url') || this.config.defaultUrl,
          webglPreset: formData.get('webglPreset'),
          timezone: formData.get('timezone'),
          language: formData.get('language'),
          proxy: formData.get('proxy')
        };

        if (!data.tag) throw new Error('Tag is required');

        const response = await fetch('/api/scan', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });

        if (!response.ok) {
          const error = await response.json();
          throw new Error(error.message || 'Scan failed');
        }

        const result = await response.json();
        this.showToast(
          'Scan Complete',
          result.status === 'LIVE' ? 'success' : 'danger',
          `${data.tag}: ${result.status}`
        );

        this.updateScanUI({
          tag: data.tag,
          status: result.status,
          confidence: result.confidence || 0
        });

      } catch (error) {
        this.showToast('Scan Failed', 'danger', error.message);
      } finally {
        if (submitBtn) submitBtn.disabled = false;
      }
    });
  }

Solution:

Verify Form Element: Ensure form is correctly selected in dashboard.js. Add a debug log to confirm the event listener is firing:

const form = document.querySelector('#scan-form'); // Replace with your form's ID or selector
if (!form) console.error('Form not found');
form.addEventListener('submit', async (e) => {
    e.preventDefault();
    console.log('Form submitted'); // Debug
    const submitBtn = form.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    // ... rest of your code
});

Complete Fetch Call: Your provided code is cut off. Ensure the fetch call is complete and handles responses/errors:

const response = await fetch('/api/scan', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
});
if (!response.ok) throw new Error('Scan failed');
const result = await response.json();
console.log('Scan result:', result); // Debug
submitBtn.disabled = false;
// Update UI with result

Check Backend Logs: Add logging in your Express /api/scan route to confirm requests are received:

app.post('/api/scan', async (req, res) => {
    console.log('Received scan request:', req.body);
    // ... scanTag logic
});
app.post('/api/scan', async (req, res) => {
    console.log('Received scan request:', req.body);
    // ... scanTag logic
});