Implementation of Activity History Logs

This guide explains implementation patterns and methods for effectively utilizing activity history logs.

Activity history logs are records of calls to GetUserInfo with Referer or X-SaaSus-Referer headers. By properly setting these headers in the frontend, you can enhance the value of the logs.

Implementation Points and Recommended Patterns

Using the X-SaaSus-Referer Header

The Referer header automatically set by browsers may omit URL path portions due to privacy settings. When the expected value is not set, we recommend manually setting the X-SaaSus-Referer header from the frontend.

await fetch(url, {
  headers: {
    'Authorization': `Bearer ${jwtToken}`,
    'X-SaaSus-Referer': window.location.pathname
  }
});

Implementation Points for Frontend

Here are the recommended implementation patterns for effectively utilizing activity history logs in frontend applications. We use React sample code here, but the same concepts can be applied to other frameworks and traditional multi-page applications.

Note that activity history logs are recorded when GetUserInfo is executed, so please ensure that GetUserInfo is executed at each endpoint.

Basic: Recording Page Views

In SPAs, it's common to send multiple API requests to display a single page. In such cases, setting the same page path in X-SaaSus-Referer for all API requests ensures that activity history logs are correctly recorded as "pages the user accessed," making them easy to understand.

Using the useLocation hook from react-router-dom, define common headers as shown below and reuse them for API requests related to page display.

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import axios from "axios";

const UserPage = () => {
  const location = useLocation();
  const pagePath = location.pathname; // Example: "/users"
  const jwtToken = localStorage.getItem("SaaSusIdToken");

  // Define headers to be used commonly within the page
  const commonHeaders = {
    "X-Requested-With": "XMLHttpRequest",
    Authorization: `Bearer ${jwtToken}`,
    "X-SaaSus-Referer": pagePath,
  };

  // Use these common headers for each API request executed when displaying the page
  useEffect(() => {
    const fetchData = async () => {
      await axios.get('/users', { headers: commonHeaders });
      await axios.get('/user_attributes', { headers: commonHeaders });
    };
    fetchData();
  }, []);

  // ...
};

By implementing this way, all API requests related to displaying UserPage will be consistently recorded in the logs as access to /users. Since multiple APIs are called when displaying a page, the same path will be recorded multiple times in a short period in the logs, but this is intended normal behavior. This ensures that "the user was active on this page at this time" is recorded.

Advanced: Recording Page Actions

Beyond page views, recording specific actions within pages such as "which button was pressed" further increases the value of the logs.

In such cases, we recommend adding query parameters like ?action=... to the URL set in X-SaaSus-Referer to express context.

// Continuation of UserPage component

const handleDeleteUser = async (userId: string) => {
  // Define headers specific to this delete action
  const actionHeaders = {
    ...commonHeaders, // Copy commonHeaders and
    // Overwrite Referer with action information
    "X-SaaSus-Referer": `${pagePath}?action=delete_user`, 
  };

  try {
    await axios.delete(`/users/${userId}`, {
      headers: actionHeaders, // Use action-specific headers
    });
    // ... Success handling
  } catch (error) {
    // ... Error handling
  }
};

This approach creates logs that clearly show the flow: "user opened the user list page (multiple logs), then executed deletion (action log)," making them easy to analyze.

Output Example

The following shows an example of activity history logs recorded by the above implementation: