From 793dc78738f9fff42d855dba0b385b24ee6fe784 Mon Sep 17 00:00:00 2001
From: Matej Minar <matej.minar@sentry.io>
Date: Tue, 2 Feb 2021 12:08:03 +0100
Subject: [PATCH 1/3] feat(ui): Reword javascript crash tooltip, hide abnormal

---
 .../app/components/charts/baseChart.tsx       |  3 ++-
 .../overview/chart/healthChartContainer.tsx   | 11 +++++++++-
 .../app/views/releases/utils/sessionTerm.tsx  | 18 +++++++++--------
 .../views/releases/utils/sessionTerm.spec.tsx | 20 +++++++++----------
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/sentry/static/sentry/app/components/charts/baseChart.tsx b/src/sentry/static/sentry/app/components/charts/baseChart.tsx
index 5722f9170e4812..9b49a567ec1594 100644
--- a/src/sentry/static/sentry/app/components/charts/baseChart.tsx
+++ b/src/sentry/static/sentry/app/components/charts/baseChart.tsx
@@ -508,7 +508,8 @@ const ChartContainer = styled('div')`
     font-size: ${p => p.theme.fontSizeSmall};
     line-height: 1.4;
     font-family: ${p => p.theme.text.family};
-    max-width: 250px;
+    max-width: 230px;
+    min-width: 230px;
     white-space: normal;
     text-align: center;
     :after {
diff --git a/src/sentry/static/sentry/app/views/releases/detail/overview/chart/healthChartContainer.tsx b/src/sentry/static/sentry/app/views/releases/detail/overview/chart/healthChartContainer.tsx
index 488796eeae9f04..3403ff9f68f515 100644
--- a/src/sentry/static/sentry/app/views/releases/detail/overview/chart/healthChartContainer.tsx
+++ b/src/sentry/static/sentry/app/views/releases/detail/overview/chart/healthChartContainer.tsx
@@ -56,6 +56,15 @@ class ReleaseChartContainer extends React.Component<Props, State> {
     const {datetime} = selection;
     const {utc, period, start, end} = datetime;
 
+    const timeseriesData = chartData.filter(({seriesName}) => {
+      // There is no concept of Abnormal sessions in javascript
+      if (seriesName === 'Abnormal' && ['javascript', 'node'].includes(platform)) {
+        return false;
+      }
+
+      return true;
+    });
+
     return (
       <ChartZoom router={router} period={period} utc={utc} start={start} end={end}>
         {zoomRenderProps => {
@@ -71,7 +80,7 @@ class ReleaseChartContainer extends React.Component<Props, State> {
             <TransitionChart loading={loading} reloading={reloading}>
               <TransparentLoadingMask visible={reloading} />
               <HealthChart
-                timeseriesData={chartData}
+                timeseriesData={timeseriesData}
                 zoomRenderProps={zoomRenderProps}
                 reloading={reloading}
                 yAxis={yAxis}
diff --git a/src/sentry/static/sentry/app/views/releases/utils/sessionTerm.tsx b/src/sentry/static/sentry/app/views/releases/utils/sessionTerm.tsx
index 85f7c0ff7a8299..f3be216a7d6bae 100644
--- a/src/sentry/static/sentry/app/views/releases/utils/sessionTerm.tsx
+++ b/src/sentry/static/sentry/app/views/releases/utils/sessionTerm.tsx
@@ -27,8 +27,10 @@ export const sessionTerm = {
 // This should never be used directly (except in tests)
 export const commonTermsDescription = {
   [SessionTerm.CRASHES]: t('Number of sessions with a crashed state'),
-  [SessionTerm.CRASH_FREE_USERS]: t('Number of unique users with non-crashed sessions'),
-  [SessionTerm.CRASH_FREE_SESSIONS]: t('Number of non-crashed sessions'),
+  [SessionTerm.CRASH_FREE_USERS]: t(
+    'Percentage of unique users with non-crashed sessions'
+  ),
+  [SessionTerm.CRASH_FREE_SESSIONS]: t('Percentage of non-crashed sessions'),
   [SessionTerm.STABILITY]: t('Stability is the percentage of crash free sessions.'),
 };
 
@@ -37,7 +39,7 @@ export const mobileTermsDescription = {
   [SessionTerm.CRASHED]: t(
     'The process was terminated due to an unhandled exception or a request to the server that ended with an error'
   ),
-  [SessionTerm.CRASH_FREE_SESSIONS]: t('Number of unique sessions that did not crash'),
+  [SessionTerm.CRASH_FREE_SESSIONS]: t('Percentage of non-crashed sessions'),
   [SessionTerm.ABNORMAL]: t(
     'An unknown session exit. Like due to loss of power or killed by the operating system'
   ),
@@ -110,15 +112,15 @@ function getTermDescriptions(platform: PlatformKey | null) {
       return {
         ...commonTermsDescription,
         [SessionTerm.CRASHED]: t(
-          "During the session an error with mechanism.handled===false occurred calling the 'onerror' on 'unhandledrejection' handler"
+          'During the session an unhandled error occurred that bubbled up to the global handler or the application loading process crashed.'
         ),
-        [SessionTerm.ABNORMAL]: t('Non applicable for Javascript'),
-        [SessionTerm.HEALTHY]: t('No errors were captured during session life-time'),
+        [SessionTerm.ABNORMAL]: t('Non applicable for Javascript.'),
+        [SessionTerm.HEALTHY]: t('No errors were captured during session life-time.'),
         [SessionTerm.ERRORED]: t(
-          'During the session at least one error occurred that did not bubble up to the global handler. The application loading process did not crash'
+          'During the session at least one error occurred that did not bubble up to the global handler. The application loading process did not crash.'
         ),
         [SessionTerm.UNHANDLED]:
-          "An error was captured by the global 'onerror' or 'onunhandledrejection' handler",
+          "An error was captured by the global 'onerror' or 'onunhandledrejection' handler.",
       };
     case 'apple-ios':
     case 'minidump':
diff --git a/tests/js/spec/views/releases/utils/sessionTerm.spec.tsx b/tests/js/spec/views/releases/utils/sessionTerm.spec.tsx
index 686b0e6e5ca281..e44162f972ee54 100644
--- a/tests/js/spec/views/releases/utils/sessionTerm.spec.tsx
+++ b/tests/js/spec/views/releases/utils/sessionTerm.spec.tsx
@@ -488,7 +488,7 @@ describe('Release Health Session Term', function () {
       'node-express'
     );
     expect(crashedSessionTerm).toEqual(
-      "During the session an error with mechanism.handled===false occurred calling the 'onerror' on 'unhandledrejection' handler"
+      'During the session an unhandled error occurred that bubbled up to the global handler or the application loading process crashed.'
     );
 
     // Crash Free Users
@@ -510,7 +510,7 @@ describe('Release Health Session Term', function () {
       SessionTerm.ABNORMAL,
       'node-express'
     );
-    expect(abnormalSessionTerm).toEqual('Non applicable for Javascript');
+    expect(abnormalSessionTerm).toEqual('Non applicable for Javascript.');
 
     // Healthy
     const healthySessionTerm = getSessionTermDescription(
@@ -518,7 +518,7 @@ describe('Release Health Session Term', function () {
       'node-express'
     );
     expect(healthySessionTerm).toEqual(
-      'No errors were captured during session life-time'
+      'No errors were captured during session life-time.'
     );
 
     // Errored
@@ -527,7 +527,7 @@ describe('Release Health Session Term', function () {
       'node-express'
     );
     expect(erroredSessionTerm).toEqual(
-      'During the session at least one error occurred that did not bubble up to the global handler. The application loading process did not crash'
+      'During the session at least one error occurred that did not bubble up to the global handler. The application loading process did not crash.'
     );
 
     // Unhandled
@@ -536,7 +536,7 @@ describe('Release Health Session Term', function () {
       'node-express'
     );
     expect(unhandledSessionTerm).toEqual(
-      "An error was captured by the global 'onerror' or 'onunhandledrejection' handler"
+      "An error was captured by the global 'onerror' or 'onunhandledrejection' handler."
     );
   });
 
@@ -554,7 +554,7 @@ describe('Release Health Session Term', function () {
       'javascript'
     );
     expect(crashedSessionTerm).toEqual(
-      "During the session an error with mechanism.handled===false occurred calling the 'onerror' on 'unhandledrejection' handler"
+      'During the session an unhandled error occurred that bubbled up to the global handler or the application loading process crashed.'
     );
 
     // Crash Free Users
@@ -576,7 +576,7 @@ describe('Release Health Session Term', function () {
       SessionTerm.ABNORMAL,
       'javascript'
     );
-    expect(abnormalSessionTerm).toEqual('Non applicable for Javascript');
+    expect(abnormalSessionTerm).toEqual('Non applicable for Javascript.');
 
     // Healthy
     const healthySessionTerm = getSessionTermDescription(
@@ -584,7 +584,7 @@ describe('Release Health Session Term', function () {
       'javascript'
     );
     expect(healthySessionTerm).toEqual(
-      'No errors were captured during session life-time'
+      'No errors were captured during session life-time.'
     );
 
     // Errored
@@ -593,7 +593,7 @@ describe('Release Health Session Term', function () {
       'javascript'
     );
     expect(erroredSessionTerm).toEqual(
-      'During the session at least one error occurred that did not bubble up to the global handler. The application loading process did not crash'
+      'During the session at least one error occurred that did not bubble up to the global handler. The application loading process did not crash.'
     );
 
     // Unhandled
@@ -602,7 +602,7 @@ describe('Release Health Session Term', function () {
       'javascript'
     );
     expect(unhandledSessionTerm).toEqual(
-      "An error was captured by the global 'onerror' or 'onunhandledrejection' handler"
+      "An error was captured by the global 'onerror' or 'onunhandledrejection' handler."
     );
   });
 

From 2a44ec63b0115ab4c22564208356830e55d59632 Mon Sep 17 00:00:00 2001
From: Matej Minar <matej.minar@sentry.io>
Date: Tue, 2 Feb 2021 16:55:47 +0100
Subject: [PATCH 2/3] feat: Update to new session tracking mechanism

---
 .../sentry/app/views/releases/utils/sessionTerm.tsx       | 4 ++--
 tests/js/spec/views/releases/utils/sessionTerm.spec.tsx   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/sentry/static/sentry/app/views/releases/utils/sessionTerm.tsx b/src/sentry/static/sentry/app/views/releases/utils/sessionTerm.tsx
index f3be216a7d6bae..28cc085370b109 100644
--- a/src/sentry/static/sentry/app/views/releases/utils/sessionTerm.tsx
+++ b/src/sentry/static/sentry/app/views/releases/utils/sessionTerm.tsx
@@ -112,12 +112,12 @@ function getTermDescriptions(platform: PlatformKey | null) {
       return {
         ...commonTermsDescription,
         [SessionTerm.CRASHED]: t(
-          'During the session an unhandled error occurred that bubbled up to the global handler or the application loading process crashed.'
+          'During the session an unhandled global error/promise rejection occurred.'
         ),
         [SessionTerm.ABNORMAL]: t('Non applicable for Javascript.'),
         [SessionTerm.HEALTHY]: t('No errors were captured during session life-time.'),
         [SessionTerm.ERRORED]: t(
-          'During the session at least one error occurred that did not bubble up to the global handler. The application loading process did not crash.'
+          'During the session at least one handled error occurred.'
         ),
         [SessionTerm.UNHANDLED]:
           "An error was captured by the global 'onerror' or 'onunhandledrejection' handler.",
diff --git a/tests/js/spec/views/releases/utils/sessionTerm.spec.tsx b/tests/js/spec/views/releases/utils/sessionTerm.spec.tsx
index e44162f972ee54..b8bb0cb96c351e 100644
--- a/tests/js/spec/views/releases/utils/sessionTerm.spec.tsx
+++ b/tests/js/spec/views/releases/utils/sessionTerm.spec.tsx
@@ -488,7 +488,7 @@ describe('Release Health Session Term', function () {
       'node-express'
     );
     expect(crashedSessionTerm).toEqual(
-      'During the session an unhandled error occurred that bubbled up to the global handler or the application loading process crashed.'
+      'During the session an unhandled global error/promise rejection occurred.'
     );
 
     // Crash Free Users
@@ -527,7 +527,7 @@ describe('Release Health Session Term', function () {
       'node-express'
     );
     expect(erroredSessionTerm).toEqual(
-      'During the session at least one error occurred that did not bubble up to the global handler. The application loading process did not crash.'
+      'During the session at least one handled error occurred.'
     );
 
     // Unhandled
@@ -554,7 +554,7 @@ describe('Release Health Session Term', function () {
       'javascript'
     );
     expect(crashedSessionTerm).toEqual(
-      'During the session an unhandled error occurred that bubbled up to the global handler or the application loading process crashed.'
+      'During the session an unhandled global error/promise rejection occurred.'
     );
 
     // Crash Free Users
@@ -593,7 +593,7 @@ describe('Release Health Session Term', function () {
       'javascript'
     );
     expect(erroredSessionTerm).toEqual(
-      'During the session at least one error occurred that did not bubble up to the global handler. The application loading process did not crash.'
+      'During the session at least one handled error occurred.'
     );
 
     // Unhandled

From abc6111bd60810f37da87f2e465c9a0c907165dc Mon Sep 17 00:00:00 2001
From: Matej Minar <matej.minar@sentry.io>
Date: Tue, 2 Feb 2021 17:14:37 +0100
Subject: [PATCH 3/3] revert chart improvements, they are handled in separate
 PR

---
 .../static/sentry/app/components/charts/baseChart.tsx |  3 +--
 .../detail/overview/chart/healthChartContainer.tsx    | 11 +----------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/sentry/static/sentry/app/components/charts/baseChart.tsx b/src/sentry/static/sentry/app/components/charts/baseChart.tsx
index 9b49a567ec1594..5722f9170e4812 100644
--- a/src/sentry/static/sentry/app/components/charts/baseChart.tsx
+++ b/src/sentry/static/sentry/app/components/charts/baseChart.tsx
@@ -508,8 +508,7 @@ const ChartContainer = styled('div')`
     font-size: ${p => p.theme.fontSizeSmall};
     line-height: 1.4;
     font-family: ${p => p.theme.text.family};
