From cdb4e8b59d4b46baf6677c42ef9078e00cfec683 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Thu, 4 Apr 2024 15:48:11 +0100
Subject: [PATCH] feat: display sentry levels when capturing messages (#21243)

* feat: display sentry levels when capturing messages

* tset

* delete dangling snapshot
---
 .../lib/components/Errors/ErrorDisplay.tsx    |  5 +-
 .../__snapshots__/error-display.test.ts.snap  | 20 ------
 .../components/Errors/error-display.test.ts   | 63 ++++++++++++++++++-
 frontend/src/loadPostHogJS.tsx                |  2 +-
 4 files changed, 65 insertions(+), 25 deletions(-)
 delete mode 100644 frontend/src/lib/components/Errors/__snapshots__/error-display.test.ts.snap

diff --git a/frontend/src/lib/components/Errors/ErrorDisplay.tsx b/frontend/src/lib/components/Errors/ErrorDisplay.tsx
index cfac9ef9d21a9..1b133f5a4f749 100644
--- a/frontend/src/lib/components/Errors/ErrorDisplay.tsx
+++ b/frontend/src/lib/components/Errors/ErrorDisplay.tsx
@@ -124,6 +124,7 @@ export function getExceptionPropertiesFrom(eventProperties: Record<string, any>)
         $active_feature_flags,
         $sentry_url,
         $sentry_exception,
+        $level,
     } = eventProperties
 
     let $exception_stack_trace_raw = eventProperties.$exception_stack_trace_raw
@@ -151,6 +152,7 @@ export function getExceptionPropertiesFrom(eventProperties: Record<string, any>)
         $active_feature_flags,
         $sentry_url,
         $exception_stack_trace_raw,
+        $level,
     }
 }
 
