log
The log utility is a function that's used for logging debugging, warning, and error information about the application. Use this utility by importing log from @shopify/hydrogen, or by using a log prop passed to each page component. We recommend using the log prop passed to each page because it will associate your log to the current request in progress.
Example code
Anchor link to section titled "Example code"
None
Return type
Anchor link to section titled "Return type"Return an object with methods for logging information at different priorities:
| Log method | Description |
|---|---|
log.trace() |
The lowest priority logs. These logs are very verbose. |
log.debug() |
The normal priority logs. Used internally for logging route timing information. |
log.warn() |
The high priority warnings that might or might not cause the application to fail. |
log.error() |
The logging used for errors or invalid application state. |
log.fatal() |
The logging used just prior to the process exiting. |
Logger options
Anchor link to section titled "Logger options"Logger has the following Boolean options:
| Option | Description |
|---|---|
showCacheApiStatus |
Logs the cache status of each stored entry: PUT, HIT, MISS or STALE. |
showCacheControlHeader |
Logs the cache control headers of the main document and its sub queries. |
showQueryTiming |
Logs the timeline of when queries are being requested, resolved, and rendered. |
showUnusedQueryProperties |
Logs warnings in your app if you're over-fetching data from the Storefront API. |
Swap logger implementation
Anchor link to section titled "Swap logger implementation"Hydrogen includes a default logger implementation that can be swapped for a logger of your choice. You can call setLogger with your own implementation. The first argument of each log method will contain a request object if the log was called in the same context as a request: