feat: latest version of packages + node 20 + fix strava + add logging…

… + speed insights + analytics (#436)

Closes DG-148, DG-147

## What changed? Why?
- Upgrades to node 20
- Dependencies to latest
- Add speed insights from Vercel
- Add logging solution + debugging to Strava webhooks
- Add analytics from Vercel
- Tentative fix for Strava not syncing webhook data

.node-version

@@ -1 +1 @@
-18.17.1
+20.11.0

.npmrc

@@ -1,4 +1,4 @@
 save-exact=true
 auto-install-peers=true
-node-version=18.17.1
+node-version=20.11.0
 engine-strict=true

.nvmrc

@@ -1 +1 @@
-18.17.1
+20.11.0

README.md

@@ -121,6 +121,8 @@ Standard semver versioning is done via `semantic-release` and Conventional Commi
 - **Minor**: bumped if "feat:" appears in the message
 - **Patch**: bumped by default in all other cases ("chore:"/"fix:"/etc)
 
+Test a dry run with `GITHUB_TOKEN=* pnpm turbo release -- --dry-run --branches={branch here}` after filling in the token.
+
 ### History
 
 The site was originally Wordpress for way too many years! I used a custom theme + had a bunch of optimizations starting way back in ~2011.

apps/web/next.config.js

@@ -1,3 +1,5 @@
+const { withLogtail } = require('@logtail/next');
+
 require('dotenv-mono').config();
 
 /**
@@ -36,4 +38,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withNextBundleAnalyzer(nextConfig);
+module.exports = withNextBundleAnalyzer(withLogtail(nextConfig));

apps/web/package.json

@@ -19,11 +19,14 @@
     "@emotion/styled": "11.11.0",
     "@fortawesome/free-brands-svg-icons": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
-    "@mui/material": "5.15.2",
+    "@logtail/next": "0.1.4",
+    "@mui/material": "5.15.5",
     "@next/bundle-analyzer": "14.0.4",
+    "@vercel/analytics": "1.1.1",
+    "@vercel/speed-insights": "1.0.4",
     "api": "workspace:*",
     "dotenv-mono": "1.3.13",
-    "lucide-react": "0.303.0",
+    "lucide-react": "0.312.0",
     "maps": "workspace:*",
     "next": "14.0.4",
     "og": "workspace:*",
@@ -37,7 +40,7 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.0.4",
-    "@types/react": "18.2.46",
+    "@types/react": "18.2.48",
     "eslint-config-dg": "workspace:*",
     "tsconfig": "workspace:*",
     "typescript": "5.3.3"

apps/web/src/pages/_app.tsx

@@ -4,6 +4,8 @@ import type { AppProps } from 'next/app';
 import type { ReactElement, ReactNode } from 'react';
 import type { NextPage } from 'next';
 import { GlobalStyleProvider } from 'ui/theme/GlobalStyleProvider';
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import { Analytics } from '@vercel/analytics/react';
 
 export type PageProps = Record<string, unknown>;
 
@@ -25,7 +27,11 @@ type AppPropsWithLayout = AppProps<PageProps> & {
 function App({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
   return (
-    <GlobalStyleProvider>{getLayout(<Component {...pageProps} />, pageProps)}</GlobalStyleProvider>
+    <GlobalStyleProvider>
+      {getLayout(<Component {...pageProps} />, pageProps)}
+      <SpeedInsights />
+      <Analytics />
+    </GlobalStyleProvider>
   );
 }
 

apps/web/src/pages/api/webhooks.ts

@@ -3,6 +3,7 @@ import { isRecord } from 'shared-core/helpers/typeguards';
 import { echoStravaChallengeIfValid } from 'api/strava/echoStravaChallengeIfValid';
 import { syncStravaWebhookUpdateWithDb } from 'api/strava/syncStravaWebhookUpdateWithDb';
 import type { StravaWebhookEvent } from 'api/strava/StravaWebhookEvent';
+import { log } from '@logtail/next';
 import { handleApiError, methodNotAllowedError } from 'api/handleApiError';
 
 // Just a shorthand for this function type
@@ -13,6 +14,7 @@ type AsyncProcessor = (request: NextApiRequest, response: NextApiResponse) => Pr
  * Checks most data to see if it's a webhook event
  */
 const isWebhookEvent = (body: unknown): body is StravaWebhookEvent => {
+  log.info('Is this a webhook event?', { body });
   if (!isRecord(body)) {
     return false;
   }
@@ -28,6 +30,7 @@ const isWebhookEvent = (body: unknown): body is StravaWebhookEvent => {
  * fail with a 400.
  */
 const handleGet: Processor = (request, response) => {
+  log.info('Received Strava webhook GET');
   if (echoStravaChallengeIfValid(request, response)) {
     return;
   }
@@ -39,12 +42,15 @@ const handleGet: Processor = (request, response) => {
  * receipt of it.
  */
 const handleWebhookEvent: AsyncProcessor = async (request, response) => {
+  log.info('Received Strava webhook event');
   if (!isWebhookEvent(request.body)) {
+    log.error('Received invalid Strava webhook event');
     handleApiError(response, 'Bad Request', 400);
     return;
   }
 
   const webhookEvent = request.body;
+  log.info('Got webhook event', { webhookEvent });
   switch (webhookEvent.object_type) {
     case 'athlete':
       // We don't handle auth/deauth events

apps/web/tsconfig.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/tsconfig.json",
   "extends": "tsconfig/nextjs.json",
   "compilerOptions": {
-    "baseUrl": "src"
+    "baseUrl": "src",
   },
-  "include": ["src", "next.config.js", "next-env.d.ts"]
+  "include": ["src", "next.config.js", "next-env.d.ts"],
 }

package.json

@@ -13,17 +13,17 @@
   },
   "dependencies": {
     "dotenv-mono": "1.3.13",
-    "lefthook": "1.5.5",
-    "vercel": "33.0.1"
+    "lefthook": "1.5.7",
+    "vercel": "33.1.0"
   },
   "devDependencies": {
-    "prettier": "3.1.1",
+    "prettier": "3.2.4",
     "tsconfig": "workspace:*",
-    "turbo": "1.11.2",
+    "turbo": "1.11.3",
     "typescript": "5.3.3"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
-  "packageManager": "pnpm@8.7.6"
+  "packageManager": "pnpm@8.14.1"
 }

packages/api-clients/RefreshTokenConfig.ts

@@ -17,14 +17,14 @@ export type RefreshTokenConfig = Readonly<{
   endpoint: string;
 
   /**
-   * This gets encoded into body if existent
+   * This gets encoded into body
    */
-  data?: Record<string, string | undefined>;
+  body: (refreshToken: string) => Record<string, string>;
 
   /**
-   * This gets encoded into headers if existent
+   * This gets encoded into headers
    */
-  headers?: Record<string, string>;
+  headers: Record<string, string>;
 
   /**
    * Throws an error if anything's off about our data, otherwise returns the data

packages/api-clients/package.json

@@ -7,12 +7,13 @@
     "lint:types": "tsc"
   },
   "dependencies": {
+    "@logtail/next": "0.1.4",
     "db": "workspace:*",
     "graphql-request": "6.1.0",
     "wretch": "2.8.0"
   },
   "devDependencies": {
-    "@types/node": "20.10.6",
+    "@types/node": "20.11.5",
     "dotenv-mono": "1.3.13",
     "eslint-config-dg": "workspace:*",
     "tsconfig": "workspace:*",

packages/api-clients/refreshedAccessToken.ts

@@ -1,5 +1,6 @@
 import { db } from 'db';
 import type { CreateTokenProps, FetchTokenProps } from 'db/models/Token';
+import { log } from '@logtail/next';
 import type { RefreshTokenConfig } from './RefreshTokenConfig';
 
 /**
@@ -45,25 +46,31 @@ async function fetchRefreshedTokenFromApi(
   refreshTokenConfig: RefreshTokenConfig,
   refreshToken: string,
 ) {
-  const { endpoint, headers, data, validate } = refreshTokenConfig;
+  const { endpoint, headers, body, validate } = refreshTokenConfig;
+  const encodedBody = new URLSearchParams(body(refreshToken));
+  log.info('Fetching refreshed token from API', {
+    endpoint,
+    headers,
+    encodedBody: [...encodedBody],
+  });
 
   const rawData = await fetch(endpoint, {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-      Accept: 'application/json',
-      ...headers,
-    },
-    body: new URLSearchParams({
-      grant_type: 'refresh_token',
-      refresh_token: refreshToken,
-      ...data,
-    }),
+    headers,
+    body: encodedBody,
   });
+  const data: unknown = await rawData.json();
   if (!rawData.ok) {
+    log.error('Failed to fetch refreshed token', {
+      status: rawData.status,
+      data,
+    });
     throw new TypeError('Token was not fetched properly');
   }
-  return validate(await rawData.json(), refreshToken);
+  log.info('Successfully refreshed token!', {
+    status: rawData.status,
+  });
+  return validate(data, refreshToken);
 }
 
 /**

packages/api-clients/tsconfig.json

@@ -2,6 +2,6 @@
   "$schema": "https://json.schemastore.org/tsconfig.json",
   "extends": "tsconfig/library.json",
   "compilerOptions": {
-    "baseUrl": "."
-  }
+    "baseUrl": ".",
+  },
 }

packages/api/package.json

@@ -7,13 +7,14 @@
     "lint:types": "tsc"
   },
   "dependencies": {
+    "@logtail/next": "0.1.4",
     "api-clients": "workspace:*",
     "db": "workspace:*",
     "graphql-request": "6.1.0",
     "shared-core": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "20.10.6",
+    "@types/node": "20.11.5",
     "dotenv-mono": "1.3.13",
     "eslint-config-dg": "workspace:*",
     "tsconfig": "workspace:*",

packages/api/spotify/spotifyClient.ts

@@ -49,8 +49,14 @@ export const spotifyClient = createClient({
   refreshTokenConfig: {
     endpoint: 'https://accounts.spotify.com/api/token/',
     headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Accept: 'application/json',
       Authorization: `Basic ${SPOTIFY_CLIENT_AUTH}`,
     },
+    body: (refreshToken) => ({
+      grant_type: 'refresh_token',
+      refresh_token: refreshToken,
+    }),
     validate: (rawData, refreshToken) => {
       const { token_type: tokenType, access_token: accessToken, expires_in: expiresIn } =
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

packages/api/strava/stravaClient.ts

@@ -24,11 +24,18 @@ export const stravaClient = createClient({
   endpoint: 'https://www.strava.com/api/v3/',
   accessKey: STRAVA_TOKEN_NAME,
   refreshTokenConfig: {
-    endpoint: 'https://www.strava.com/api/v3/oauth/token/',
-    data: {
+    // Note: it's REALLY FUCKING IMPORTANT that this doesn't have a slash at the end. It returns empty otherwise
+    endpoint: 'https://www.strava.com/api/v3/oauth/token',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Accept: 'application/json',
+    },
+    body: (refreshToken) => ({
       client_id: STRAVA_CLIENT_ID,
       client_secret: STRAVA_CLIENT_SECRET,
-    },
+      grant_type: 'refresh_token',
+      refresh_token: refreshToken,
+    }),
     validate: (rawData) => {
       const {
         token_type: tokenType,

packages/api/strava/syncStravaWebhookUpdateWithDb.ts

@@ -1,4 +1,5 @@
 import { db } from 'db';
+import { log } from '@logtail/next';
 import type { StravaWebhookEvent } from './StravaWebhookEvent';
 import { fetchStravaActivityFromApi } from './fetchStravaActivityFromApi';
 
@@ -19,12 +20,18 @@ const fetchFromApiAndSaveToDb = async (id: number) => {
     existingActivity?.lastUpdate &&
     Number(existingActivity.lastUpdate) > Date.now() - UPDATE_THRESHOLD_IN_MS
   ) {
+    log.info('Dropping Strava webhook update - last update was too recent', {
+      id,
+      lastUpdate: existingActivity.lastUpdate,
+      threshold: Date.now() - UPDATE_THRESHOLD_IN_MS,
+    });
     // Last update was too recent
     return;
   }
 
   const latestActivityData = await fetchStravaActivityFromApi(id);
   if (!latestActivityData?.start_date) {
+    log.error('Missing activity data', { id, latestActivityData });
     throw new Error(`Missing activity data for ${id}`);
   }
   const updatedActivity = await db.StravaActivity.upsert({
@@ -33,6 +40,7 @@ const fetchFromApiAndSaveToDb = async (id: number) => {
     activityData: latestActivityData,
     lastUpdate: new Date(),
   });
+  log.info('Upserted Strava activity', { updatedActivity });
   return updatedActivity[0];
 };
 

packages/api/tsconfig.json

@@ -2,6 +2,6 @@
   "$schema": "https://json.schemastore.org/tsconfig.json",
   "extends": "tsconfig/library.json",
   "compilerOptions": {
-    "baseUrl": "."
-  }
+    "baseUrl": ".",
+  },
 }

packages/codegen/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig.json",
-  "extends": "tsconfig/library.json"
+  "extends": "tsconfig/library.json",
 }

packages/db/client.ts

@@ -1,6 +1,7 @@
 import { env } from 'node:process';
 import { Sequelize } from 'sequelize-typescript';
 import mysql2 from 'mysql2';
+import { log } from '@logtail/next';
 import { Token } from './models/Token';
 import { StravaActivity } from './models/StravaActivity';
 
@@ -10,6 +11,7 @@ const SHARED_DB_OPTIONS = {
 };
 
 const databaseUrl = env.DATABASE_URL;
+log.info('Database url', { databaseUrl });
 if (!databaseUrl) {
   throw new Error('DATABASE_URL environment variable not set');
 }
@@ -18,7 +20,8 @@ if (!databaseUrl) {
 const isRunningLocalProdBuild = ['127.0.0.1', 'localhost'].some((host) =>
   databaseUrl.includes(host),
 );
-const nodeEnv = isRunningLocalProdBuild ? 'development' : env.NODE_ENV || 'development';
+const nodeEnv = isRunningLocalProdBuild ? 'development' : env.NODE_ENV;
+log.info('Node env', { nodeEnv });
 
 // Sequelize options applied based on current environment
 const DB_OPTIONS = {

packages/db/package.json

@@ -14,8 +14,9 @@
     "lint:types": "tsc"
   },
   "dependencies": {
+    "@logtail/next": "0.1.4",
     "dotenv-mono": "1.3.13",
-    "mysql2": "3.6.5",
+    "mysql2": "3.7.1",
     "sequelize": "6.35.2",
     "sequelize-typescript": "2.1.6"
   },

packages/db/tsconfig.json

@@ -2,6 +2,6 @@
   "$schema": "https://json.schemastore.org/tsconfig.json",
   "extends": "tsconfig/library.json",
   "compilerOptions": {
-    "baseUrl": "."
-  }
+    "baseUrl": ".",
+  },
 }