utils.tsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. import {t} from 'sentry/locale';
  2. import {
  3. BreadcrumbLevelType,
  4. BreadcrumbType,
  5. Crumb,
  6. RawCrumb,
  7. } from 'sentry/types/breadcrumbs';
  8. import {EntryType, Event} from 'sentry/types/event';
  9. import {defined} from 'sentry/utils';
  10. export function convertCrumbType(breadcrumb: RawCrumb): RawCrumb {
  11. if (breadcrumb.type === BreadcrumbType.EXCEPTION) {
  12. return {
  13. ...breadcrumb,
  14. type: BreadcrumbType.ERROR,
  15. };
  16. }
  17. // special case for 'ui.' and `sentry.` category breadcrumbs
  18. // TODO: find a better way to customize UI around non-schema data
  19. if (breadcrumb.type === BreadcrumbType.DEFAULT && defined(breadcrumb?.category)) {
  20. const [category, subcategory] = breadcrumb.category.split('.');
  21. if (category === 'ui') {
  22. return {
  23. ...breadcrumb,
  24. type: BreadcrumbType.UI,
  25. };
  26. }
  27. if (category === 'console') {
  28. return {
  29. ...breadcrumb,
  30. type: BreadcrumbType.DEBUG,
  31. };
  32. }
  33. if (category === 'navigation') {
  34. return {
  35. ...breadcrumb,
  36. type: BreadcrumbType.NAVIGATION,
  37. };
  38. }
  39. if (
  40. category === 'sentry' &&
  41. (subcategory === 'transaction' || subcategory === 'event')
  42. ) {
  43. return {
  44. ...breadcrumb,
  45. type: BreadcrumbType.TRANSACTION,
  46. };
  47. }
  48. }
  49. if (!Object.values(BreadcrumbType).includes(breadcrumb.type)) {
  50. return {
  51. ...breadcrumb,
  52. type: BreadcrumbType.DEFAULT,
  53. };
  54. }
  55. return breadcrumb;
  56. }
  57. function getCrumbDescriptionAndColor(
  58. type: BreadcrumbType
  59. ): Pick<Crumb, 'color' | 'description'> {
  60. switch (type) {
  61. case BreadcrumbType.USER:
  62. case BreadcrumbType.UI:
  63. return {
  64. color: 'purple300',
  65. description: t('User Action'),
  66. };
  67. case BreadcrumbType.NAVIGATION:
  68. return {
  69. color: 'green300',
  70. description: t('Navigation'),
  71. };
  72. case BreadcrumbType.DEBUG:
  73. return {
  74. color: 'purple300',
  75. description: t('Debug'),
  76. };
  77. case BreadcrumbType.INFO:
  78. return {
  79. color: 'blue300',
  80. description: t('Info'),
  81. };
  82. case BreadcrumbType.ERROR:
  83. return {
  84. color: 'red300',
  85. description: t('Error'),
  86. };
  87. case BreadcrumbType.HTTP:
  88. return {
  89. color: 'green300',
  90. description: t('HTTP request'),
  91. };
  92. case BreadcrumbType.WARNING:
  93. return {
  94. color: 'yellow300',
  95. description: t('Warning'),
  96. };
  97. case BreadcrumbType.QUERY:
  98. return {
  99. color: 'blue300',
  100. description: t('Query'),
  101. };
  102. case BreadcrumbType.SYSTEM:
  103. return {
  104. color: 'pink300',
  105. description: t('System'),
  106. };
  107. case BreadcrumbType.SESSION:
  108. return {
  109. color: 'pink300',
  110. description: t('Session'),
  111. };
  112. case BreadcrumbType.TRANSACTION:
  113. return {
  114. color: 'pink300',
  115. description: t('Transaction'),
  116. };
  117. default:
  118. return {
  119. color: 'gray300',
  120. description: t('Default'),
  121. };
  122. }
  123. }
  124. export function transformCrumbs(breadcrumbs: Array<RawCrumb>): Crumb[] {
  125. return breadcrumbs.map((breadcrumb, index) => {
  126. const convertedCrumbType = convertCrumbType(breadcrumb);
  127. const {color, description} = getCrumbDescriptionAndColor(convertedCrumbType.type);
  128. return {
  129. ...convertedCrumbType,
  130. id: index,
  131. color,
  132. description,
  133. level: convertedCrumbType.level ?? BreadcrumbLevelType.UNDEFINED,
  134. };
  135. });
  136. }
  137. function moduleToCategory(module: string | null | undefined) {
  138. if (!module) {
  139. return undefined;
  140. }
  141. const match = module.match(/^.*\/(.*?)(:\d+)/);
  142. if (!match) {
  143. return module.split(/./)[0];
  144. }
  145. return match[1];
  146. }
  147. export function getVirtualCrumb(event: Event): RawCrumb | undefined {
  148. const exception = event.entries.find(entry => entry.type === EntryType.EXCEPTION);
  149. if (!exception && !event.message) {
  150. return undefined;
  151. }
  152. const timestamp = event.dateCreated;
  153. if (exception) {
  154. const {type, value, module: mdl} = exception.data.values[0];
  155. return {
  156. type: BreadcrumbType.ERROR,
  157. level: BreadcrumbLevelType.ERROR,
  158. category: moduleToCategory(mdl) || 'exception',
  159. data: {
  160. type,
  161. value,
  162. },
  163. timestamp,
  164. };
  165. }
  166. const levelTag = (event.tags || []).find(tag => tag.key === 'level');
  167. return {
  168. type: BreadcrumbType.INFO,
  169. level: (levelTag?.value as BreadcrumbLevelType) || BreadcrumbLevelType.UNDEFINED,
  170. category: 'message',
  171. message: event.message,
  172. timestamp,
  173. };
  174. }