feat: basic error handling

DavidRouyer · Sep 28, 2023 · 7a7f02d · 7a7f02d
1 parent 31174ac
commit 7a7f02d
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 13 deletions.
diff --git a/apps/customer-service/src/app/tickets/[id]/error.tsx b/apps/customer-service/src/app/tickets/[id]/error.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { TRPCClientError } from '@trpc/client';
+import { XIcon } from 'lucide-react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from '~/components/ui/button';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  const getError = (error: Error) => {
+    if (error instanceof TRPCClientError) {
+      if (error.message === 'ticket_not_found') {
+        return <FormattedMessage id="errors.ticket_not_found" />;
+      }
+    }
+
+    return <FormattedMessage id="errors.unhandled_error" />;
+  };
+
+  return (
+    <main className="lg:pl-60">
+      <div className="flex items-center justify-center xl:mr-96 xl:h-[100dvh] xl:overflow-y-auto xl:pl-96">
+        <div className="sm:w-full sm:max-w-sm">
+          <div>
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-destructive-foreground">
+              <XIcon className="h-6 w-6 text-destructive" aria-hidden="true" />
+            </div>
+            <div className="mt-3 text-center sm:mt-5">
+              <h3 className="text-base font-semibold leading-6 text-foreground">
+                <FormattedMessage id="error.an_error_occured" />
+              </h3>
+              <div className="mt-2">
+                <p className="text-sm text-muted-foreground">
+                  {getError(error)}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-5 sm:mt-6">
+            <Button type="button" className="w-full" onClick={() => reset()}>
+              <FormattedMessage id="try_again" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/customer-service/src/locales/en.json b/apps/customer-service/src/locales/en.json
@@ -1,4 +1,7 @@
 {
+  "error.an_error_occured": "An error occurred",
+  "errors.ticket_not_found": "Ticket not found",
+  "errors.unhandled_error": "An unhandled error occurred. Please try again later",
   "info_panel.activity": "Activity",
   "info_panel.contact_information": "Contact information",
   "info_panel.recent_conversations": "Recent conversations",
@@ -38,6 +41,7 @@
   "ticket.statuses.resolved": "Resolved",
   "tickets.all_tickets_processed": "All tickets processed!",
   "tickets.no_tickets": "No tickets",
+  "try_again": "Try again",
   "user.email": "Email address",
   "user.phone": "Phone",
   "user.platform": "Platform"

diff --git a/apps/customer-service/src/locales/fr.json b/apps/customer-service/src/locales/fr.json
@@ -1,4 +1,7 @@
 {
+  "error.an_error_occured": "Une erreur s'est produite",
+  "errors.ticket_not_found": "Le ticket n'existe pas",
+  "errors.unhandled_error": "Une erreur inattendue s'est produite. Veuillez réessayer plus tard",
   "info_panel.activity": "Activité",
   "info_panel.contact_information": "Informations de contact",
   "info_panel.recent_conversations": "Conversations récentes",
@@ -39,6 +42,7 @@
   "ticket.statuses.resolved": "Résolu",
   "tickets.all_tickets_processed": "Tous les tickets ont été traités !",
   "tickets.no_tickets": "Aucun ticket",
+  "try_again": "Réessayer",
   "user.email": "Adresse e-mail",
   "user.phone": "Téléphone",
   "user.platform": "Plateforme"

diff --git a/packages/api/src/router/ticket.ts b/packages/api/src/router/ticket.ts
@@ -135,7 +135,7 @@ export const ticketRouter = createTRPCRouter({
       if (!ticket)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket not found',
+          message: 'ticket_not_found',
         });
 
       return ticket;
@@ -163,13 +163,13 @@ export const ticketRouter = createTRPCRouter({
       if (!ticket)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket not found',
+          message: 'ticket_not_found',
         });
 
       if (ticket.assignedToId)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket is already assigned',
+          message: 'ticket_already_assigned',
         });
 
       return await ctx.db.transaction(async (tx) => {
@@ -213,19 +213,19 @@ export const ticketRouter = createTRPCRouter({
       if (!ticket)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket not found',
+          message: 'ticket_not_found',
         });
 
       if (!ticket.assignedToId)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket is not assigned to anybody',
+          message: 'ticket_not_assigned',
         });
 
       if (ticket.assignedToId === input.contactId)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket is already assigned to the contact',
+          message: 'ticket_already_assigned_to_contact',
         });
 
       return await ctx.db.transaction(async (tx) => {
@@ -270,13 +270,13 @@ export const ticketRouter = createTRPCRouter({
       if (!ticket)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket not found',
+          message: 'ticket_not_found',
         });
 
-      if (ticket.assignedToId === null)
+      if (!ticket.assignedToId)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket is already assigned to nobody',
+          message: 'ticket_not_assigned',
         });
 
       return await ctx.db.transaction(async (tx) => {
@@ -320,13 +320,13 @@ export const ticketRouter = createTRPCRouter({
       if (!ticket)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket not found',
+          message: 'ticket_not_found',
         });
 
       if (ticket.status === TicketStatus.Resolved)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket is already resolved',
+          message: 'ticket_already_resolved',
         });
 
       return await ctx.db.transaction(async (tx) => {
@@ -368,13 +368,13 @@ export const ticketRouter = createTRPCRouter({
       if (!ticket)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket not found',
+          message: 'ticket_not_found',
         });
 
       if (ticket.status === TicketStatus.Open)
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: 'Ticket is already reopened',
+          message: 'ticket_already_opened',
         });
 
       return await ctx.db.transaction(async (tx) => {