Cómo integrar Sentry con OpenReplay y ver los errores del backend junto a las grabaciones de sesiones.

Ve a Sentry > Account > API > Auth Tokens y genera el token con los permisos event:read, org:read y project:read. Este último se usará en el siguiente paso al habilitar tu integración de Sentry en el panel de OpenReplay.

Copia tu organization_slug y tu project_slug desde la página Projects de tu panel de Sentry.

Luego pégalos en el panel de OpenReplay, en ‘Preferences > Integration’, junto al token que generaste previamente en el paso 1.

Para que OpenReplay pueda asociar un evento de Sentry con la sesión de usuario grabada, el evento de Sentry debe etiquetarse con un token único.

Si dependes de Sentry en tu frontend, puedes seguir el ejemplo de abajo.

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

const tracker = new OpenReplay({
	projectKey: MY_PROJECT_KEY,
	onStart: ({ sessionToken }) => {
	  Sentry.setTag("openReplaySessionToken", sessionToken);
	},
})

O en caso de usar el snippet:

if (window.OpenReplay.getSessionToken()) {
	Sentry.setTag("openReplaySessionToken", window.OpenReplay.getSessionToken());
}

De lo contrario, si usas el SDK de Sentry en el backend, el token de sesión debe propagarse desde tu frontend en cada petición que quieras rastrear. Esto puede hacerse mediante un encabezado HTTP personalizado. En el siguiente ejemplo, usamos la API fetch para enviar ese encabezado.

const headers = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
};
if (tracker.getSessionToken()) { // or window.OpenReplay instead of tracker if you're using the snippet
  headers['X-OpenReplay-SessionToken'] = tracker.getSessionToken(); // Inject openReplaySessionToken
}
fetch('www.your-backend.com', {
  'GET',
  headers,
});

También puedes usar el Fetch Plugin de OpenReplay para establecer el encabezado automáticamente en cada petición de rastreo.

Luego puedes extraer el openReplaySessionToken del encabezado y agregarlo a tu scope de Sentry (idealmente usando un middleware o un decorador).

with configure_scope() as scope:
  scope.set_tag('openReplaySessionToken', app.current_request.headers.get('X-OpenReplay-SessionToken'))

El nombre de la etiqueta debe ser exactamente openReplaySessionToken.

Si deseas vincular la URL de la grabación de OpenReplay con Sentry y mostrarla como una etiqueta, aquí tienes un ejemplo de cómo hacerlo:

 const tracker = new OpenReplay({
 projectKey: window.OPENREPLAY_PROJECT_KEY,
 
 onStart: ({ sessionToken, sessionID }) => {
  // This is to link from OpenReplay -> Sentry
  Sentry.setTag("openReplaySessionToken", sessionToken);
 
  // This is to link from Sentry -> OpenReplay (requires tracker v3.6.0+)
  Sentry.setTag(
    "openReplaySessionURL",
    tracker.getSessionURL();
    );
  },
});

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