Aprende a integrar los registros del backend de Sentry con las repeticiones de sesión de OpenReplay para ampliar tus capacidades de monitoreo y depuración.

Ve a Sentry > Account > API > Auth Tokens y genera un token de autenticación con los siguientes permisos:

• event:read
• org:read
• project:read

Usarás este token en el siguiente paso al habilitar tu integración de Sentry en el panel de OpenReplay.

1. Copia los slugs de tu organización y de tu proyecto:

• Ve a la página Projects en tu panel de Sentry.
• Copia tu organization_slug y tu project_slug.

2. Configura la integración en OpenReplay:

• En OpenReplay, ve a Preferences > Integrations.
• Localiza la tarjeta de la integración de Sentry.
• Introduce tu organization_slug, tu project_slug y el token de autenticación que generaste en el paso 1.

Para que OpenReplay asocie un evento de Sentry con la sesión de usuario grabada, el evento debe etiquetarse con un ID de sesión único, openReplaySession.id.

Si usas Sentry en tu aplicación frontend, puedes seguir el ejemplo a continuación.

Nota: tracker.start() es asíncrono y devuelve una Promise. Debes esperar a que se resuelva antes de intentar obtener el ID de sesión.

// JavaScript Example for for Single Page Applications (SPA):

import OpenReplay from "@openreplay/tracker";
import * as Sentry from "@sentry/browser";

const tracker = new OpenReplay({
  projectKey: 'YOUR_PROJECT_KEY',
});

tracker.start().then(() => {
  const sessionId = tracker.getSessionID();
  if (sessionId) {
    Sentry.setTag("openReplaySession.id", sessionId);
  }
  // Your application code
});

if (window.OpenReplay) {
  window.OpenReplay.start().then(() => {
    const sessionId = window.OpenReplay.getSessionID();
    if (sessionId) {
      Sentry.setTag("openReplaySession.id", sessionId);
    }
    // Your application code
  });
}

Si usas el SDK de Sentry en tu backend, el ID de sesión debe propagarse desde tu frontend hacia tu backend en cada solicitud que quieras rastrear. Esto puede hacerse mediante una cabecera HTTP personalizada.

Código frontend para enviar el ID de sesión

import OpenReplay from "@openreplay/tracker";

const tracker = new OpenReplay({
  projectKey: 'YOUR_PROJECT_KEY',
});

tracker.start().then(() => {
  const sessionId = tracker.getSessionID();
  const headers = {
    'Content-Type': 'application/json',
  };

  if (sessionId) {
    headers['openReplaySession.id'] = sessionId;
  }

  fetch('https://www.your-backend.com/api/endpoint', {
    method: 'GET', // or 'POST', 'PUT', etc.
    headers,
    // ...other options
  })
    .then(response => {
      // Handle response
    })
    .catch(error => {
      // Handle error
    });
});

Si deseas vincular la URL de la grabación de OpenReplay con Sentry y mostrarla como una etiqueta, puedes hacerlo añadiendo la etiqueta openReplaySessionURL.

import OpenReplay from "@openreplay/tracker";
import * as Sentry from "@sentry/browser";

const tracker = new OpenReplay({
  projectKey: 'YOUR_PROJECT_KEY',
});

tracker.start().then(() => {
  const sessionId = tracker.getSessionID();
  const sessionURL = tracker.getSessionURL();

  if (sessionId) {
    // Tag Sentry events with the session ID
    Sentry.setTag("openReplaySession.id", sessionId);
  }

  if (sessionURL) {
    // Tag Sentry events with the session URL (requires OpenReplay Tracker v3.6.0+)
    Sentry.setTag("openReplaySessionURL", sessionURL);
  }

  // Your application code
});

Si encuentras algún problema, conéctate a nuestro Slack o visita nuestro Foro y obtén ayuda de nuestra comunidad.