Debug logging in JSS apps

Version: 22.x

Sitecore JSS NPM packages and sample applications use the debug module for displaying debugging information.

This module exposes the debug() function, an augmented version of console.log(). Unlike console.log(), you don't have to comment or remove debug() calls in production code, which means you can easily configure debug logs in production using environment variables, as needed.

All JSS logs are organized under the root namespace sitecore-jss. Logging is turned off by default, but it can be conditionally enabled using the DEBUG environment variable. There are also several related environment variables that you can use to further configure the content and appearance of debug logs.

When logging is enabled and you run your application, for example with jss start:production or npm run start:production, all triggered instances of debug() relevant to the namespaces you choose to include will be displayed in your console.

Note

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

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

RequestResponse
DEBUG=sitecore-jss:*

You can use namespaces to selectively show a specific category of log messages, for example, layout service logs.

RequestResponse
DEBUG=sitecore-jss:layout

To include more than one specific log namespace, you can write the namespaces in a comma-separated list. The following example will cause debug logs to only include layout and dictionary service logs:

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

To include everything except for specific logs, you can follow the wildcard namespace with a comma-separated list of namespaces that you want to exclude. In the following example, the logs will return everything except for layout service logs, which are excluded due to the - prefix:

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

Namespaces

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

Namespace

Package(s) and sample app(s)

Description

sitecore-jss:http

sitecore-jssnextjs

HTTP request and response logging for default fetch wrappers (GraphQLRequestClient , NativeDataFetcher(JSS version >= 22.4), and AxiosDataFetcher(JSS version <= 22.3)).

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 XM Cloud 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 using Node.js, you can change the behavior of debug logging by using any of the following optional environment variables:

Name

Description

DEBUG_HIDE_DATE

boolean

Whether to hide dates from debug output (non-TTY only).

default: false

DEBUG_COLORS

boolean

Whether to use colors in the debug output.

default: true

DEBUG_DEPTH

number

The object inspection depth.

default: 2

DEBUG_MULTILINE

boolean

Whether to pretty-print inspected objects on multiple lines. If not, they are displayed on a single line.

default: false

DEBUG_SHOW_HIDDEN

boolean

Whether to show hidden properties on inspected objects.

default: false

Do you have some feedback for us?

If you have suggestions for improving this article,