Basic Setup Example
This example demonstrates a minimal TraceScout integration that works in any web application.
HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TraceScout Basic Example</title>
</head>
<body>
<h1>My Application</h1>
<form id="contact-form">
<input type="text" name="name" placeholder="Your name">
<!-- Mask email input for privacy -->
<input type="email" name="email" class="tracescout-mask" placeholder="Email">
<button type="submit">Submit</button>
</form>
<!-- Load TraceScout SDK -->
<script src="https://cdn.tracescout.com/sdk/tracescout.min.js"></script>
<script>
// Initialize TraceScout
TraceScout.init({
apiKey: 'ts_api_your_api_key',
organizationId: 'your-organization-id',
projectId: 'your-project-id',
environment: 'production',
// Enable all features
enableSessionRecording: true,
recordingMaskAllInputs: false, // Only mask specific inputs
// Callbacks
onChunkUploaded: function(chunk) {
console.log('Chunk uploaded:', chunk.chunkId);
}
});
// Track form submission
document.getElementById('contact-form').addEventListener('submit', function(e) {
e.preventDefault();
// Add custom event
TraceScout.addCustomEvent('form_submitted', {
formId: 'contact-form',
timestamp: Date.now()
});
// Continue with form submission...
});
</script>
</body>
</html>
JavaScript Module Example
// tracescout-setup.js
// Configuration
const config = {
apiKey: 'ts_api_your_api_key',
organizationId: 'your-organization-id',
projectId: 'your-project-id',
environment: process.env.NODE_ENV || 'development',
// Session Recording
enableSessionRecording: true,
enableSessionChunking: true,
enableSessionUploads: true,
// Privacy
recordingMaskAllInputs: true,
recordingBlockClass: 'sensitive-data',
// Upload
uploadBatchSize: 3,
enableUploadCompression: true,
enableOfflineQueue: true,
};
// Initialize
async function initTraceScout() {
try {
await TraceScout.init(config);
console.log('TraceScout initialized successfully');
// Optional: Identify user if logged in
const user = getCurrentUser();
if (user) {
TraceScout.setUser(user.id, {
email: user.email,
name: user.name,
});
}
} catch (error) {
console.error('Failed to initialize TraceScout:', error);
}
}
// Helper function to track events
function trackEvent(name, properties = {}) {
TraceScout.addCustomEvent(name, {
...properties,
timestamp: Date.now(),
url: window.location.href,
});
}
// Export for use in other modules
export { initTraceScout, trackEvent };
Usage
import { initTraceScout, trackEvent } from './tracescout-setup.js';
// Initialize on page load
document.addEventListener('DOMContentLoaded', initTraceScout);
// Track user actions
document.querySelector('#buy-button').addEventListener('click', () => {
trackEvent('purchase_clicked', {
productId: '12345',
price: 29.99,
});
});
Verification
After setup, verify everything is working:
1. Check Console
[TraceScout] ✅ SDK Initialized Successfully
[TraceScout] Session ID: ts_1699876543210_abc123
[TraceScout] Features enabled: sessionRecording, networkMonitoring, consoleCapture
2. Check Network Tab
You should see requests to:
api.tracescout.com/api/projects/{projectId}/sdk-config(configuration)api.tracescout.com/api/projects/{projectId}/sessions/{sessionId}/chunks(session data)
3. Check Dashboard
- Go to app.tracescout.com
- Navigate to your project
- Click on "Sessions"
- You should see your new session
Common Patterns
Track Page Views
// Track page views in SPA
function trackPageView() {
TraceScout.addCustomEvent('page_view', {
path: window.location.pathname,
title: document.title,
referrer: document.referrer,
});
}
// Call on route change
window.addEventListener('popstate', trackPageView);
Track Errors
// Global error handler
window.addEventListener('error', (event) => {
TraceScout.addCustomEvent('javascript_error', {
message: event.message,
filename: event.filename,
lineno: event.lineno,
colno: event.colno,
});
});
// Promise rejection handler
window.addEventListener('unhandledrejection', (event) => {
TraceScout.addCustomEvent('unhandled_rejection', {
reason: String(event.reason),
});
});
Track User Actions
// Track button clicks
document.querySelectorAll('[data-track]').forEach(element => {
element.addEventListener('click', () => {
const trackData = element.dataset.track;
TraceScout.addCustomEvent('click', {
element: trackData,
text: element.textContent,
});
});
});
Troubleshooting
SDK Not Loading
If you see "TraceScout is not defined", make sure the script tag is loaded before your initialization code.
No Sessions Appearing
Check that your API key, organization ID, and project ID are correct. These values are available in your project settings.
Development Mode
In development, consider using the dev build for better debugging:
<script src="https://cdn.tracescout.com/sdk/tracescout.dev.umd.js"></script>