Files
accounted/instrumentation-client.ts
T
Mattsson f633349c8d feat(analytics): show form field labels in session replays (#1416)
* feat(analytics): show form field labels in session replays

Replays showed the sidebar after #1412 but form pages were still fully
masked, so you could not tell WHICH field a user was interacting with.
Tag the shared Label primitive (components/ui/label.tsx, used by every
form in the app) with data-ph-unmask: field labels are static i18n
chrome, and maskAllInputs keeps every typed value hidden.

The one Label whose text is user data, the user-defined dimension name
in LineDimensionFields, gets data-ph-mask, which wins even on the same
element because maskTextFn checks it first.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(analytics): re-mask three Labels that render user data

Completing the audit the PR review asked for: a multiline sweep over
every Label child found three call sites whose label text is user
data, missed by the first single-line pass. Danger-zone confirm
labels interpolate the user's email (AccountDangerZone) and the
company name (CompanyDangerZone), and the periodisering auto-detect
row label is counterparty name + invoice number. All three now carry
data-ph-mask. Currency-code and row-count interpolations were
reviewed and left visible: categorical UI state, not books data.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-08-05 15:18:07 +02:00

106 lines
4.7 KiB
TypeScript

import posthog from 'posthog-js'
import { isAnalyticsEnabled, warnIfAnalyticsMisconfigured } from '@/lib/analytics/enabled'
import { purgeLegacyAnalyticsStorage } from '@/lib/analytics/purge-legacy-storage'
// Clear anything Recapt left on the device. Runs unconditionally, BEFORE the
// analytics gate: a browser carrying `__recapt_record_engine` must get cleaned
// up even on a build where PostHog itself is switched off.
purgeLegacyAnalyticsStorage()
/**
* Hostnames that get the X-POSTHOG-DISTINCT-ID / X-POSTHOG-SESSION-ID headers,
* which is what lets a server error captured in instrumentation.ts link back
* to this user's session replay.
*
* Deliberately our own origin only. Listing a Supabase or third-party host
* here would leak PostHog identifiers to them. PostHog matches on hostname
* alone, so no protocol and no port ('localhost', never 'localhost:3000').
*/
function tracingHosts(): string[] {
const hosts = ['localhost', '127.0.0.1']
const appUrl = process.env.NEXT_PUBLIC_APP_URL
if (appUrl) {
try {
hosts.push(new URL(appUrl).hostname)
} catch {
// Malformed NEXT_PUBLIC_APP_URL: skip rather than break init.
}
}
return hosts
}
/**
* Client-side PostHog initialisation.
*
* This file is the ONLY place posthog.init() is called. Next.js 15.3+ runs
* `instrumentation-client` before hydration, which is what PostHog's own
* Next.js guidance requires; deliberately NOT combined with a
* <PostHogProvider> wrapper, which their example calls out as a mistake.
*
* Three choices here are deliberate and worth not "fixing":
*
* 1. `api_host: '/rl'` routes every request through the same-origin rewrite
* in next.config.ts. That keeps PostHog first-party, so the strict CSP
* needs no third-party hosts at all (`connect-src 'self'` already covers
* it) and ad blockers have nothing to match on. The path must stay in the
* proxy.ts matcher exclusion or middleware bounces it to /login.
*
* 2. `persistence: 'memory'` stores nothing on the device. That is what lets
* us run analytics without a cookie-consent banner. The cost is that an
* anonymous visitor's identity does not survive a hard reload; everything
* post-login is unaffected because AnalyticsIdentify re-identifies on
* every dashboard load. Note that surveys still write their own
* `seenSurvey_*` flags straight to localStorage, bypassing this setting:
* that is functional UI state ("don't ask again"), not tracking.
*
* 3. Mask-by-default text masking. `maskTextSelector: '*'` routes EVERY text
* node through `maskTextFn`, which masks unless a `data-ph-unmask`
* ancestor opts the node back in. This is an accounting app: org numbers
* (which for a sole proprietorship ARE the owner's personal identity
* number), customer names, balances and invoice amounts are rendered as
* ordinary text, and PostHog masks inputs but NOT text by default.
* Replays are for seeing WHERE a user gets stuck, never WHAT their books
* say.
*
* `data-ph-unmask` is for static chrome only (nav labels, headings,
* button text from i18n). User data nested inside an unmasked container
* (active company name, user email, badge counts) gets `data-ph-mask`,
* which wins because `closest()` finds the NEAREST tagged ancestor: when
* both attributes land on the same element, mask still wins.
* Anything untagged stays masked, so a forgotten tag fails safe.
*
* The shared form label primitive (`components/ui/label.tsx`) carries
* `data-ph-unmask` by default, so replays show WHICH field a user is
* filling in while `maskAllInputs` keeps the typed value hidden. A call
* site whose label text is user data (e.g. user-defined dimension names)
* must add `data-ph-mask`.
*/
function maskText(text: string): string {
return text.replace(/\S/g, '*')
}
if (warnIfAnalyticsMisconfigured() && isAnalyticsEnabled()) {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN!, {
api_host: '/rl',
ui_host: 'https://eu.posthog.com',
defaults: '2026-05-30',
// Only create person profiles for users we actually identify: logged-out
// visitors stay anonymous and cheap.
person_profiles: 'identified_only',
persistence: 'memory',
capture_exceptions: true,
tracing_headers: tracingHosts(),
session_recording: {
maskAllInputs: true,
maskTextSelector: '*',
maskTextFn: (text: string, element?: HTMLElement): string => {
const tagged = element?.closest('[data-ph-unmask],[data-ph-mask]')
if (!tagged || tagged.hasAttribute('data-ph-mask')) {
return maskText(text)
}
return text
},
},
debug: process.env.NODE_ENV === 'development',
})
}