> ## 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 d'applications Vercel

Lorsque vous déployez des applications ou des fonctions sur Vercel, vous pouvez envoyer des données de télémétrie à AppSignal de deux manières :

1. [En utilisant le traces drain de Vercel](#using-the-traces-drain). En plus de transférer les données collectées par le package d'instrumentation OpenTelemetry de Vercel, cela offrira également une visibilité sur l'infrastructure de Vercel, telle que les fonctions Vercel et le réseau edge.
2. [En utilisant le package d'instrumentation OpenTelemetry de Vercel](#using-the-instrumentation-package).

Assurez-vous d'[avoir une URL de collecteur hébergé](/collector/hosted-vs-self-hosted#hosted-collector) avant de poursuivre ces instructions.

## Utilisation du traces drain

Pour transférer les traces de Vercel vers AppSignal en utilisant le traces drain, vous devez configurer un traces drain dans les paramètres de votre projet Vercel. Il est également recommandé d'installer le [package d'instrumentation OpenTelemetry de Vercel](https://vercel.com/docs/tracing/instrumentation) dans votre application pour capturer les données de télémétrie depuis votre application.

L'utilisation du traces drain de Vercel nécessite un plan Vercel sur lequel les drains sont disponibles. Consultez la [documentation des drains Vercel](https://vercel.com/docs/drains) pour plus d'informations sur les plans disponibles et les tarifs.

### Configurer un traces drain

Depuis le tableau de bord Vercel, accédez à votre projet et allez à la section **Settings > Drains**. Cliquez sur **Add Drain** et sélectionnez **Traces** comme type de drain.

<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="Capture d'écran de l'étape « Add Drain » dans l'interface Vercel" width="1560" height="988" data-path="assets/images/screenshots/vercel/add-drain.png" />

Lorsqu'on vous demande quels projets doivent envoyer des données en utilisant ce drain, assurez-vous de sélectionner uniquement ce projet.

<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="Capture d'écran de l'étape « Configure drain » dans l'interface Vercel" width="1526" height="698" data-path="assets/images/screenshots/vercel/configure-drain.png" />

Sous **Configure the destination**, sélectionnez le point de terminaison **Custom** et entrez l'URL du point de terminaison OTLP de votre collecteur AppSignal, en ajoutant `/v1/traces` à la fin :

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

Dans le menu déroulant **Encoding**, sélectionnez **Protobuf**.

Activez **Custom Headers** et ajoutez les en-têtes suivants pour authentifier auprès d'AppSignal, en remplaçant les valeurs des espaces réservés par les informations de votre application telles qu'elles apparaissent dans AppSignal.
Votre clé Push API peut être trouvée dans les [App settings](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>

Cliquer sur **Test** enverra une trace de test à AppSignal et enregistrera le drain en cas de succès.

### Installer et configurer le package d'instrumentation

Utilisez npm pour ajouter le package d'instrumentation OpenTelemetry de Vercel et l'API OpenTelemetry aux dépendances de votre application :

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

Si vous utilisez Next.js, ajoutez le fichier `instrumentation.ts` à votre application. Il doit être placé dans le répertoire racine du projet (ou dans le dossier `src` si vous en utilisez un).

Si vous utilisez d'autres frameworks ou des fonctions Vercel, assurez-vous que ce code est chargé tôt dans le processus d'exécution pour capturer correctement les données OpenTelemetry.

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

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

Mettez à jour le nom du service avec un nom reconnaissable pour votre application.

## Utilisation du package d'instrumentation

Pour envoyer des données de télémétrie à AppSignal en utilisant le [package d'instrumentation OpenTelemetry de Vercel](https://vercel.com/docs/tracing/instrumentation), vous devez installer et configurer le package dans votre application.

### Installer les packages OpenTelemetry

Utilisez npm pour ajouter le package d'instrumentation OpenTelemetry de Vercel, le SDK OpenTelemetry et l'exportateur OTLP aux dépendances de votre application :

<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>

### Configurer OpenTelemetry dans votre application

Si vous utilisez Next.js, ajoutez le fichier `instrumentation.ts` à votre application. Il doit être placé dans le répertoire racine du projet (ou dans le dossier `src` si vous en utilisez un).

Si vous utilisez d'autres frameworks ou des fonctions Vercel, assurez-vous que ce code est chargé tôt dans le processus d'exécution pour capturer correctement les données OpenTelemetry.

<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>

## Tester l'intégration

Une fois que vous avez terminé l'une des options d'intégration ci-dessus, déployez votre application sur Vercel (ou exécutez un déploiement de prévisualisation) et testez si vous voyez les données arriver dans AppSignal. Vérifiez plus particulièrement les pages [« Errors > Issue list »](https://appsignal.com/redirect-to/app?to=exceptions) et [« Performance > Traces »](https://appsignal.com/redirect-to/app?to=performance/traces).

Si après avoir suivi nos instructions d'installation vous ne voyez toujours pas de données dans AppSignal, [faites-le nous savoir](mailto:support@appsignal.com?subject=OpenTelemetry%20issue) et nous vous aiderons à finaliser votre installation OpenTelemetry !
