feat(drains): Add vercel log drain docs (#15322)

This PR adds a new product page for drains, and adds a page for vercel
log drains as well. Vercel drains are marked as closed alpha for now,
but will be promoted to EA this week.

Author: AbhiPrasad

docs/product/drains/index.mdx

@@ -0,0 +1,15 @@
+---
+title: Log and Trace Drains
+sidebar_order: 75
+description: Learn how to set up trace and log drains and forwarders to send data to Sentry.
+---
+
+To send data to Sentry, we recommend using the Sentry SDKs. However we also support forwarding data to Sentry from platforms where you can't use the Sentry SDKs. At the moment we only support forwarding logs and traces data, error events are not supported yet.
+
+## Endpoints
+
+- [OpenTelemetry (OTLP)](/concepts/otlp/)
+
+## Drains
+
+- [Vercel](/product/drains/integration/vercel/)

docs/product/drains/integration/vercel.mdx

@@ -0,0 +1,69 @@
+---
+title: Vercel Drains
+sidebar_order: 75
+description: Learn how to set up Vercel drains to send forward logs and traces data to Sentry.
+---
+
+To set up a Drain in Vercel you'll need to create a new Drain in the Vercel settings. For more information on Vercel Drains, please see the [Vercel drain documentation](https://vercel.com/docs/drains).
+
+1. From the Vercel dashboard, go to **Team Settings > Drains** and click **Add Drain**.
+2. Choose a data type. Currently only Logs and Traces are supported.
+
+- [Logs](#log-drains)
+- [Traces](#trace-drains)
+
+## Log Drains
+
+<Alert>
+
+Vercel Log Drains support is currently in closed alpha. Please reach out to [[email protected]](mailto:[email protected]) if you have feedback or questions. Features in alpha are still in-progress and may have bugs. We recognize the irony.
+
+</Alert>
+
+After selecting the Logs data type, you'll need to configure the drain to send data to Sentry.
+
+1. Provide a name for your drain and select which projects should send data to your endpoint. You can choose all projects or select specific ones.
+2. Configure the sampling rate to control the volume of data sent to your drain. We recommend sampling 100% of the data to ensure you get all the data you need.
+3. Select which log sources to collect
+
+- **Functions**: Outputs log data from Vercel Functions like API Routes
+- **Edge Functions**: Outputs log data from Vercel Functions or Routing Middleware using Edge runtime
+- **Static Files**: Collects logs for static assets like HTML and CSS files
+- **Rewrites**: Collects log results for external [rewrites](https://vercel.com/docs/project-configuration#rewrites) to a different domain
+- **Builds**: Outputs log data from the Build Step
+- **Firewall**: Outputs log data from requests denied by [Vercel Firewall](https://vercel.com/docs/vercel-firewall) rules
+
+4. Select which environments to drain from. You can choose to drain from all environments or select specific ones.
+5. Under the custom endpoint tab add the Sentry Vercel Log Drain Endpoint in the URL field. You can find the endpoint in your Sentry Project Settings under **Client Keys (DSN)** > **Vercel**. You can select either JSON or NDJSON encoding.
+
+```URL
+___VERCEL_LOG_DRAIN_URL___
+```
+
+6. Click the Custom Headers toggle and add the Sentry Authentication Header. You'll also find the header value in your Sentry Project Settings under **Client Keys (DSN)** > **Vercel**.
+
+```
+x-sentry-auth: sentry sentry_key=___PUBLIC_KEY___
+```
+
+7. To test that the log drain is working, you can send a test log to your drain by clicking the Test button.
+
+## Trace Drains
+
+After selecting the Traces data type, you'll need to configure the drain to send data to Sentry.
+
+1. Provide a name for your drain and select which projects should send data to your endpoint. You can choose all projects or select specific ones.
+2. Configure the sampling rate to control the volume of data sent to your drain. We recommend sampling 100% of the data to ensure you get all the data you need.
+3. Under the custom endpoint tab add the Sentry Vercel Log Drain Endpoint in the URL field. You can find the endpoint in your Sentry Project Settings under **Client Keys (DSN)** > **OpenTelemetry (OTLP)** under the **OTLP Traces Endpoint** section.
+
+```URL
+___OTLP_TRACES_URL___
+```
+
+4. Click the Custom Headers toggle and add the Sentry Authentication Header. You'll also find the header value in your Sentry Project Settings under **Client Keys (DSN)** > **OpenTelemetry (OTLP)** under the **OTLP Traces Endpoint Headers** section.
+
+```
+x-sentry-auth: sentry sentry_key=___PUBLIC_KEY___
+```
+
+5. To test that the trace drain is working, you can send a test trace to your drain by clicking the Test button.

src/components/codeContext.tsx

@@ -22,6 +22,7 @@ type ProjectCodeKeywords = {
   PUBLIC_KEY: string;
   SECRET_KEY: string;
   UNREAL_URL: string;
+  VERCEL_LOG_DRAIN_URL: string;
   title: string;
 };
 
@@ -90,6 +91,7 @@ export const DEFAULTS: CodeKeywords = {
       UNREAL_URL: 'https://o0.ingest.sentry.io/api/0/unreal/examplePublicKey/',
       OTLP_TRACES_URL: 'https://o0.ingest.sentry.io/api/0/integration/otlp/v1/traces',
       OTLP_LOGS_URL: 'https://o0.ingest.sentry.io/api/0/integration/otlp/v1/logs',
+      VERCEL_LOG_DRAIN_URL: 'https://o0.ingest.sentry.io/api/0/integration/vercel/logs/',
       title: `example-org / example-project`,
     },
   ],
@@ -141,6 +143,10 @@ const formatUnrealEngineURL = ({scheme, host, pathname, publicKey}: Dsn) => {
   return `${scheme}${host}/api${pathname}/unreal/${publicKey}/`;
 };
 
+const formatVercelLogDrainUrl = ({scheme, host, pathname}: Dsn) => {
+  return `${scheme}${host}/api${pathname}/integration/vercel/logs/`;
+};
+
 const formatOtlpTracesUrl = ({scheme, host, pathname}: Dsn) => {
   return `${scheme}${host}/api${pathname}/integration/otlp/v1/traces`;
 };
@@ -241,6 +247,7 @@ export async function fetchCodeKeywords(): Promise<CodeKeywords> {
           parsedDsn.host ?? `o${project.organizationId}.ingest.sentry.io`,
         MINIDUMP_URL: formatMinidumpURL(parsedDsn),
         UNREAL_URL: formatUnrealEngineURL(parsedDsn),
+        VERCEL_LOG_DRAIN_URL: formatVercelLogDrainUrl(parsedDsn),
         OTLP_TRACES_URL: formatOtlpTracesUrl(parsedDsn),
         OTLP_LOGS_URL: formatOtlpLogsUrl(parsedDsn),
         title: `${project.organizationSlug} / ${project.projectSlug}`,