feat: add userAgent and ipAddress to HttpServer for enhanced request tracking

app/libs/http-server.ts

@@ -2,10 +2,14 @@ import xior, { merge } from 'xior'
 
 const baseURL = import.meta.env.VITE_API_URL
 
-export type THttpServer = { accessToken?: string }
+export type THttpServer = {
+  accessToken?: string
+  ipAddress?: string | null
+  userAgent?: string | null
+}
 
 export const HttpServer = (parameters?: THttpServer) => {
-  const { accessToken } = parameters || {}
+  const { accessToken, ipAddress, userAgent } = parameters || {}
   const instance = xior.create({
     baseURL,
   })
@@ -16,6 +20,8 @@ export const HttpServer = (parameters?: THttpServer) => {
     return merge(config, {
       headers: {
         ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+        ...(ipAddress && { 'X-Ip-Address': ipAddress }),
+        ...(userAgent && { 'X-User-Agent': userAgent }),
       },
     })
   })

app/routes/_news.detail.$slug.tsx

@@ -12,6 +12,10 @@ import { NewsDetailPage } from '~/pages/news-detail'
 import type { Route } from './+types/_news.detail.$slug'
 
 export const loader = async ({ request, params }: Route.LoaderArgs) => {
+  const userAgent = request.headers.get('user-agent')
+  const ipAddress =
+    request.headers.get('cf-connecting-ip') ||
+    request.headers.get('x-forwarded-for')
   const { userToken: accessToken } = await handleCookie(request)
   let userData
   if (accessToken) {
@@ -19,7 +23,12 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
     userData = data
   }
   const { slug } = params
-  let { data: newsDetailData } = await getNewsBySlug({ slug, accessToken })
+  let { data: newsDetailData } = await getNewsBySlug({
+    slug,
+    accessToken,
+    userAgent,
+    ipAddress,
+  })
   const shouldSubscribe =
     (!accessToken || userData?.subscribe?.subscribe_plan?.code === 'basic') &&
     newsDetailData?.is_premium

app/routes/actions.log.ads.$id.ts

@@ -7,12 +7,18 @@ import { handleCookie } from '~/libs/cookies'
 import type { Route } from './+types/actions.log.ads.$id'
 
 export const action = async ({ request, params }: Route.ActionArgs) => {
+  const userAgent = request.headers.get('user-agent')
+  const ipAddress =
+    request.headers.get('cf-connecting-ip') ||
+    request.headers.get('x-forwarded-for')
   const { userToken: accessToken } = await handleCookie(request)
   const { id } = params
   try {
     const { data: logsData } = await createLogAdsRequest({
       id,
       accessToken,
+      userAgent,
+      ipAddress,
     })
 
     return data(