general: log server load events to tweak vercel bill

pages/_document.tsx

@@ -14,12 +14,13 @@ import {
   DocumentHeadTagsProps,
 } from '@mui/material-nextjs/v13-pagesRouter';
 import { getServerIntl } from '../src/services/intlServer';
-import { InjectIntl, setIntl } from '../src/services/intl';
+import { InjectIntl, Intl, setIntl } from '../src/services/intl';
 import { FaviconsOsmapp } from '../src/helpers/FaviconsOsmapp';
 import { PROJECT_ID, setProjectForSSR } from '../src/services/project';
 import { FaviconsOpenClimbing } from '../src/helpers/FaviconsOpenClimbing';
 import { LANGUAGES } from '../src/config.mjs';
 import styled from '@emotion/styled';
+import { fetchJson } from '../src/services/fetch';
 
 const Body = styled.body`
   @media (prefers-color-scheme: light) {
@@ -94,6 +95,45 @@ type InitialProps = DocumentInitialProps &
     asPath: string | undefined;
   };
 
+const logRequest = (ctx: DocumentContext, intl: Intl) => {
+  const WEBSITE_ID = '0b0e0d7c-f27b-429c-b0c4-736b2725a1c1';
+  const { host, referrer } = ctx.req.headers;
+
+  const data = {
+    type: 'event',
+    payload: {
+      hostname: host,
+      website: WEBSITE_ID,
+      language: intl.lang,
+      referrer,
+      // screen: `${window.screen.width}x${window.screen.height}`,
+      // title: document.title,
+      url: ctx.asPath,
+      name: 'next-server',
+    },
+  };
+  const headers = {
+    'X-Client-IP': ctx.req.socket.remoteAddress,
+    'User-Agent': ctx.req.headers['user-agent'],
+  };
+
+  console.log('umami data', JSON.stringify({ data, headers }, null, 2));
+
+  // we dont wait to await !
+  fetchJson('https://cloud.umami.is/api/send', {
+    nocache: true,
+    headers,
+    body: JSON.stringify(data),
+    method: 'POST',
+  }).then(
+    (response) => {
+      console.log('umami response', response);
+    },
+    (error) => {
+      console.error('umami error', error);
+    },
+  );
+};
 MyDocument.getInitialProps = async (
   ctx: DocumentContext,
 ): Promise<InitialProps> => {
@@ -104,6 +144,8 @@ MyDocument.getInitialProps = async (
 
   const initialProps = await documentGetInitialProps(ctx);
 
+  logRequest(ctx, serverIntl);
+
   return {
     ...initialProps,
     serverIntl,

src/services/intl.tsx

@@ -8,7 +8,7 @@ import { publishDbgObject } from '../utils';
 
 type Values = { [variable: string]: string | number };
 
-interface Intl {
+export interface Intl {
   lang: string;
   messages: MessagesType | {};
 }

src/services/intlServer.tsx

@@ -1,6 +1,7 @@
 import acceptLanguageParser from 'accept-language-parser';
 import nextCookies from 'next-cookies';
 import { LANGUAGES } from '../config.mjs';
+import { Intl } from './intl';
 
 // the files are not imported in main bundle
 const getMessages = async (lang) =>
@@ -33,7 +34,7 @@ const resolveCurrentLang = (ctx) => {
   return getLangFromAcceptHeader(ctx) ?? DEFAULT_LANG;
 };
 
-export const getServerIntl = async (ctx) => {
+export const getServerIntl = async (ctx): Promise<Intl> => {
   const lang = resolveCurrentLang(ctx);
   const vocabulary = await getMessages('vocabulary');
   const messages = lang === DEFAULT_LANG ? {} : await getMessages(lang);