-    max-width: 230px;
-    min-width: 230px;
+    max-width: 250px;
     white-space: normal;
     text-align: center;
     :after {
diff --git a/src/sentry/static/sentry/app/views/releases/detail/overview/chart/healthChartContainer.tsx b/src/sentry/static/sentry/app/views/releases/detail/overview/chart/healthChartContainer.tsx
index 3403ff9f68f515..488796eeae9f04 100644
--- a/src/sentry/static/sentry/app/views/releases/detail/overview/chart/healthChartContainer.tsx
+++ b/src/sentry/static/sentry/app/views/releases/detail/overview/chart/healthChartContainer.tsx
@@ -56,15 +56,6 @@ class ReleaseChartContainer extends React.Component<Props, State> {
     const {datetime} = selection;
     const {utc, period, start, end} = datetime;
 
-    const timeseriesData = chartData.filter(({seriesName}) => {
-      // There is no concept of Abnormal sessions in javascript
-      if (seriesName === 'Abnormal' && ['javascript', 'node'].includes(platform)) {
-        return false;
-      }
-
-      return true;
-    });
-
     return (
       <ChartZoom router={router} period={period} utc={utc} start={start} end={end}>
         {zoomRenderProps => {
@@ -80,7 +71,7 @@ class ReleaseChartContainer extends React.Component<Props, State> {
             <TransitionChart loading={loading} reloading={reloading}>
               <TransparentLoadingMask visible={reloading} />
               <HealthChart
-                timeseriesData={timeseriesData}
+                timeseriesData={chartData}
                 zoomRenderProps={zoomRenderProps}
                 reloading={reloading}
                 yAxis={yAxis}