Handle safely a missing router query param on first render (#4352)

.eslintrc.cjs

@@ -119,9 +119,10 @@ module.exports = {
           },
         ],
         '@typescript-eslint/no-floating-promises': 'error',
-        '@typescript-eslint/no-unnecessary-type-assertion': 'error',
         ...rulesToExtends,
         'no-restricted-syntax': ['error', ...HIVE_RESTRICTED_SYNTAX, ...RESTRICTED_SYNTAX],
+        'prefer-destructuring': 'off',
+        '@typescript-eslint/no-unnecessary-type-assertion': 'off',
 
         // 🚨 The following rules needs to be fixed and was temporarily disabled to avoid printing warning
         '@typescript-eslint/no-explicit-any': 'off',
@@ -162,6 +163,7 @@ module.exports = {
         'jsx-a11y/anchor-is-valid': ['off', { components: ['Link', 'NextLink'] }],
         'jsx-a11y/alt-text': ['warn', { elements: ['img'], img: ['Image', 'NextImage'] }],
         'no-restricted-syntax': ['error', ...HIVE_RESTRICTED_SYNTAX, ...REACT_RESTRICTED_SYNTAX],
+        'prefer-destructuring': 'off',
         // TODO: enable below rules👇
         'no-console': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',

packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/[operationName]/[operationHash].tsx

@@ -244,16 +244,16 @@ function OperationInsightsContent({
   );
 }
 
-function OperationInsightsPage(): ReactElement {
+function OperationInsightsPage() {
   const router = useRouter();
   const { operationHash, operationName } = router.query;
 
   if (!operationHash || typeof operationHash !== 'string') {
-    throw new Error('Invalid operation hash');
+    return null;
   }
 
   if (!operationName || typeof operationName !== 'string') {
-    throw new Error('Invalid operation name');
+    return null;
   }
 
   return (

packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/client/[name].tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { differenceInMilliseconds } from 'date-fns';
@@ -425,12 +425,12 @@ function ClientInsightsPageContent({ clientName }: { clientName: string }) {
   );
 }
 
-function ClientInsightsPage(): ReactElement {
+function ClientInsightsPage() {
   const router = useRouter();
   const { name } = router.query;
 
   if (!name || typeof name !== 'string') {
-    throw new Error('Invalid client name');
+    return null;
   }
 
   return (

packages/web/app/pages/[organizationId]/[projectId]/[targetId]/insights/schema-coordinate/[coordinate].tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { differenceInMilliseconds } from 'date-fns';
@@ -479,12 +479,12 @@ function TargetSchemaCoordinatePageContent({ coordinate }: { coordinate: string
   );
 }
 
-function SchemaCoordinatePage(): ReactElement {
+function SchemaCoordinatePage() {
   const router = useRouter();
   const { coordinate } = router.query;
 
   if (!coordinate || typeof coordinate !== 'string') {
-    throw new Error('Invalid coordinate');
+    return null;
   }
 
   return (

packages/web/app/pages/[organizationId]/view/support/[ticketId].tsx

@@ -302,14 +302,13 @@ const SupportTicketPageQuery = graphql(`
   }
 `);
 
-function SupportTicketPageContent() {
-  const router = useRouteSelector();
-  const ticketId = router.query.ticketId as string;
+function SupportTicketPageContent(props: { ticketId: string; organizationId: string }) {
+  const ticketId = props.ticketId as string;
   const [query, refetchQuery] = useQuery({
     query: SupportTicketPageQuery,
     variables: {
       selector: {
-        organization: router.organizationId,
+        organization: props.organizationId,
       },
       ticketId,
     },
@@ -355,12 +354,16 @@ function SupportTicketPageContent() {
 
 function SupportTicketPage() {
   const router = useRouteSelector();
-  const ticketId = router.query.ticketId as string;
+  const ticketId = router.query.ticketId;
+
+  if (!ticketId || typeof ticketId !== 'string') {
+    return null;
+  }
 
   return (
     <>
       <MetaTitle title={`Support Ticket #${ticketId}`} />
-      <SupportTicketPageContent />
+      <SupportTicketPageContent organizationId={router.organizationId} ticketId={ticketId} />
     </>
   );
 }