Fix platform icons

packages/core/src/integrations/sentry/components/EventDetails.tsx

@@ -57,7 +57,7 @@ export default function EventDetails() {
  return (
  <>
  <div className="flex items-center gap-x-2 bg-indigo-950 px-6 py-4">
- <PlatformIcon platform={event.platform} />
+ <PlatformIcon event={event} />
  <h1 className="max-w-full flex-1 truncate text-2xl">{renderEventTitle(event)}</h1>
  {!!traceCtx && (
  <div className="font-mono text-indigo-300">

packages/core/src/integrations/sentry/components/EventList.tsx

@@ -25,7 +25,7 @@ export default function EventList() {
  key={e.event_id}
  to={e.event_id}
  >
- <PlatformIcon platform={e.platform} className="text-indigo-300" />
+ <PlatformIcon event={e} className="text-indigo-300" />
  <div className="flex w-48 flex-col truncate font-mono text-indigo-300">
  <span>{(e.event_id || '').substring(0, 8)}</span>
  <TimeSince date={e.timestamp} />

packages/core/src/integrations/sentry/components/PlatformIcon.tsx

@@ -3,20 +3,29 @@ import { ReactComponent as JavaScriptIcon } from 'platformicons/svg/javascript.s
 import { ReactComponent as NodeIcon } from 'platformicons/svg/nodejs.svg';
 import { ReactComponent as PhpIcon } from 'platformicons/svg/php.svg';
 import { ReactComponent as PythonIcon } from 'platformicons/svg/python.svg';
+import { ReactComponent as RubyIcon } from 'platformicons/svg/ruby.svg';
+
+import { SentryEvent } from '../types';
 
 import { ComponentPropsWithoutRef } from 'react';
 
-type Platform = 'python' | 'javascript' | 'node' | string;
+type Platform = 'python' | 'javascript' | 'node' | 'ruby' | string;
 
 export default function PlatformIcon({
  platform,
+ event,
  size = 42,
  ...props
 }: ComponentPropsWithoutRef<'svg'> & {
  size?: number;
  platform?: Platform;
+ event?: SentryEvent;
 }) {
- switch (platform) {
+ console.log('SDK:', platform, event?.platform);
+ const name = platform || event?.platform || 'unknown';
+ switch (name) {
+ case 'ruby':
+ return <RubyIcon width={size} height={size} {...props} />;
  case 'python':
  return <PythonIcon width={size} height={size} {...props} />;
  case 'javascript':

packages/core/src/integrations/sentry/components/SdkList.tsx

@@ -3,7 +3,10 @@ import PlatformIcon from './PlatformIcon';
 import TimeSince from './TimeSince';
 
 function sdkToPlatform(name: string) {
- if (name.indexOf('sentry.javascript') === 0) return 'javascript';
+ if (name.indexOf('javascript') === 0) return 'javascript';
+ if (name.indexOf('python') === 0) return 'python';
+ if (name.indexOf('php') === 0) return 'php';
+ if (name.indexOf('ruby') === 0) return 'ruby';
  return 'unknown';
 }
 

packages/core/src/integrations/sentry/data/sentryDataCache.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, test } from 'vitest';
+import { processEnvelope } from '../index';
+import sentryDataCache from './sentryDataCache';
+
+import fs from 'fs';
+
+describe('SentryDataCache', () => {
+ // We need to refactor this to make it actually testable
+ test('Process Envelope', () => {
+ const envelope = fs.readFileSync('./_fixtures/envelope1.txt', 'utf-8');
+ const processedEnvelope = processEnvelope({ data: envelope, contentType: 'test' });
+ sentryDataCache.pushEnvelope(processedEnvelope.event);
+ expect(true).not.toBe(undefined);
+ });
+});

packages/core/src/integrations/sentry/data/sentryDataCache.ts

@@ -14,6 +14,14 @@ type TraceSubscription = ['trace', (trace: Trace) => void];
 
 type Subscription = OnlineSubscription | EventSubscription | TraceSubscription;
 
+function sdkToPlatform(name: string) {
+ if (name.indexOf('javascript') !== -1) return 'javascript';
+ if (name.indexOf('python') !== -1) return 'python';
+ if (name.indexOf('php') !== -1) return 'php';
+ if (name.indexOf('ruby') !== -1) return 'ruby';
+ return 'unknown';
+}
+
 class SentryDataCache {
  protected events: SentryEvent[] = [];
  protected sdks: Sdk[] = [];
@@ -30,22 +38,51 @@ class SentryDataCache {
  initial.forEach(e => this.pushEvent(e));
  }
 
+ inferSdkFromEvent(event: SentryEvent) {
+ const sdk: Sdk = {
+ name: 'unknown',
+ version: 'unknown',
+ lastSeen: new Date().getTime(),
+ };
+
+ if (event.sdk) {
+ sdk.name = event.sdk.name || sdk.name;
+ sdk.version = event.sdk.version || sdk.version;
+ } else if (event.platform) {
+ sdk.name = event.platform;
+ }
+
+ return sdk;
+ }
+
  pushEnvelope(envelope: Envelope) {
  const [header, items] = envelope;
+ let sdk: Sdk;
  if (header.sdk && header.sdk.name && header.sdk.version) {
- const existingSdk = this.sdks.find(s => s.name === header.sdk!.name && s.version === header.sdk!.version);
- if (!existingSdk) {
- this.sdks.push({
- name: header.sdk.name,
- version: header.sdk.version,
- lastSeen: new Date(header.sent_at as string).getTime(),
- });
- } else {
- existingSdk.lastSeen = new Date(header.sent_at as string).getTime();
- }
+ sdk = {
+ name: header.sdk.name,
+ version: header.sdk.version,
+ lastSeen: new Date(header.sent_at as string).getTime(),
+ };
+ } else {
+ sdk = this.inferSdkFromEvent(items[0][1] as SentryEvent);
  }
+
+ const existingSdk = this.sdks.find(s => s.name === sdk!.name && s.version === sdk!.version);
+ if (!existingSdk) {
+ this.sdks.push({
+ name: sdk.name,
+ version: sdk.version,
+ lastSeen: new Date(header.sent_at as string).getTime(),
+ });
+ } else {
+ existingSdk.lastSeen = new Date(header.sent_at as string).getTime();
+ }
+
  items.forEach(([itemHeader, itemData]) => {
  if (itemHeader.type === 'event' || itemHeader.type === 'transaction') {
+ console.log(sdkToPlatform(sdk.name));
+ (itemData as SentryEvent).platform = sdkToPlatform(sdk.name);
  this.pushEvent(itemData as SentryEvent);
  }
  });

packages/core/src/integrations/sentry/types.ts

@@ -59,6 +59,7 @@ type CommonEventAttrs = {
  contexts?: Contexts;
  tags?: Tags;
  extra?: { [key: string]: string | number };
+ sdk?: Sdk;
 };
 
 export type Context = {