Browse Source

feat(issue-details): Adds in resources for ChunkLoadError (#60829)

this pr adds in resources for `ChunkLoadErrors`. Is built so that future
errors can be easily added as well. Since all of these will be "errors"
as the IssueType, need to look at the title to figure out what kind of
error it is. Do not merge until we have a real link in for the
resources.

<img width="1158" alt="Screenshot 2023-11-29 at 9 52 40 AM"
src="https://github.com/getsentry/sentry/assets/46740234/2aca4aab-3cd1-4dfb-8bfd-330bf8a55e8c">
Richard Roggenkemper 1 year ago
parent
commit
f903c50ed6

+ 3 - 0
static/app/types/group.tsx

@@ -55,6 +55,9 @@ export enum IssueCategory {
   CRON = 'cron',
   PROFILE = 'profile',
 }
+export enum ErrorType {
+  CHUNK_LOAD_ERROR = 'chunk_load_error',
+}
 
 export enum IssueType {
   // Error

+ 23 - 3
static/app/utils/issueTypeConfig/errorConfig.tsx

@@ -1,6 +1,11 @@
-import {IssueCategoryConfigMapping} from 'sentry/utils/issueTypeConfig/types';
+import {t} from 'sentry/locale';
+import {ErrorType} from 'sentry/types';
+import {
+  IssueCategoryConfigMapping,
+  IssueTypeConfig,
+} from 'sentry/utils/issueTypeConfig/types';
 
-const errorConfig: IssueCategoryConfigMapping = {
+export const errorConfig: IssueCategoryConfigMapping = {
   _categoryDefaults: {
     actions: {
       archiveUntilOccurrence: {enabled: true},
@@ -20,4 +25,19 @@ const errorConfig: IssueCategoryConfigMapping = {
   },
 };
 
-export default errorConfig;
+export const errorTypeConfigMap: Record<ErrorType, Partial<IssueTypeConfig>> = {
+  [ErrorType.CHUNK_LOAD_ERROR]: {
+    resources: {
+      description: t(
+        'ChunkLoadErrors occur when the JavaScript chunks (bundles) that an application is trying to load encounter issues during the loading process. Some common causes are dynamic imports, version mismatching, and code splitting issues. To learn more about how to fix ChunkLoadErrors, check out these resources:'
+      ),
+      links: [
+        {
+          text: t('How to fix ChunkLoadErrors'),
+          link: 'https://sentry.io/answers/chunk-load-errors-javascript/',
+        },
+      ],
+      linksByPlatform: {},
+    },
+  },
+};

+ 17 - 3
static/app/utils/issueTypeConfig/index.tsx

@@ -1,7 +1,7 @@
 import {t} from 'sentry/locale';
-import {IssueCategory, IssueType} from 'sentry/types';
+import {ErrorType, IssueCategory, IssueType} from 'sentry/types';
 import cronConfig from 'sentry/utils/issueTypeConfig/cronConfig';
-import errorConfig from 'sentry/utils/issueTypeConfig/errorConfig';
+import {errorConfig, errorTypeConfigMap} from 'sentry/utils/issueTypeConfig/errorConfig';
 import performanceConfig from 'sentry/utils/issueTypeConfig/performanceConfig';
 import {
   IssueCategoryConfigMapping,
@@ -13,6 +13,7 @@ type Config = Record<IssueCategory, IssueCategoryConfigMapping>;
 type IssueCategoryAndType = {
   issueCategory: IssueCategory;
   issueType?: IssueType;
+  title?: string;
 };
 
 type GetConfigForIssueTypeParams = {eventOccurrenceType: number} | IssueCategoryAndType;
@@ -49,6 +50,16 @@ const issueTypeConfig: Config = {
   [IssueCategory.CRON]: cronConfig,
 };
 
+function getErrorResourceConfig(title: string): Partial<IssueTypeConfig> {
+  let errorTitle = '';
+
+  if (title.includes('ChunkLoadError')) {
+    errorTitle = ErrorType.CHUNK_LOAD_ERROR;
+  }
+  const resource = errorTypeConfigMap[errorTitle];
+  return resource ?? {};
+}
+
 const eventOccurrenceTypeToIssueCategory = (eventOccurrenceType: number) => {
   if (eventOccurrenceType >= 1000) {
     return IssueCategory.PERFORMANCE;
@@ -70,7 +81,7 @@ export const getIssueCategoryAndTypeFromOccurrenceType = (
  * configuration. If not found there, it takes from the base config.
  */
 export const getConfigForIssueType = (params: GetConfigForIssueTypeParams) => {
-  const {issueCategory, issueType} =
+  const {issueCategory, issueType, title} =
     'eventOccurrenceType' in params
       ? getIssueCategoryAndTypeFromOccurrenceType(params.eventOccurrenceType)
       : params;
@@ -83,10 +94,13 @@ export const getConfigForIssueType = (params: GetConfigForIssueTypeParams) => {
 
   const categoryConfig = categoryMap._categoryDefaults;
   const overrideConfig = issueType ? categoryMap[issueType] : {};
+  const errorResourceConfig =
+    issueType === IssueType.ERROR && title ? getErrorResourceConfig(title) : {};
 
   return {
     ...BASE_CONFIG,
     ...categoryConfig,
     ...overrideConfig,
+    ...errorResourceConfig,
   };
 };