Session Recording

import { useAnalytics } from "mentiq-sdk";

function RecordingControls() {
  const analytics = useAnalytics();

  return (
    <div>
      <button onClick={() => analytics.startRecording()}>
        Start Recording
      </button>
      <button onClick={() => analytics.stopRecording()}>
        Stop Recording
      </button>
      <button onClick={() => analytics.pauseRecording()}>
        Pause
      </button>
      <button onClick={() => analytics.resumeRecording()}>
        Resume
      </button>
      
      {analytics.isRecordingActive() && (
        <span style={{ color: 'red' }}>🔴 Recording Active</span>
      )}
    </div>
  );
}

import { SessionRecorder } from "mentiq-sdk";

const recorder = new SessionRecorder(
  analytics.config,
  analytics.getSessionId(),
  {
    maskAllInputs: true,    // Mask all input fields (default: true)
    blockClass: "sensitive", // Block elements with this class
    ignoreClass: "no-record", // Ignore these elements entirely
    maskTextClass: "private", // Mask text in these elements
  }
);

<input 
  type="password" 
  className="mentiq-block" // Will not be recorded at all
/>

<div className="mentiq-mask">
  User's private information  {/* Will appear as "***" */}
</div>

<section className="mentiq-ignore">
  {/* This entire section won't be recorded */}
  <CreditCardForm />
</section>

function CheckoutPage() {
  return (
    <form>
      {/* Regular fields - recorded normally */}
      <input name="email" type="email" />
      
      {/* Masked fields */}
      <input 
        name="address" 
        className="mentiq-mask" 
      />
      
      {/* Completely blocked */}
      <div className="mentiq-block">
        <input name="card-number" />
        <input name="cvv" type="password" />
      </div>
    </form>
  );
}

import { SessionRecorder } from "mentiq-sdk";

const recorder = new SessionRecorder(
  analytics.config,
  analytics.getSessionId(),
  {
    maxDuration: 10 * 60 * 1000,  // Max 10 minutes per recording
    checkoutEveryNms: 30 * 1000,  // Full snapshot every 30 seconds
    blockClass: "sensitive",       // Custom block class
    maskAllInputs: true,           // Mask all inputs
    inlineStylesheet: true,        // Include styles in recording
    collectFonts: true,            // Collect font data
    sampling: {
      mousemove: 50,               // Sample mouse movements every 50ms
      scroll: 150,                 // Sample scroll events every 150ms
      input: "last",               // Only record final input value
    },
  }
);

private async uploadRecording(isFinal: boolean = false): Promise<void> {
  const endpoint = `${
    this.config.endpoint || "https://api.mentiq.io"
  }/api/v1/sessions/${this.sessionId}/recordings`;

  // Calculate duration from event timestamps
  const durationMs = lastTimestamp - firstTimestamp;
  const duration = Math.max(1, Math.floor(durationMs / 1000));

  const response = await fetch(endpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `ApiKey ${this.config.apiKey}`,
      "X-Project-ID": this.config.projectId,
    },
    body: JSON.stringify({
      events: eventsToUpload,
      duration: duration,
      start_url: window.location.href,
      user_id: this.config.userId || null,
      is_final: isFinal,
      event_offset: this.uploadedEventCount,
    }),
  });
}

interface RecordingUpload {
  events: RRWebEvent[];        // rrweb events
  duration: number;            // Session duration (seconds)
  start_url: string;           // Page URL when recording started
  user_id: string | null;      // Identified user ID
  is_final: boolean;           // Is this the final upload?
  event_offset: number;        // Number of events already uploaded
}

function SupportTicketPage({ ticketId }) {
  const analytics = useAnalytics();

  useEffect(() => {
    // Start recording when viewing support tickets
    analytics.startRecording();
    
    return () => {
      // Stop when leaving the page
      analytics.stopRecording();
    };
  }, [analytics]);

  return <TicketDetails ticketId={ticketId} />;
}

function CheckoutFlow() {
  const analytics = useAnalytics();

  useEffect(() => {
    // Record entire checkout process
    analytics.startRecording();
  }, []);

  const handleCheckoutComplete = () => {
    // Stop recording after successful purchase
    analytics.stopRecording();
  };

  return <CheckoutForm onComplete={handleCheckoutComplete} />;
}

function App() {
  const { userPlan } = useAuth();

  return (
    <AnalyticsProvider
      config={{
        apiKey: "your-api-key",
        projectId: "your-project-id",
        // Only record free plan users to understand upgrade friction
        enableSessionRecording: userPlan === "free",
      }}
    >
      <YourApp />
    </AnalyticsProvider>
  );
}

const recorder = new SessionRecorder(config, sessionId, {
  sampling: {
    mousemove: 100,    // Less frequent mouse sampling
    scroll: 300,       // Less frequent scroll sampling
    input: "last",     // Only record final values
  },
  maxDuration: 5 * 60 * 1000, // Shorter max duration
});

function App() {
  const [hasConsent, setHasConsent] = useState(false);

  return (
    <>
      {!hasConsent && (
        <ConsentBanner onAccept={() => setHasConsent(true)} />
      )}
      
      <AnalyticsProvider
        config={{
          apiKey: "your-api-key",
          projectId: "your-project-id",
          enableSessionRecording: hasConsent,
        }}
      >
        <YourApp />
      </AnalyticsProvider>
    </>
  );
}

const recorder = new SessionRecorder(config, sessionId, {
  inlineStylesheet: true,
  collectFonts: true,
});