fix(replay): Use correct replay category in client reports

packages/core/src/baseclient.ts

@@ -2,6 +2,7 @@
 import type {
   Client,
   ClientOptions,
+  ClientReportCategory,
   DataCategory,
   DsnComponents,
   Envelope,
@@ -337,13 +338,15 @@ export abstract class BaseClient<O extends ClientOptions> implements Client<O> {
     // Note: we use `event` in replay, where we overwrite this hook.
 
     if (this._options.sendClientReports) {
-      // We want to track each category (error, transaction, session, replay_event) separately
+      const clientReportCategory = dataCategoryToClientReportCategory(category);
+
+      // We want to track each category (error, transaction, session, replay) separately
       // but still keep the distinction between different type of outcomes.
       // We could use nested maps, but it's much easier to read and type this way.
       // A correct type for map-based implementation if we want to go that route
       // would be `Partial<Record<SentryRequestType, Partial<Record<Outcome, number>>>>`
       // With typescript 4.1 we could even use template literal types
-      const key = `${reason}:${category}`;
+      const key = `${reason}:${clientReportCategory}`;
       __DEBUG_BUILD__ && logger.log(`Adding outcome: "${key}"`);
 
       // The following works because undefined + 1 === NaN and NaN is falsy
@@ -688,3 +691,10 @@ function isErrorEvent(event: Event): event is ErrorEvent {
 function isTransactionEvent(event: Event): event is TransactionEvent {
   return event.type === 'transaction';
 }
+
+function dataCategoryToClientReportCategory(category: DataCategory): ClientReportCategory {
+  if (category === 'replay_event' || category === 'replay_recording') {
+    return 'replay';
+  }
+  return category;
+}

packages/core/test/lib/base.test.ts

@@ -1,4 +1,4 @@
-import type { Event, Span } from '@sentry/types';
+import type { DataCategory, Event, Span } from '@sentry/types';
 import { dsnToString, logger, SentryError, SyncPromise } from '@sentry/utils';
 
 import { Hub, makeSession, Scope } from '../../src';
@@ -1714,5 +1714,24 @@ describe('BaseClient', () => {
       const clearedOutcomes4 = client._clearOutcomes();
       expect(clearedOutcomes4.length).toEqual(0);
     });
+
+    test.each(['replay_event', 'replay_recording'])(
+      'converts replay event types (%s) to replay client report category',
+      replayEventType => {
+        const options = getDefaultTestClientOptions({ dsn: PUBLIC_DSN });
+        const client = new TestClient(options);
+
+        client.recordDroppedEvent('ratelimit_backoff', replayEventType as DataCategory);
+
+        const clearedOutcomes = client._clearOutcomes();
+        expect(clearedOutcomes).toEqual([
+          {
+            reason: 'ratelimit_backoff',
+            category: 'replay',
+            quantity: 1,
+          },
+        ]);
+      },
+    );
   });
 });

packages/types/src/datacategory.ts

@@ -10,8 +10,6 @@ export type DataCategory =
   | 'error'
   // Transaction type event
   | 'transaction'
-  // Replay type event
-  | 'replay_event'
   // Events with `event_type` csp, hpkp, expectct, expectstaple
   | 'security'
   // Attachment bytes stored (unused for rate limiting
@@ -22,6 +20,11 @@ export type DataCategory =
   | 'internal'
   // Profile event type
   | 'profile'
-  // Replay event types
+  // Replay event types (see note below)
   | 'replay_event'
   | 'replay_recording';
+
+// Replay event types and categories are a little different in envelopes, client reports and rate limits
+// Hence, we're using a type alias to make it easier to use the correct category in the right place
+export type RateLimitCategory = Omit<DataCategory, 'replay_event' | 'replay_recording'> | 'replay';
+export type ClientReportCategory = RateLimitCategory;

packages/types/src/index.ts

@@ -3,7 +3,7 @@ export type { Breadcrumb, BreadcrumbHint } from './breadcrumb';
 export type { Client } from './client';
 export type { ClientReport, Outcome, EventDropReason } from './clientreport';
 export type { Context, Contexts, DeviceContext, OsContext, AppContext, CultureContext, TraceContext } from './context';
-export type { DataCategory } from './datacategory';
+export type { DataCategory, ClientReportCategory, RateLimitCategory } from './datacategory';
 export type { DsnComponents, DsnLike, DsnProtocol } from './dsn';
 export type { DebugImage, DebugImageType, DebugMeta } from './debugMeta';
 export type {

packages/utils/src/ratelimit.ts

@@ -1,4 +1,4 @@
-import type { TransportMakeRequestResponse } from '@sentry/types';
+import type { RateLimitCategory, TransportMakeRequestResponse } from '@sentry/types';
 
 // Intentionally keeping the key broad, as we don't know for sure what rate limit headers get returned from backend
 export type RateLimits = Record<string, number>;
@@ -32,14 +32,19 @@ export function parseRetryAfterHeader(header: string, now: number = Date.now()):
  *
  * @return the time in ms that the category is disabled until or 0 if there's no active rate limit.
  */
-export function disabledUntil(limits: RateLimits, category: string): number {
-  return limits[category] || limits.all || 0;
+export function disabledUntil(limits: RateLimits, category: RateLimitCategory | string): number {
+  // type casting here because TS doesn't realize that RateLimitDataCategory is a string literal type
+  return limits[category as string] || limits.all || 0;
 }
 
 /**
  * Checks if a category is rate limited
  */
-export function isRateLimited(limits: RateLimits, category: string, now: number = Date.now()): boolean {
+export function isRateLimited(
+  limits: RateLimits,
+  category: RateLimitCategory | string,
+  now: number = Date.now(),
+): boolean {
   return disabledUntil(limits, category) > now;
 }