add logrocket (#216)

.github/workflows/cd.yml

@@ -123,6 +123,7 @@ jobs:
         run: yarn run --require dd-trace/init prepack
         env:
           CLARITY_TAG: lm4m88gmix
+          CLOUD_ACCOUNT_ID: quisido
           CLOUD_PLATFORM: GitHub
           CLOUD_PROVIDER: GitHub Pages
           CLOUDWATCH_RUM_APPLICATION_ID: 8495b9c9-f57e-4395-9ca6-6c01862c107b

.github/workflows/ci.yml

@@ -103,8 +103,9 @@ jobs:
         run: yarn run --require dd-trace/init prepack
         env:
           CLARITY_TAG: ln18ya61ca
+          CLOUD_ACCOUNT_ID: quisido
           CLOUD_PLATFORM: GitHub
-          CLOUD_PROVIDER: GitHub Actions
+          CLOUD_PROVIDER: GitHub Pages
           CLOUDWATCH_RUM_APPLICATION_ID: 9be6a855-9bac-4f07-bae8-6ad0d7a00b00
           CLOUDWATCH_RUM_GUEST_ROLE_ARN: arn:aws:iam::787801101157:role/RUM-Monitor-us-west-2-787801101157-5868679251171-Unauth
           CLOUDWATCH_RUM_IDENTITY_POOL_ID: us-west-2:9d109fe9-23c3-4e33-a478-143f93445968

.gitignore

@@ -1,4 +1,5 @@
 /.git/
+/.wrangler/
 /.yarn/cache/
 /.yarn/sdks/
 /.yarn/unplugged/

package.json

@@ -39,7 +39,8 @@
     "pack:dry-run": "yarn workspaces foreach --all --exclude \"@quisi/do\" --interlaced --jobs unlimited --parallel --topological-dev --verbose pack --dry-run",
     "postlighthouse": "yarn packages/next run postlighthouse",
     "prepack": "yarn workspaces foreach --all --exclude \"@quisi/do\" --interlaced --jobs unlimited --parallel --topological-dev --verbose run prepack",
-    "prepublish": "concurrently --kill-others-on-fail --names eslint,jest,prepublish,test \"yarn run eslint\" \"yarn run jest\" \"yarn workspaces foreach --all --exclude \\\"@quisi/do\\\" --verbose run prepublish\" \"yarn run test\"",
+    "prepublish": "concurrently --kill-others-on-fail --names eslint,jest,prepublish,test \"yarn run eslint\" \"yarn run jest\" \"yarn run prepublish:workspaces\" \"yarn run test\"",
+    "prepublish:workspaces": "yarn workspaces foreach --all --exclude \"@quisi/do\" --verbose run prepublish",
     "publish": "yarn workspaces foreach --all --jobs unlimited --no-private --parallel --topological-dev --verbose npm publish --tolerate-republish",
     "quisido": "concurrently --kill-others-on-fail --names authn,next,whoami \"yarn run authn\" \"yarn run next\" \"yarn run whoami\"",
     "reinit": "yarn packages/authn run local:reinit",

packages/authn/.dev.vars

@@ -0,0 +1,7 @@
+COOKIE_DOMAIN=localhost
+ENVIRONMENT_NAME=development
+HOST=localhost:3000
+PATREON_OAUTH_CLIENT_ID=4kCae2AHZdKyyuonaPzhGillxJ2HyyLQEDu8StvMtixBHmWmN4KVG0QVP6R45tjG
+PATREON_OAUTH_CLIENT_SECRET=
+PATREON_OAUTH_HOST=https://www.patreon.com
+PATREON_OAUTH_REDIRECT_URI=https://localhost:5882/patreon/

packages/mock-next-router/package.json

@@ -65,7 +65,7 @@
     "history": "^5.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "next": "^14.2.2",
+    "next": "^14.2.3",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/next/.env

@@ -1,4 +1,5 @@
 CLARITY_TAG=ln17lx0olf
+CLOUD_ACCOUNT_ID=localhost
 CLOUD_PLATFORM=localhost
 CLOUD_PROVIDER=localhost
 CLOUDWATCH_RUM_APPLICATION_ID=7412bc06-6f0f-418a-85c8-c2f77bb79698

packages/next/next.config.ts

@@ -2,7 +2,6 @@ import { type NextConfig } from 'next';
 import type { ExperimentalConfig } from 'next/dist/server/config-shared.js';
 import { cpus } from 'node:os';
 import { join } from 'node:path';
-import type { Configuration as WebpackConfiguration } from 'webpack';
 import getVersion from './src/utils/get-version.js';
 import mapNodeEnvToOnDemandEntries from './src/utils/map-node-env-to-on-demand-entries.js';
 import mapNodeEnvToOutput from './src/utils/map-node-env-to-output.js';
@@ -47,6 +46,7 @@ export default withNextJsBundleAnalyzer({
 
   env: mapEnvironmentVariableNamesToRecord([
     'CLARITY_TAG',
+    'CLOUD_ACCOUNT_ID',
     'CLOUD_PLATFORM',
     'CLOUD_PROVIDER',
     'CLOUDWATCH_RUM_APPLICATION_ID',
@@ -84,19 +84,24 @@ export default withNextJsBundleAnalyzer({
     optimizeCss: true,
     optimizeServerReact: true,
     outputFileTracingRoot: join(__dirname, '..', '..'),
-    ppr: process.env.NODE_ENV !== 'production',
+    // ppr: process.env.NODE_ENV !== 'production',
     serverMinification: true,
     serverSourceMaps: true,
     // staticWorkerRequestDeduping: true,
     strictNextHead: true,
-    // swcMinify: true,
-    // swcTraceProfiling: true,
+    swcMinify: true,
+    swcTraceProfiling: true,
     taint: true,
     // typedRoutes: true,
     webVitalsAttribution: ['CLS', 'FCP', 'FID', 'INP', 'LCP', 'TTFB'],
-    webpackBuildWorker: true,
+    // webpackBuildWorker: undefined,
     workerThreads: true,
 
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.jsx'],
+      '.jsx': ['.tsx', '.jsx'],
+    },
+
     /*
     sri: {
       algorithm: 'sha512',
@@ -122,18 +127,4 @@ export default withNextJsBundleAnalyzer({
     ignoreBuildErrors: true,
     tsconfigPath: './tsconfig.prepack.json',
   },
-
-  // Add support for fully-qualified ESM imports.
-  // https://github.com/vercel/next.js/issues/41961
-  webpack(config: WebpackConfiguration): WebpackConfiguration {
-    return {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        extensionAlias: {
-          '.js': ['.ts', '.tsx', '.js', '.jsx'],
-        },
-      },
-    };
-  },
 } satisfies NextConfig) satisfies NextConfig;

packages/next/package.json

@@ -77,7 +77,7 @@
     "fullstory-react": "workspace:^",
     "lazy-i18n": "workspace:^",
     "mixpanel-browser": "^2.49.0",
-    "next": "^14.2.2",
+    "next": "^14.2.3",
     "number-format-react": "workspace:^",
     "react": "^18.2.0",
     "react-datadog": "workspace:^",
@@ -124,7 +124,6 @@
     "@typescript-eslint/eslint-plugin": "patch:@typescript-eslint/eslint-plugin@npm%3A7.7.0#~/.yarn/patches/@typescript-eslint-eslint-plugin-npm-7.7.0-de43f1e757.patch",
     "@typescript-eslint/parser": "^7.7.0",
     "autoprefixer": "^10.4.19",
-    "babel-loader": "^9.1.3",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-replace-import-extension": "^1.1.4",
     "cjs-ts": "workspace:^",
@@ -144,6 +143,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lighthouse": "^11.7.1",
+    "logrocket": "^8.1.0",
     "nyc": "^15.1.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",

packages/next/scripts/postlighthouse/postlighthouse.js

@@ -13,6 +13,12 @@ const IGNORED_AUDITS = new Set([
   'crawlable-anchors',
   'image-size-responsive',
   'service-worker',
+
+  // `zone.js` uses `UnloadHandler`.
+  'deprecations',
+
+  // `zone.js` uses an unload listener.
+  'no-unload-listeners',
 ]);
 
 if (!existsSync(REPORT_PATH)) {

packages/next/src/app/layout.tsx

@@ -19,6 +19,7 @@ import GoogleFonts from '../features/google-fonts.js';
 import Header from '../features/header.js';
 import HostnameProvider from '../features/hostname-provider.js';
 import styles from '../features/layout.module.scss';
+import LogRocket from '../features/log-rocket.js';
 import NotificationsProvider from '../features/notifications-provider.js';
 import Notifications from '../features/notifications.js';
 import Preconnect from '../features/preconnect.js';
@@ -47,6 +48,7 @@ const Contexts: ComponentType<PropsWithChildren> = withWrappers(
   DarkModeProvider,
   DesignSystemProvider,
   HostnameProvider,
+  LogRocket,
   NotificationsProvider,
   Sentry,
   SessionIdProvider,

packages/next/src/components/log-rocket.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useEffect, type ReactElement, type ReactNode } from 'react';
+import GITHUB_SHA from '../constants/github-sha.js';
+import { WHOAMI } from '../constants/whoami.js';
+import useLogRocket from '../hooks/use-log-rocket.js';
+import { type LogRocketOptions, type LogRocketRequest, type LogRocketResponse } from '../types/log-rocket.js';
+import getHostname from '../utils/get-hostname.js';
+
+interface Props {
+  readonly appId: string;
+  readonly children: ReactNode;
+}
+
+const BROWSER: Required<Required<LogRocketOptions>['browser']> = {
+  urlSanitizer(): string | null {
+    return null;
+  },
+};
+
+const CONSOLE_IS_ENABLED: Required<Required<Required<LogRocketOptions>['console']>['isEnabled']> = {
+  debug: false,
+  error: true,
+  info: true,
+  log: true,
+  warn: true,
+};
+
+const CONSOLE: Required<Required<LogRocketOptions>['console']> = {
+  isEnabled: CONSOLE_IS_ENABLED,
+  shouldAggregateConsoleErrors: true,
+};
+
+const DOM: Required<Omit<Required<LogRocketOptions>['dom'], 'baseHref'>> = {
+  hiddenAttributes: [],
+  inputSanitizer: false,
+  isEnabled: true,
+  privateAttributeBlocklist: [],
+  privateClassNameBlocklist: [],
+  textSanitizer: false,
+};
+
+const NETWORK_REQUEST_IDS: Map<string, string> = new Map<string, string>();
+
+const NETWORK: Required<Required<LogRocketOptions>['network']> = {
+  isEnabled: true,
+
+  requestSanitizer(request: LogRocketRequest): LogRocketRequest | null {
+    NETWORK_REQUEST_IDS.set(request.reqId, request.url);
+
+    return {
+      ...request,
+      headers: {
+        ...request.headers,
+        Cookie: undefined,
+      },
+    };
+  },
+
+  responseSanitizer(response: LogRocketResponse): LogRocketResponse | null {
+    const requestUrl: string | undefined = NETWORK_REQUEST_IDS.get(response.reqId);
+
+    if (requestUrl === WHOAMI) {
+      return null;
+    }
+
+    return {
+      ...response,
+      headers: {
+        ...response.headers,
+      },
+    };
+  },
+};
+
+export default function LogRocket({ appId, children }: Props): ReactElement {
+  const LogRocket = useLogRocket();
+
+  useEffect((): void => {
+    LogRocket.init(appId, {
+      browser: BROWSER,
+      childDomains: [],
+      console: CONSOLE,
+      disableBusyFramesTracker: false,
+      mergeIframes: true,
+      network: NETWORK,
+      parentDomain: null,
+      release: GITHUB_SHA ?? 'dev',
+      rootHostname: getHostname(),
+      shouldAugmentNPS: true,
+      shouldCaptureIP: true,
+      shouldDebugLog: false,
+      shouldDetectExceptions: true,
+      shouldParseXHRBlob: true,
+      dom: {
+        ...DOM,
+        baseHref: `${window.location.origin}/`,
+      },
+    } satisfies Required<Omit<LogRocketOptions, 'serverURL' | 'shouldSendData' | 'uploadTimeInterval'>>);
+  }, [appId, LogRocket]);
+
+  return <>{children}</>;
+}

packages/next/src/constants/whoami.ts

@@ -0,0 +1,3 @@
+import validateString from "../utils/validate-string.js";
+
+export const WHOAMI: string = validateString(process.env['WHOAMI']);

packages/next/src/features/authentication.tsx

@@ -1,14 +1,13 @@
 'use client';
 
 import { useEffect, type PropsWithChildren, type ReactElement } from 'react';
+import { WHOAMI } from '../constants/whoami.js';
 import { AuthenticationProvider } from '../contexts/authentication.js';
 import useAsyncState from '../modules/use-async-state/index.js';
 import type AuthenticationType from '../types/authentication.js';
 import isObject from '../utils/is-object.js';
-import validateString from '../utils/validate-string.js';
 
 const UNAUTHENTICATED_CODE = 5;
-const WHOAMI: string = validateString(process.env['WHOAMI']);
 
 export default function AuthenticationFeature({
   children,

packages/next/src/features/batch-span-processor.ts

@@ -0,0 +1,15 @@
+import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-web";
+import OTLPTraceExporter from "./otlp-trace-exporter.js";
+
+export default class BatchSpanProcessorImpl extends BatchSpanProcessor {
+  public readonly otlpTraceExporter: OTLPTraceExporter;
+
+  public constructor(hostname: string) {
+    const otlpTraceExporter: OTLPTraceExporter =
+      new OTLPTraceExporter(hostname);
+
+    super(otlpTraceExporter);
+
+    this.otlpTraceExporter = otlpTraceExporter;
+  }
+}