Debug logging in JSS apps
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 out or remove debug() calls in production code, which means you can easily enable debug logs in production when necessary 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 by using the DEBUG environment variable.
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.
You can be selective and show only a specific category of log messages, for example, layout service logs.
Alternatively, you can show all but layout service logs by using the - prefix:
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-jss, nextjs | 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-jss, nextjs, node-headless-ssr-experience-edge | Trace logging for dictionary service implementations (GraphQLDictionaryService and RestDictionaryService). |
sitecore-jss:layout | sitecore-jss, nextjs, node-headless-ssr-experience-edge | Trace logging for layout service implementations (GraphQLLayoutService and RestLayoutService). |
sitecore-jss:editing | sitecore-jss-nextjs, nextjs | Trace logging for Next.js middleware for Sitecore editor integration. |
sitecore-jss:sitemap | sitecore-jss-nextjs, nextjs, nextjs-sxa | Trace logging for Next.js GraphQL sitemap service (GraphQLSitemapService) and Headless SXA sitemap.xml service (GraphQLSitemapXmlService). |
sitecore-jss:robots | sitecore-jss-nextjs, nextjs, nextjs-sxa | Trace logging for Next.js Headless SXA robots.txt service (GraphQLRobotsService). |
sitecore-jss:redirects | sitecore-jss-nextjs, nextjs, nextjs-sxa | Trace logging for Next.js Headless SXA redirects middleware (RedirectsMiddleware). |
sitecore-jss:errorpages | sitecore-jss-nextjs, nextjs, 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). |
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 |