Improve error component copy (#7362)

Author: jonathanawesome

packages/web/app/src/components/error.tsx

@@ -5,6 +5,12 @@ import { Button } from '@/components/ui/button';
 import { captureException, flush } from '@sentry/react';
 import { useRouter } from '@tanstack/react-router';
 
+export const commonErrorStrings = {
+  reported: 'This error was reported automatically to our technical support team.',
+  track: 'To share additional details with us, contact our support team',
+  link: 'here',
+};
+
 export function ErrorComponent(props: { error: any; message?: string }) {
   const router = useRouter();
   const session = useSessionContext();
@@ -39,11 +45,11 @@ export function ErrorComponent(props: { error: any; message?: string }) {
           </h1>
           <div className="mt-2">
             <div className="text-sm">
-              <p>Don't worry, our technical support got this error reported automatically.</p>
+              <p>{commonErrorStrings.reported}</p>
               <p>
-                If you wish to track it later or share more details with us,{' '}
+                {commonErrorStrings.track}{' '}
                 <Button variant="link" className="h-auto p-0 text-orange-500" asChild>
-                  <a href="mailto:support@graphql-hive.com">you can use the support</a>
+                  <a href="mailto:support@graphql-hive.com">{commonErrorStrings.link}</a>
                 </Button>
                 .
               </p>

packages/web/app/src/components/ui/query-error.tsx

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 import cookies from 'js-cookie';
 import { LogOutIcon } from 'lucide-react';
 import { CombinedError } from 'urql';
+import { commonErrorStrings } from '@/components/error';
 import { Button } from '@/components/ui/button';
 import { LAST_VISITED_ORG_KEY } from '@/constants';
 import { Link, useRouter } from '@tanstack/react-router';
@@ -54,18 +55,18 @@ export function QueryError({
               <div className="text-sm">{error.graphQLErrors?.[0].message}</div>
             ) : (
               <div className="text-sm">
-                <p>Don't worry, our technical support got this error reported automatically.</p>
+                <p>{commonErrorStrings.reported}</p>
                 <p>
-                  If you wish to track it later or share more details with us,{' '}
+                  {commonErrorStrings.track}{' '}
                   {organizationSlug ? (
                     <Button variant="link" className="h-auto p-0 text-orange-500" asChild>
                       <Link to="/$organizationSlug/view/support" params={{ organizationSlug }}>
-                        you can use the support
+                        {commonErrorStrings.link}
                       </Link>
                     </Button>
                   ) : (
                     <Button variant="link" className="h-auto p-0 text-orange-500" asChild>
-                      <a href="mailto:support@graphql-hive.com">you can use the support</a>
+                      <a href="mailto:support@graphql-hive.com">{commonErrorStrings.link}</a>
                     </Button>
                   )}
                   .