> Plus: > Log drains are available only to stores on a [Shopify Plus plan](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan). Log drains enable merchants to send a copy of their logs to a supported destination, or sink, of their choice. Supported sinks include: Splunk Enterprise, Datadog, and New Relic. ## Delivery guarantees In the event of a failed request, Shopify will retry a number of times over a set amount of time. However, Shopify doesn't provide any uptime or delivery guarantees on behalf of the sink provider. The average log message is expected to be processed in a few seconds, with initial delivery to be attempted within five minutes. Different providers might take additional time to handle the ingestion of logs. Delivery and retries can be impacted by limitations and availability of the external provider in use. If the third-party provider can't receive or handle a request during the retry time frame, then the messages are dropped. > Note: > If the log drain provider experiences an outage, then Shopify isn't responsible for any failed log deliveries. ## Log types Different types of logs are sent through the log drains integration. Review the following log types so that you can effectively manage and analyze the data generated by your Hydrogen storefront: - [Request logs](#request-logs) - [Runtime logs](#runtime-logs) - [Exception logs](#exception-logs) ### Request logs A request log is a message generated by Shopify that provides general metadata around each request. This information is important for monitoring and troubleshooting issues related to your Hydrogen storefront's performance and user interactions. <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="json"> { hostname: "example.com", shop_id: "123456", deployment_id: "abc8221", storefront_id: "11111", timestamp: "2023-03-30T10:00:00.000Z", request_id: "abc4-3123fe-rg", path: "/url_path", idx: 0, type: "request", code: 200, method: "GET", url: "example.com/url_path", user_agent: "Mozilla/5.0" } </script> </div> </p> <table> <tr> <th>Field</th> <th>Description</th> </tr> <tr> <td><code>hostname</code></td> <td>The domain name of the URL.</td> </tr> <tr> <td><code>shop_id</code></td> <td>The ID of the store.</td> </tr> <tr> <td><code>storefront_id</code></td> <td>The ID of the Hydrogen storefront. This is different from the <code>shop_id</code> because you can have multiple Hydrogen storefronts under a single store.</td> </tr> <tr> <td><code>deployment_id</code></td> <td>The ID of the storefront's deployment.</td> </tr> <tr> <td><code>timestamp</code></td> <td>The time of the event.</td> </tr> <tr> <td><code>request_id</code></td> <td>A unique ID of a request. This can be used to identify all request, runtime, or exception logs generated by a single request.</td> </tr> <tr> <td><code>path</code></td> <td>The path component of the URL.</td> </tr> <tr> <td><code>idx</code></td> <td>A counter that represents the order of events within a single request. The <code>idx</code> value will always be 0 for <code>request</code> type logs.</td> </tr> <tr> <td><code>type</code></td> <td>The type of the log. Set to <code>request</code> for request logs. Possible values: <code>request</code>, <code>runtime</code>, <code>exception</code>.</td> </tr> <tr> <td><code>code</code></td> <td>The HTTP response status code.</td> </tr> <tr> <td><code>method</code></td> <td>The HTTP request method.</td> </tr> <tr> <td><code>url</code></td> <td>The full request URL.</td> </tr> <tr> <td><code>user_agent</code></td> <td>The user agent provided in the request headers.</td> </tr> </table> ### Runtime logs Runtime logs are usage logs that are typically sent to the console using `console.log`, `console.warn` or `console.error`. <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="json"> { hostname: "example.com", shop_id: "123456", deployment_id: "abc8221", storefront_id: "11111", timestamp: "2023-03-30T10:00:00.000Z", request_id: "abc4-3123fe-rg", path: "/url_path", idx: 1, type: "runtime", level: "info", message: "this is log message" } </script> </div> </p> <table> <tr> <th>Field</th> <th>Description</th> </tr> <tr> <td><code>hostname</code></td> <td>The domain name of the URL.</td> </tr> <tr> <td><code>shop_id</code></td> <td>The ID of the store.</td> </tr> <tr> <td><code>storefront_id</code></td> <td>The ID of the Hydrogen storefront. This is different from the <code>shop_id</code> because you can have multiple Hydrogen storefronts under a single store.</td> </tr> <tr> <td><code>deployment_id</code></td> <td>The ID of the storefront's deployment.</td> </tr> <tr> <td><code>timestamp</code></td> <td>The time of the event.</td> </tr> <tr> <td><code>request_id</code></td> <td>A unique ID of a request.</td> </tr> <tr> <td><code>path</code></td> <td>The path component of the URL.</td> </tr> <tr> <td><code>idx</code></td> <td>A counter that represents the order of events within a single request. This is useful if you have multiple log lines that occur at the same timestamp.</td> </tr> <tr> <td><code>type</code></td> <td>The type of log. Set to <code>runtime</code> for runtime or application logs. Possible values: <code>request</code>, <code>runtime</code>, <code>exception</code>.</td> </tr> <tr> <td><code>level</code></td> <td>The log level. Possible values: <code>info</code>, <code>debug</code>, <code>warn</code>.</td> </tr> <tr> <td><code>message</code></td> <td>The content of a logged message.</td> </tr> </table> ### Exception logs Exception logs are generated by uncaught exceptions in your Hydrogen storefront. <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="json"> { hostname: "example.com", shop_id: "123456", deployment_id: "abc8221", storefront_id: "11111", timestamp: "2023-03-30T10:00:00.000Z", request_id: "abc4-3123fe-rg", path: "/url_path", idx: 2, type: "exception", name: "StandardError", message: "Error when assigning value to a variable" } </script> </div> </p> <table> <tr> <th>Field</th> <th>Description</th> </tr> <tr> <td><code>hostname</code></td> <td>The domain name of the URL.</td> </tr> <tr> <td><code>shop_id</code></td> <td>The ID of the store.</td> </tr> <tr> <td><code>storefront_id</code></td> <td>The ID of the Hydrogen storefront. This is different from the <code>shop_id</code> because you can have multiple Hydrogen storefronts under a single store.</td> </tr> <tr> <td><code>deployment_id</code></td> <td>The ID of the storefront's deployment.</td> </tr> <tr> <td><code>timestamp</code></td> <td>The time of the event.</td> </tr> <tr> <td><code>request_id</code></td> <td>A unique ID of a request.</td> </tr> <tr> <td><code>path</code></td> <td>The path component of the URL.</td> </tr> <tr> <td><code>idx</code></td> <td>A counter that represents the order of events within a single request. This is useful if you have multiple log lines that occur at the same timestamp.</td> </tr> <tr> <td><code>type</code></td> <td>The type of the log. Set to <code>exception</code> for exception logs. Possible values: <code>request</code>, <code>runtime</code>, <code>exception</code>.</td> </tr> <tr> <td><code>name</code></td> <td>The name of the error.</td> </tr> <tr> <td><code>message</code></td> <td>The content of the error message.</td> </tr> </table> ## Log drain providers Before you connect a log drain you need to be signed up with one of the following supported providers: <table> <tr> <th>Provider</th> <th>Documentation</th> <th>Custom fields</th> </tr> <tr> <td><a href="https://www.datadoghq.com/product/log-management/">Datadog</a></td> <td><a href="https://docs.datadoghq.com/">Datadog docs</a></td> <td> <ul> <li>The <a href="https://docs.datadoghq.com/getting_started/site/">Datadog site</a> to send data to.</li> <li>Your organization's <a href="https://docs.datadoghq.com/account_management/api-app-keys/">API key</a>.</li> </ul> </td> </tr> <tr> <td><a href="https://newrelic.com/platform/log-management">New Relic</a></td> <td><a href="https://docs.newrelic.com/">New Relic docs</a></td> <td> <ul> <li>Your organization's <a href="https://docs.newrelic.com/docs/apis/intro-apis/new-relic-api-keys/">License key</a>.</li> <li>The <a href="https://docs.newrelic.com/docs/accounts/accounts-billing/account-setup/choose-your-data-center">New Relic region</a> to send data to.</li> </ul> </td> </tr> <tr> <td><a href="https://www.splunk.com/en_us/products/splunk-enterprise.html">Splunk Enterprise</a></td> <td> <a href="https://vector.dev/docs/reference/configuration/sinks/splunk_hec_logs/">Vector docs</a> and <a href="https://docs.splunk.com/Documentation/Splunk/9.0.1/Data/UsetheHTTPEventCollector">Splunk Enterprise docs</a> </td> <td> <ul> <li>The <a href="https://vector.dev/docs/reference/configuration/sinks/splunk_hec_logs/#default_token">default token</a> for the Splunk HTTP Event Collector.</li> <li>The <a href="https://vector.dev/docs/reference/configuration/sinks/splunk_hec_logs/#endpoint">base URL</a> of your Splunk Enterprise <a href="https://docs.splunk.com/Splexicon:Instance">instance</a>, including <code>"https://"</code>.</li> <li>The name of the log field to be used as the <a href="https://docs.splunk.com/Documentation/Splunk/latest/Data/Abouthosts">hostname</a> sent to Splunk Enterprise.</li> <li>The name of the <a href="https://docs.splunk.com/Splexicon:Index">Splunk index</a> to send the events to. If not specified, then the default index is used.</li> </ul> </td> </tr> </table> ## Connecting a log drain To connect a log drain, complete the following steps: 1. From your Shopify admin, under **Sales channels**, click **Hydrogen**. 2. From the **Hydrogen storefront** page, click **Storefront settings**. 3. On the **Storefront settings** page, click **Integrations**. 4. On the **Integrations settings** page, click **Connect a log drain**. 5. Select your log drain provider. 6. Fill out the required fields for your provider. 7. Click **Connect**. After you've created the connection, navigate to your sink to validate that your logs are successfully received. You need to make requests to your storefront application to view the logs. If you don't see logs after a few minutes, then check the status of your log drain connection or try sending logs again.