Debug logging in JSS apps

Current version: 22.0

Sitecore JSS NPM packages and samples use the debug module for printing out debugging information.

The module exposes the debug() function, an augmented version of console.log() statements. Unlike console.log, you do not have to comment or remove debug() calls in production code, which means, when necessary, you can easily enable debug logs in production using environment variables.

All Sitecore JSS logs are organized under the root namespace sitecore-jss. Logging is turned off by default and can be conditionally turned on using the DEBUG environment variable.

Note

The debug logs only include server-side code, so there is no benefit to enabling debug logging in the browser.

To output all debug logs available, set the DEBUG environment variable to sitecore-jss:*. The asterisk (*) is used as a wildcard.

RequestResponse
DEBUG=sitecore-jss:*

You can be selective and show only a specific category of log messages, for example, layout service logs.

RequestResponse
DEBUG=sitecore-jss:layout

Alternatively, you can show all but layout service logs by using the - prefix:

RequestResponse
DEBUG=sitecore-jss:*,-sitecore-jss:layout

Namespaces

The following table lists all the available namespaces, along with the applicable Sitecore JSS npm packages and sample applications.

Namespace

Package(s) / sample app(s)

Description

sitecore-jss:http

sitecore-jssnextjs

HTTP request and response logging for default fetch wrappers (GraphQLRequestClient and AxiosDataFetcher).

sitecore-jss:dictionary

sitecore-jssnextjsnode-headless-ssr-experience-edge

Trace logging for dictionary service implementations (GraphQLDictionaryService and RestDictionaryService).

sitecore-jss:layout

sitecore-jssnextjsnode-headless-ssr-experience-edge

Trace logging for layout service implementations (GraphQLLayoutService and RestLayoutService).

sitecore-jss:editing

sitecore-jss-nextjsnextjs

Trace logging for Next.js middleware for Sitecore editor integration.

sitecore-jss:personalize

sitecore-jss-nextjs, nextjs, nextjs-personalize

Trace logging for Next.js Personalize middleware (PersonalizeMiddleware).

sitecore-jss:sitemap

sitecore-jss-nextjsnextjs, nextjs-sxa

Trace logging for Next.js GraphQL sitemap service (GraphQLSitemapService) and Headless SXA sitemap.xml service (GraphQLSitemapXmlService).

sitecore-jss:robots

sitecore-jss-nextjsnextjs, nextjs-sxa

Trace logging for Next.js Headless SXA robots.txt service (GraphQLRobotsService).

sitecore-jss:redirects

sitecore-jss-nextjsnextjs, nextjs-sxa

Trace logging for Next.js Headless SXA redirects middleware (RedirectsMiddleware).

sitecore-jss:errorpages

sitecore-jss-nextjsnextjs, nextjs-sxa

Trace logging for Next.js Headless SXA error pages service (GraphQLErrorPagesService).

sitecore-jss:multisite

sitecore-jss, sitecore-jss-nextjs, nextjs, nextjs-multisite

Trace logging for GraphQL site info service (GraphQLSiteInfoService) and Next.js multisite middleware (MultisiteMiddleware).

sitecore-jss:common

sample apps

Miscellaneous logging in application templates.

Advanced options

When running through Node.js, you can set a few additional environment variables that change the behavior of the debug logging by using the following environment variables:

Name

Description

DEBUG

Enables/disables specific debugging namespaces.

DEBUG_HIDE_DATE

Hide date from debug output (non-TTY).

Default: false

DEBUG_COLORS

Whether to use colors in the debug output.

Default: true

DEBUG_DEPTH

Object inspection depth.

Default: 2

DEBUG_MULTILINE

Pretty-print inspected objects on multiple lines.

Default: false (single line)

DEBUG_SHOW_HIDDEN

Shows hidden properties on inspected objects.

Default: false

Do you have some feedback for us?

If you have suggestions for improving this article,