feat: write web vitals to DynamoDB table

app/components/hooks/webVitals.ts

@@ -1,7 +1,19 @@
 import { useEffect } from "react"
+import type { Metric } from "web-vitals"
 
-async function sendToAnalytics(metric: unknown) {
-  const body = JSON.stringify(metric)
+export interface AnalyticsData {
+  page: string
+  href: string
+  metric: Metric
+}
+
+async function sendToAnalytics(metric: Metric) {
+  const data: AnalyticsData = {
+    page: window.location.pathname,
+    href: window.location.href,
+    metric
+  }
+  const body = JSON.stringify(data)
 
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (navigator.sendBeacon) {

app/routes/analytics.tsx

@@ -1,9 +1,35 @@
+import awsLite from "@aws-lite/client"
+import awsDynamoDB from "@aws-lite/dynamodb"
 import type { ActionFunctionArgs } from "@remix-run/node"
+import { Resource } from "sst"
+
+import type { AnalyticsData } from "~/components/hooks/webVitals"
+
+interface DatabaseAnalyticsData extends AnalyticsData {
+  id: string
+  createdAt: string
+}
 
 export async function action({ request }: ActionFunctionArgs) {
-  const data = (await request.json()) as Record<string, string>
+  const aws = await awsLite({
+    region: "eu-central-1",
+    plugins: [awsDynamoDB]
+  })
+
+  const data = (await request.json()) as AnalyticsData
+
+  const entry: DatabaseAnalyticsData = { ...data, id: data.metric.id, createdAt: new Date().toISOString() }
+
+  try {
 
-  console.log(">>>", data)
+    // eslint-disable-next-line new-cap
+    await aws.DynamoDB.PutItem({
+      TableName: Resource.WebVitals.name,
+      Item: entry
+    })
+  } catch (error) {
+    return new Response(`Error saving data: ${error as string}`, { status: 500 })
+  }
 
   return new Response("", { status: 204 })
 }

aws-lite.d.ts

@@ -0,0 +1 @@
+declare module '@aws-lite/dynamodb';

package.json

@@ -16,14 +16,18 @@
     "test:format": "prettier --check .",
     "build": "remix vite:build",
     "dev": "remix vite:dev",
+    "sst:dev": "sst dev remix vite:dev",
     "start": "remix-serve ./build/server/index.js",
     "opt:svg": "svgo --folder app --recursive",
     "update:latest": "ncu --deep  --upgrade --interactive",
     "update:minor": "ncu --deep  --upgrade --interactive --target minor",
     "update:pnpm": "corepack up",
-    "deploy:prod": "sst deploy --stage production"
+    "deploy:prod": "sst deploy --stage production",
+    "deploy:dev": "sst deploy --stage development"
   },
   "dependencies": {
+    "@aws-lite/client": "^0.22.4",
+    "@aws-lite/dynamodb": "^0.3.8",
     "@effective/shadow": "^1.1.0",
     "@remix-run/node": "^2.11.0",
     "@remix-run/react": "^2.11.0",
@@ -40,6 +44,7 @@
     "web-vitals": "^4.2.2"
   },
   "devDependencies": {
+    "@aws-lite/dynamodb-types": "^0.3.10",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@effective/color": "^1.0.1",