suggestProjectCTA.tsx 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. import {Component} from 'react';
  2. import styled from '@emotion/styled';
  3. import {openModal} from 'app/actionCreators/modal';
  4. import {promptsCheck, promptsUpdate} from 'app/actionCreators/prompts';
  5. import {Client} from 'app/api';
  6. import Alert from 'app/components/alert';
  7. import SuggestProjectModal from 'app/components/modals/suggestProjectModal';
  8. import {IconClose} from 'app/icons';
  9. import {tct} from 'app/locale';
  10. import space from 'app/styles/space';
  11. import {Organization, Project} from 'app/types';
  12. import {EntryRequest, Event} from 'app/types/event';
  13. import trackAdvancedAnalyticsEvent from 'app/utils/analytics/trackAdvancedAnalyticsEvent';
  14. import {promptIsDismissed} from 'app/utils/promptIsDismissed';
  15. import withApi from 'app/utils/withApi';
  16. import withProjects from 'app/utils/withProjects';
  17. const MOBILE_PLATFORMS = [
  18. 'react-native',
  19. 'android',
  20. 'cordova',
  21. 'cocoa',
  22. 'cocoa-swift',
  23. 'apple-ios',
  24. 'swift',
  25. 'flutter',
  26. 'xamarin',
  27. 'dotnet-xamarin',
  28. ];
  29. const MOBILE_USER_AGENTS = ['okhttp', 'CFNetwork', 'Alamofire', 'Dalvik'];
  30. type MobileEventResult = {browserName: string; clientOsName: string} | null;
  31. type Props = {
  32. projects: Project[];
  33. event: Event;
  34. organization: Organization;
  35. api: Client;
  36. };
  37. type State = {
  38. isDismissed?: boolean;
  39. loaded?: boolean;
  40. mobileEventResult?: MobileEventResult;
  41. };
  42. class SuggestProjectCTA extends Component<Props, State> {
  43. state: State = {};
  44. componentDidMount() {
  45. this.fetchData();
  46. }
  47. // Returns the matched user agent string
  48. // otherwise, returns an empty string
  49. get matchedUserAgentString() {
  50. const {entries} = this.props.event;
  51. const requestEntry = entries.find(item => item.type === 'request');
  52. if (!requestEntry) {
  53. return '';
  54. }
  55. // find the user agent header out of our list of headers
  56. const userAgent = (requestEntry as EntryRequest)?.data?.headers?.find(
  57. item => item?.[0].toLowerCase() === 'user-agent'
  58. );
  59. if (!userAgent) {
  60. return '';
  61. }
  62. // check if any of our mobile agent headers matches the event mobile agent
  63. return (
  64. MOBILE_USER_AGENTS.find(mobileAgent =>
  65. userAgent[1]?.toLowerCase().includes(mobileAgent.toLowerCase())
  66. ) ?? ''
  67. );
  68. }
  69. // check our projects to see if there is a mobile project
  70. get hasMobileProject() {
  71. return this.props.projects.some(project =>
  72. MOBILE_PLATFORMS.includes(project.platform || '')
  73. );
  74. }
  75. // returns true if the current event is mobile from the user agent
  76. // or if we found a mobile event with the API
  77. get hasMobileEvent() {
  78. const {mobileEventResult} = this.state;
  79. return !!this.matchedUserAgentString || !!mobileEventResult;
  80. }
  81. /**
  82. * conditions to show prompt:
  83. * 1. Have a mobile event
  84. * 2. No mobile project
  85. * 3. CTA is not dimissed
  86. * 4. We've loaded the data from the backend for the prompt
  87. */
  88. get showCTA() {
  89. const {loaded, isDismissed} = this.state;
  90. return !!(this.hasMobileEvent && !this.hasMobileProject && !isDismissed && loaded);
  91. }
  92. async fetchData() {
  93. // no need to catch error since we have error boundary wrapping
  94. const [isDismissed, mobileEventResult] = await Promise.all([
  95. this.checkMobilePrompt(),
  96. this.checkOrgHasMobileEvent(),
  97. ]);
  98. // set the new state
  99. this.setState(
  100. {
  101. isDismissed,
  102. mobileEventResult,
  103. loaded: true,
  104. },
  105. () => {
  106. const matchedUserAgentString = this.matchedUserAgentString;
  107. if (this.showCTA) {
  108. // now record the results
  109. trackAdvancedAnalyticsEvent(
  110. 'growth.show_mobile_prompt_banner',
  111. {
  112. matchedUserAgentString,
  113. mobileEventBrowserName: mobileEventResult?.browserName || '',
  114. mobileEventClientOsName: mobileEventResult?.clientOsName || '',
  115. organization: this.props.organization,
  116. },
  117. {startSession: true}
  118. );
  119. }
  120. }
  121. );
  122. }
  123. async checkOrgHasMobileEvent(): Promise<MobileEventResult> {
  124. const {api, organization} = this.props;
  125. return api.requestPromise(
  126. `/organizations/${organization.slug}/has-mobile-app-events/`,
  127. {
  128. query: {
  129. userAgents: MOBILE_USER_AGENTS,
  130. },
  131. }
  132. );
  133. }
  134. async checkMobilePrompt() {
  135. const {api, organization} = this.props;
  136. // check our prompt backend
  137. const promptData = await promptsCheck(api, {
  138. organizationId: organization.id,
  139. feature: 'suggest_mobile_project',
  140. });
  141. return promptIsDismissed(promptData);
  142. }
  143. handleCTAClose = () => {
  144. const {api, organization} = this.props;
  145. trackAdvancedAnalyticsEvent('growth.dismissed_mobile_prompt_banner', {
  146. matchedUserAgentString: this.matchedUserAgentString,
  147. organization,
  148. });
  149. promptsUpdate(api, {
  150. organizationId: organization.id,
  151. feature: 'suggest_mobile_project',
  152. status: 'dismissed',
  153. });
  154. this.setState({isDismissed: true});
  155. };
  156. openModal = () => {
  157. trackAdvancedAnalyticsEvent('growth.opened_mobile_project_suggest_modal', {
  158. matchedUserAgentString: this.matchedUserAgentString,
  159. organization: this.props.organization,
  160. });
  161. openModal(deps => (
  162. <SuggestProjectModal
  163. organization={this.props.organization}
  164. matchedUserAgentString={this.matchedUserAgentString}
  165. {...deps}
  166. />
  167. ));
  168. };
  169. renderCTA() {
  170. return (
  171. <Alert type="info">
  172. <Content>
  173. <span>
  174. {tct(
  175. 'We have a sneaking suspicion you have a mobile app that doesn’t use Sentry. [link:Start Monitoring]',
  176. {link: <a onClick={this.openModal} />}
  177. )}
  178. </span>
  179. <StyledIconClose onClick={this.handleCTAClose} />
  180. </Content>
  181. </Alert>
  182. );
  183. }
  184. render() {
  185. return this.showCTA ? this.renderCTA() : null;
  186. }
  187. }
  188. export default withApi(withProjects(SuggestProjectCTA));
  189. const Content = styled('div')`
  190. display: grid;
  191. grid-template-columns: 1fr max-content;
  192. grid-gap: ${space(1)};
  193. `;
  194. const StyledIconClose = styled(IconClose)`
  195. margin: auto;
  196. cursor: pointer;
  197. `;