> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Traces aus Vercel-Anwendungen

Wenn Sie Anwendungen oder Funktionen auf Vercel bereitstellen, können Sie Telemetriedaten auf eine von zwei Arten an AppSignal senden:

1. [Mit dem Traces Drain von Vercel](#using-the-traces-drain). Zusätzlich zur Weiterleitung der vom OpenTelemetry-Instrumentierungspaket von Vercel erfassten Daten bietet dies auch Einblicke in die Vercel-Infrastruktur, wie z. B. Vercel-Funktionen und Edge-Netzwerk.
2. [Mit dem OpenTelemetry-Instrumentierungspaket von Vercel](#using-the-instrumentation-package).

Stellen Sie sicher, dass Sie [eine Hosted-Collector-URL haben](/collector/hosted-vs-self-hosted#hosted-collector), bevor Sie mit diesen Anweisungen fortfahren.

## Verwendung des Traces Drain

Um Traces von Vercel mit dem Traces Drain an AppSignal weiterzuleiten, müssen Sie in den Einstellungen Ihres Vercel-Projekts einen Traces Drain einrichten. Es wird außerdem empfohlen, das [OpenTelemetry-Instrumentierungspaket von Vercel](https://vercel.com/docs/tracing/instrumentation) in Ihrer Anwendung zu installieren, um Telemetriedaten aus Ihrer Anwendung zu erfassen.

Die Verwendung des Traces Drain von Vercel erfordert einen Vercel-Plan, in dem Drains verfügbar sind. Weitere Informationen zu verfügbaren Plänen und Preisen finden Sie in der [Vercel-Drains-Dokumentation](https://vercel.com/docs/drains).

### Einrichten eines Traces Drain

Navigieren Sie im Vercel-Dashboard zu Ihrem Projekt und gehen Sie zum Abschnitt **Settings > Drains**. Klicken Sie auf **Add Drain** und wählen Sie **Traces** als Drain-Typ aus.

<img src="https://mintcdn.com/appsignal-715f5a51/MS9b5WO71lSfD5jG/assets/images/screenshots/vercel/add-drain.png?fit=max&auto=format&n=MS9b5WO71lSfD5jG&q=85&s=510e2ac6f225ef838fe46f7bea3d0b47" alt="Screenshot des Schritts „Add Drain&#x22; in der Vercel-Benutzeroberfläche" width="1560" height="988" data-path="assets/images/screenshots/vercel/add-drain.png" />

Wenn Sie gefragt werden, welche Projekte Daten über diesen Drain senden sollen, stellen Sie sicher, dass Sie nur dieses Projekt auswählen.

<img src="https://mintcdn.com/appsignal-715f5a51/MS9b5WO71lSfD5jG/assets/images/screenshots/vercel/configure-drain.png?fit=max&auto=format&n=MS9b5WO71lSfD5jG&q=85&s=e76695b4242c308ac055060987cbff8d" alt="Screenshot des Schritts „Configure drain&#x22; in der Vercel-Benutzeroberfläche" width="1526" height="698" data-path="assets/images/screenshots/vercel/configure-drain.png" />

Wählen Sie unter **Configure the destination** den Endpunkt **Custom** aus und geben Sie die URL des OTLP-Endpunkts Ihres AppSignal-Collectors ein und fügen Sie `/v1/traces` am Ende hinzu:

<CodeGroup>
  ```plaintext title="Example URL" theme={null}
  https://your-appsignal-collector-host.com/v1/traces
  ```
</CodeGroup>

Wählen Sie im Dropdown **Encoding** die Option **Protobuf** aus.

Aktivieren Sie **Custom Headers** und fügen Sie die folgenden Header hinzu, um sich bei AppSignal zu authentifizieren. Ersetzen Sie die Platzhalterwerte durch die Informationen Ihrer Anwendung, wie sie in AppSignal angezeigt werden.
Ihren Push-API-Schlüssel finden Sie in den [App-Einstellungen](https://appsignal.com/redirect-to/app?to=info).

<CodeGroup>
  ```yaml Custom Headers theme={null}
  AppSignal-Config-Name: <your-app-name>
  AppSignal-Config-Environment: <your-app-environment>
  AppSignal-Config-PushApiKey: <your-appsignal-push-api-key>
  AppSignal-Config-Revision: vercel
  AppSignal-Config-LanguageIntegration: nodejs
  OpenTelemetry-HostName: vercel
  ```
</CodeGroup>

Wenn Sie auf **Test** klicken, wird ein Test-Trace an AppSignal gesendet und der Drain bei Erfolg gespeichert.

### Installieren und Konfigurieren des Instrumentierungspakets

Verwenden Sie npm, um das OpenTelemetry-Instrumentierungspaket von Vercel und die OpenTelemetry-API zu den Abhängigkeiten Ihrer Anwendung hinzuzufügen:

<CodeGroup>
  ```shell Shell theme={null}
  npm install @opentelemetry/api @vercel/otel
  ```
</CodeGroup>

Wenn Sie Next.js verwenden, fügen Sie die Datei `instrumentation.ts` zu Ihrer Anwendung hinzu. Sie muss im Stammverzeichnis des Projekts platziert werden (oder im Ordner `src`, wenn Sie einen verwenden).

Wenn Sie andere Frameworks oder Vercel-Funktionen verwenden, stellen Sie sicher, dass dieser Code früh im Ausführungsprozess geladen wird, um OpenTelemetry-Daten ordnungsgemäß zu erfassen.

<CodeGroup>
  ```typescript TypeScript theme={null}
  import { registerOTel } from "@vercel/otel";

  export function register() {
    registerOTel({
      serviceName: "My service",
    });
  }
  ```
</CodeGroup>

Aktualisieren Sie den Servicenamen auf einen erkennbaren Namen für Ihre Anwendung.

## Verwendung des Instrumentierungspakets

Um Telemetriedaten mit dem [OpenTelemetry-Instrumentierungspaket von Vercel](https://vercel.com/docs/tracing/instrumentation) an AppSignal zu senden, müssen Sie das Paket in Ihrer Anwendung installieren und konfigurieren.

### Installation der OpenTelemetry-Pakete

Verwenden Sie npm, um das OpenTelemetry-Instrumentierungspaket von Vercel, das OpenTelemetry SDK und den OTLP-Exporter zu den Abhängigkeiten Ihrer Anwendung hinzuzufügen:

<CodeGroup>
  ```shell Shell theme={null}
  npm install @opentelemetry/api \
    @opentelemetry/sdk-metrics \
    @opentelemetry/exporter-trace-otlp-proto \
    @opentelemetry/exporter-metrics-otlp-proto \
    @vercel/otel
  ```
</CodeGroup>

### OpenTelemetry in Ihrer Anwendung konfigurieren

Wenn Sie Next.js verwenden, fügen Sie die Datei `instrumentation.ts` zu Ihrer Anwendung hinzu. Sie muss im Stammverzeichnis des Projekts platziert werden (oder im Ordner `src`, wenn Sie einen verwenden).

Wenn Sie andere Frameworks oder Vercel-Funktionen verwenden, stellen Sie sicher, dass dieser Code früh im Ausführungsprozess geladen wird, um OpenTelemetry-Daten ordnungsgemäß zu erfassen.

<CodeGroup>
  ```typescript TypeScript theme={null}
  import { registerOTel } from "@vercel/otel";
  import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
  import { OTLPMetricExporter } from "@opentelemetry/exporter-metrics-otlp-proto";
  import { PeriodicExportingMetricReader } from "@opentelemetry/sdk-metrics";

  const collectorHost = "https://your-appsignal-collector-host.com";

  export function register() {
    registerOTel({
      serviceName: "My service",
      traceExporter: new OTLPTraceExporter({
        url: `${collectorHost}/v1/traces`,
      }),
      metricReader: new PeriodicExportingMetricReader({
        exportIntervalMillis: 1000,
        exporter: new OTLPMetricExporter({
          url: `${collectorHost}/v1/metrics`,
        }),
      }),
      attributes: {
        "appsignal.config.name": "My app",
        "appsignal.config.environment": "production",
        "appsignal.config.revision": "1",
        "appsignal.config.language_integration": "nodejs",
        "appsignal.config.push_api_key": "0000-0000-0000-0000",
        "host.name": "vercel",
      },
    });
  }
  ```
</CodeGroup>

## Integration testen

Sobald Sie eine der oben genannten Integrationsoptionen abgeschlossen haben, stellen Sie Ihre Anwendung auf Vercel bereit (oder führen Sie ein Vorschau-Deployment aus) und testen Sie, ob Sie Daten in AppSignal sehen. Überprüfen Sie insbesondere die Seiten [„Errors > Issue list"](https://appsignal.com/redirect-to/app?to=exceptions) und [„Performance > Traces"](https://appsignal.com/redirect-to/app?to=performance/traces).

Wenn Sie nach unseren Installationsanweisungen immer noch keine Daten in AppSignal sehen, [lassen Sie es uns wissen](mailto:support@appsignal.com?subject=OpenTelemetry%20issue), und wir helfen Ihnen, Ihre OpenTelemetry-Installation abzuschließen!