@@ -172,13 +174,14 @@ export function ErrorDisplay({ event }: { event: EventType | RecordingEventType
         $active_feature_flags,
         $sentry_url,
         $exception_stack_trace_raw,
+        $level,
     } = getExceptionPropertiesFrom(event.properties)
 
     return (
         <div className="flex flex-col space-y-2 pr-4 pb-2">
             <h1 className="mb-0">{$exception_message}</h1>
             <div className="flex flex-row gap-2 flex-wrap">
-                <LemonTag type="danger">{$exception_type}</LemonTag>
+                <LemonTag type="danger">{$exception_type || $level}</LemonTag>
                 <TitledSnack
                     type="success"
                     title="captured by"
diff --git a/frontend/src/lib/components/Errors/__snapshots__/error-display.test.ts.snap b/frontend/src/lib/components/Errors/__snapshots__/error-display.test.ts.snap
deleted file mode 100644
index 29adf34a5c83c..0000000000000
--- a/frontend/src/lib/components/Errors/__snapshots__/error-display.test.ts.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Error Display can read sentry stack trace when $exception_stack_trace_raw is not present 1`] = `
-{
-  "$active_feature_flags": [
-    "feature1,feature2",
-  ],
-  "$browser": "Chrome",
-  "$browser_version": "92.0.4515",
-  "$exception_message": "There was an error creating the support ticket with zendesk.",
-  "$exception_stack_trace_raw": "[{"colno":220,"filename":"https://app-static-prod.posthog.com/static/chunk-UFQKIDIH.js","function":"submitZendeskTicket","in_app":true,"lineno":25}]",
-  "$exception_synthetic": undefined,
-  "$exception_type": "Error",
-  "$lib": "posthog-js",
-  "$lib_version": "1.0.0",
-  "$os": "Windows",
-  "$os_version": "10",
-  "$sentry_url": "https://sentry.io/organizations/posthog/issues/?project=1899813&query=40e442d79c22473391aeeeba54c82163",
-}
-`;
diff --git a/frontend/src/lib/components/Errors/error-display.test.ts b/frontend/src/lib/components/Errors/error-display.test.ts
index b2024d1e98b62..aaffd239ed0ea 100644
--- a/frontend/src/lib/components/Errors/error-display.test.ts
+++ b/frontend/src/lib/components/Errors/error-display.test.ts
@@ -48,8 +48,65 @@ describe('Error Display', () => {
             $exception_type: 'Error',
         }
         const result = getExceptionPropertiesFrom(eventProperties)
-        // we don't use all the properties
-        expect(Object.keys(result)).toHaveLength(12)
-        expect(result).toMatchSnapshot()
+        expect(result).toEqual({
+            $active_feature_flags: ['feature1,feature2'],
+            $browser: 'Chrome',
+            $browser_version: '92.0.4515',
+            $exception_message: 'There was an error creating the support ticket with zendesk.',
+            $exception_stack_trace_raw:
+                '[{"colno":220,"filename":"https://app-static-prod.posthog.com/static/chunk-UFQKIDIH.js","function":"submitZendeskTicket","in_app":true,"lineno":25}]',
+            $exception_synthetic: undefined,
+            $exception_type: 'Error',
+            $lib: 'posthog-js',
+            $lib_version: '1.0.0',
+            $level: undefined,
+            $os: 'Windows',
+            $os_version: '10',
+            $sentry_url:
+                'https://sentry.io/organizations/posthog/issues/?project=1899813&query=40e442d79c22473391aeeeba54c82163',
+        })
+    })
+
+    it('can read sentry message', () => {
+        const eventProperties = {
+            'should not be in the': 'result',
+            $browser: 'Chrome',
+            $browser_version: '92.0.4515',
+            $active_feature_flags: ['feature1,feature2'],
+            $lib: 'posthog-js',
+            $lib_version: '1.0.0',
+            $os: 'Windows',
+            $os_version: '10',
+            $sentry_tags: {
+                'PostHog Person URL': 'https://app.posthog.com/person/f6kW3HXaha6dAvHZiOmgrcAXK09682P6nNPxvfjqM9c',
+                'PostHog Recording URL': 'https://app.posthog.com/replay/018dc30d-a8a5-7257-9faf-dcd97c0e19cf?t=2294',
+            },
+            $sentry_exception: undefined,
+            $sentry_url:
+                'https://sentry.io/organizations/posthog/issues/?project=1899813&query=40e442d79c22473391aeeeba54c82163',
+            $sentry_event_id: '40e442d79c22473391aeeeba54c82163',
+            $sentry_exception_type: undefined,
+            $exception_personURL: 'https://app.posthog.com/person/f6kW3HXaha6dAvHZiOmgrcAXK09682P6nNPxvfjqM9c',
+            $exception_type: undefined,
+            $level: 'info',
+            $exception_message: 'the message sent into sentry captureMessage',
+        }
+        const result = getExceptionPropertiesFrom(eventProperties)
+        expect(result).toEqual({
+            $active_feature_flags: ['feature1,feature2'],
+            $browser: 'Chrome',
+            $browser_version: '92.0.4515',
+            $exception_message: 'the message sent into sentry captureMessage',
+            $exception_stack_trace_raw: undefined,
+            $exception_synthetic: undefined,
+            $exception_type: undefined,
+            $lib: 'posthog-js',
+            $lib_version: '1.0.0',
+            $level: 'info',
+            $os: 'Windows',
+            $os_version: '10',
+            $sentry_url:
+                'https://sentry.io/organizations/posthog/issues/?project=1899813&query=40e442d79c22473391aeeeba54c82163',
+        })
     })
 })
diff --git a/frontend/src/loadPostHogJS.tsx b/frontend/src/loadPostHogJS.tsx
index aaa3902d9c95f..f62dbf58e0451 100644
--- a/frontend/src/loadPostHogJS.tsx
+++ b/frontend/src/loadPostHogJS.tsx
@@ -82,7 +82,7 @@ export function loadPostHogJS(): void {
             dsn: window.SENTRY_DSN,
             environment: window.SENTRY_ENVIRONMENT,
             ...(location.host.includes('posthog.com') && {
-                integrations: [new posthog.SentryIntegration(posthog, 'posthog', 1899813)],
+                integrations: [new posthog.SentryIntegration(posthog, 'posthog', 1899813, undefined, '*')],
             }),
         })
     }