Volume 5

Q273: Frontend Logging Privacy and Sensitive Data Redaction

Difficulty: SeniorFrequency: HighAnswer time: 10-14 minutes

What Interviewers Want To Evaluate

Interviewers want to know whether you can make production observable without turning logs into a privacy incident.

They want to hear about redaction, minimization, consent, PII, session replay risk, error context, telemetry schemas, and retention.

Short Interview Answer

Frontend logging should capture enough context to debug production issues while minimizing sensitive data. I avoid logging tokens, passwords, personal content, full URLs with secrets, form values, and raw API payloads. I use structured events, allowlisted fields, redaction, sampling, retention limits, user consent where needed, and privacy review for session replay or analytics. Observability is valuable only when it does not create a new data leak.

Detailed Interview Answer

Frontend logs often include context close to the user.

That context can be sensitive:

route
query string
form input
error message
API payload
browser metadata
user ID
organization ID
feature flags
session replay
console breadcrumbs

Good logging chooses what to capture intentionally.

Bad logging captures everything and hopes nobody looks.

Data Classification

Classify data before logging.

Categories:

safe operational metadata
personal data
sensitive personal data
authentication secrets
business confidential data
user-generated private content
regulated data

Each category needs different handling.

Secrets should not be logged.

Private content should be heavily limited or avoided.

Structured Logging

Prefer structured events over raw strings.

Example:

event: "question_read_progress_failed"
route: "/questions/[slug]"
questionId: "Q273"
release: "abc123"
status: 500
retryable: true

This is easier to query and safer to review.

Avoid:

console.log("failed", entireFormState)

Redaction

Redaction removes or masks sensitive fields.

Redact:

Authorization headers
cookies
tokens
passwords
email when not needed
phone numbers
addresses
payment data
free-form text inputs

Use allowlists when possible.

It is safer to say "only these fields may be logged" than "log everything except these fields."

URLs and Query Strings

URLs can contain sensitive data.

Examples:

reset token
invite token
authorization code
email address
search query
return URL

Log route patterns instead of full URLs when possible.

If full URLs are needed, scrub query strings.

Session Replay

Session replay tools can be powerful and risky.

They may capture:

typed input
visible personal data
DOM content
click behavior
screen layout

Use masking, route exclusions, sampling, consent, and retention controls.

Never enable replay casually on sensitive flows.

Error Boundaries and Context

Error reports should include useful context:

release
route
component area
browser
OS
feature flags
user action category
request ID

They should not include full private data.

The goal is to reproduce the failure path, not collect the user's life story.

Retention and Access

Logging privacy also depends on:

who can access logs
how long logs are retained
which vendors receive data
where data is stored
how deletion requests are handled

Frontend engineers may not own all policy decisions, but they should design telemetry that supports them.

Interview Example

If asked, "What would you log for a failed checkout form?"

Answer:

"I would log event name, route, release, browser, error code, field names with validation categories, request ID, and retryability. I would not log card numbers, CVV, full billing address, raw form state, tokens, or full provider payloads."

Common Mistakes

Common mistakes include:

logging raw form state
logging Authorization headers
capturing full URLs with tokens
enabling replay on sensitive routes
using denylist redaction only
keeping logs forever
sending private content to analytics
letting every developer access production replay data

Senior-Level Framing

The senior framing:

"I design frontend observability with privacy by default: structured allowlisted events, redaction, sampling, route exclusions, retention limits, and clear ownership."

Practice Prompt

Design logging for:

question page crash
practice console runtime error
failed PDF download
login callback failure
payment form validation error

For each, list allowed fields and forbidden fields.

Final Mental Model

Logs are production data.

If they collect sensitive user information, they become part of the attack surface.

Debug with evidence, but collect less than you technically can.