Debug logging

Console output is suppressed by default. src/lib/logger.ts replaces console.log, info, warn, error and debug with conditional versions, so a stray log statement never reaches a customer's console.

Turn it on

Add a query parameter to the URL. The value persists to localStorage for that browser.

?ba_debug=*                          everything
?ba_debug=cart,mini-cart             only those namespaces
?ba_debug=1                          everything, same as *

Or use the browser console.

window.enableLogging('*');
window.enableLogging('cart-service,mini-cart:free-gifts');
window.disableLogging();

The value is stored under the BA_DEBUG key in localStorage. Clearing site data turns logging off.

How filtering works

*, 1 and true enable everything, including bare console.* calls.

A comma-separated list enables only loggers created with createLogger('name') for those names. Bare console.* calls stay suppressed. That is usually what you want, because third-party scripts are noisy.

Each namespace gets a stable colour, derived from a hash of its name, so output from different subsystems is easy to separate.

Regenerate this list

grep -rho "createLogger('[^']*')" src/ | sed "s/createLogger('//;s/')//" | sort -u

Namespaces

Cart

Namespace	Logs
`mini-cart`	Root element lifecycle, drawer open and close, errors shown to the customer
`cart-service`	Requests to the Ajax Cart, serialisation, errors
`cart-store`	Cart snapshot updates
`cart-event-bus`	Listener registration and removal
`cart-fetch-interceptor`	Cart writes observed from other scripts
`cart-command-controller`	`mini-cart:*` command events received
`simple-cart-service`	Stale line item key recovery
`line-item-properties-update-chain`	Property rule proposals and applications
`checkout-event-chain`	Callbacks running before checkout
`cart`	General cart logging

Cart elements

Namespace
`mini-cart-header`
`mini-cart-line-items`
`mini-cart-summary`
`mini-cart-progress-bar`
`mini-cart-footer`
`mini-cart-gifts-accordion`
`mini-cart-discount-code`
`mini-cart-recommendations`
`mini-cart-clear-cart`
`mini-cart:free-gifts`
`example-cart-component`

Popups

Namespace	Logs
`popup-logic`	Which popup was offered, whether it showed, timer resets
`need-help-popup`	Need Help popup element
`need-help-popup-definition`	Need Help popup registration and visibility checks

Product and collection

Namespace	Logs
`product-card`	Product card form behaviour
`products-carousel`	Carousel setup
`tabbed-carousels`	Items You'll Love tab switching
`skin-type-carousels`	Skin type carousel setup
`shop-by-routine`	Shop By Routine setup
`sticky-category-bar`	Sticky bar pinning
`plp-segmentation-tiles`	Tile injection into collection pages
`select-options-modal`	Variant selection modal
`pack-options`	Pack size selection
`eyebrow-banner`	Eyebrow banner

Useful combinations

Cart problems:

?ba_debug=mini-cart,cart-service,cart-store,cart-event-bus,cart-fetch-interceptor

Free gift problems:

?ba_debug=mini-cart:free-gifts,mini-cart-progress-bar,mini-cart-gifts-accordion

Popup problems:

?ba_debug=popup-logic,need-help-popup-definition

Adding a logger

import { createLogger } from '@/lib/logger';

const log = createLogger('my-feature');
log.info('mounted', { detail });

Use this rather than console.log. A bare console.log is suppressed unless someone enables everything, so your output stays hidden when a colleague filters for your subsystem.

Then add the namespace to this page.

Note on the booking calendar

The MediSpa calendar uses console.debug and console.error directly rather than createLogger, so its output only appears with ?ba_debug=*.

Debug logging

On this page