[{"1":2,"51":-5,"52":-5},"loaderData",{"3":4,"19":20,"50":-5},"root",{"5":6},"footer",{"7":8,"13":14,"15":16},"metadata",{"9":10,"11":12},"slug","me/footer","filepath","/home/runner/work/zenobi.us/zenobi.us/pkgs/content/data/me/footer.mdx","title","Footer","content",{"17":18},"compiled","var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),M=(t,n)=>{for(var e in n)r(t,e,{get:n[e],enumerable:!0})},i=(t,n,e,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of p(n))!d.call(t,o)&&o!==e&&r(t,o,{get:()=>n[o],enumerable:!(s=l(n,o))||s.enumerable});return t};var h=(t,n,e)=>(e=t!=null?f(_(t)):{},i(n||!t||!t.__esModule?r(e,\"default\",{value:t,enumerable:!0}):e,t)),C=t=>i(r({},\"__esModule\",{value:!0}),t);var m=j((g,u)=>{u.exports=_jsx_runtime});var X={};M(X,{default:()=>x,frontmatter:()=>D});var c=h(m()),D={title:\"Footer\"};function a(t){let n={p:\"p\",...t.components};return(0,c.jsx)(n.p,{children:\"I'm Zenobius, A fullstack engineer.\"})}function x(t={}){let{wrapper:n}=t.components||{};return n?(0,c.jsx)(n,{...t,children:(0,c.jsx)(a,{...t})}):a(t)}return C(X);})();\n;return Component;","routes/b.tags.$tag._index",{"21":22,"40":41},"posts",[23],{"7":24,"27":28,"13":29,"30":31,"32":33,"34":35,"15":38},{"9":25,"11":26},"2024-01-22-api-errors-in-your-ui","/home/runner/work/zenobi.us/zenobi.us/pkgs/content/data/posts/2024-01-22-api-errors-in-your-ui.md","template","article","API Errors in Your UI","date","2024-01-22T00:00:00.000Z","stage","published","tags",[36,37],"api","error-handling",{"17":39},"var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),m=(l,e)=>{for(var r in e)s(l,r,{get:e[r],enumerable:!0})},t=(l,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of F(e))!g.call(l,a)&&a!==r&&s(l,a,{get:()=>e[a],enumerable:!(o=y(e,a))||o.enumerable});return l};var f=(l,e,r)=>(r=l!=null?p(A(l)):{},t(e||!l||!l.__esModule?s(r,\"default\",{value:l,enumerable:!0}):r,l)),B=l=>t(s({},\"__esModule\",{value:!0}),l);var c=u((T,i)=>{i.exports=_jsx_runtime});var w={};m(w,{default:()=>h,frontmatter:()=>b});var n=f(c()),b={template:\"article\",title:\"API Errors in Your UI\",date:\"2024-01-22\",stage:\"published\",tags:[\"api\",\"error-handling\"]};function d(l){let e={blockquote:\"blockquote\",code:\"code\",figcaption:\"figcaption\",figure:\"figure\",h2:\"h2\",h3:\"h3\",li:\"li\",p:\"p\",pre:\"pre\",section:\"section\",span:\"span\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Unpopular opinion: you shouldn't send error messages from your API to your UI.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Instead you should be sending error codes\"}),`\n`,(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h2,{id:\"tl-dr\",children:\"tl;dr\"}),(0,n.jsxs)(e.figure,{\"data-rehype-pretty-code-figure\":\"\",children:[(0,n.jsx)(e.figcaption,{\"data-rehype-pretty-code-title\":\"\",\"data-language\":\"ts\",\"data-theme\":\"vesper\",children:\"api/errors.ts\"}),(0,n.jsx)(e.pre,{tabIndex:\"0\",\"data-language\":\"ts\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(e.code,{\"data-language\":\"ts\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\"/**\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * This could quite easily be something generated by the backend and\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * consumed by the frontend.\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" *\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * It doesn't have to have these types of values, but it's a nice way to\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * guide your consuming developers to more in depth documentation about\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * the error.\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" */\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"export\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" const\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" MyApiErrorCode \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" NETWORK_ERROR: \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\"'https://myapi.com/errors/NETWORK_ERROR'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" USER_NOT_FOUND: \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\"'https://myapi.com/errors/USER_NOT_FOUND'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" USER_NOT_AUTHORIZED: \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\"'https://myapi.com/errors/USER_NOT_AUTHORIZED'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"} \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"as\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" const\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\";\"})]})]})})]}),(0,n.jsxs)(e.figure,{\"data-rehype-pretty-code-figure\":\"\",children:[(0,n.jsx)(e.figcaption,{\"data-rehype-pretty-code-title\":\"\",\"data-language\":\"ts\",\"data-theme\":\"vesper\",children:\"api/types.ts\"}),(0,n.jsx)(e.pre,{tabIndex:\"0\",\"data-language\":\"ts\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(e.code,{\"data-language\":\"ts\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"import\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" type\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" { MyApiErrorCode } \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"from\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\" './errors'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"export\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" type\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" MyApiBaseResponsePayload\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"<\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"T\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"> \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" /* Programatic business logic error code */\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" code\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" keyof\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" typeof\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" ApiErrorCode;\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" /* A message to consuming developers which should include a url to more information. */\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" message\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" typeof\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" ApiErrorCode[keyof \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"typeof\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" ApiErrorCode];\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" /* any data */\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" data\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" T\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"};\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"export\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" type\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" HttpResponse\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"<\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"T\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"> \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" status\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" HTTPStatusCode\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" data\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" MyApiBaseResponsePayload\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"<\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"T\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\">;\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" ...\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})]})]}),`\n`,(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h2,{id:\"why-is-this-even-a-thing\",children:\"Why is this even a thing\"}),(0,n.jsx)(e.p,{children:\"Everyone does it. It's easy. It's fast. It's convenient. It's a bad idea. It doesn't scale.\"}),(0,n.jsx)(e.p,{children:\"Most teams that end up in these scenarios get there by way of several origin stories\"}),(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"They had a monolith that pulled values out of the db and rendered html on the server.\"}),`\n`,(0,n.jsx)(e.li,{children:\"They made the backend-for-frontend api. An api that exists for the sole purpose of separating the backend from the frontend, different repo, directory...whatever.\"}),`\n`,(0,n.jsx)(e.li,{children:\"They simply don't have experience with building apis for disparate clients.\"}),`\n`]}),(0,n.jsx)(e.p,{children:\"This is ok if it's only ever going to be a single app (but they rarely do).\"}),(0,n.jsx)(e.p,{children:\"If you know that you're going to have multiple apps, on multiple platforms, then you need to start thinking about how you're going to handle errors.\"})]}),`\n`,(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h2,{id:\"no-why-am-i-bringing-this-up\",children:\"No why am I bringing this up?\"}),(0,n.jsx)(e.p,{children:\"I've worked on many teams that all seem to make some excuse for why they're sending error messages from the api to the ui.\"}),(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"it's easier\"}),`\n`]}),(0,n.jsx)(e.p,{children:\"Until, your design team who don't really know anything about the api, want to change the error message or the behaviour that results from the error message.\"}),(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"this endpoint is only used by one app\"}),`\n`]}),(0,n.jsx)(e.p,{children:\"Until it's not... when you need to add another app with different user flows.\"}),(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"We'll just change the error message.\"}),`\n`]}),(0,n.jsx)(e.p,{children:\"What if the error message needs to have links in it? It's good UX to help the user take a good action on the error. A mobile app has completely different mechanics about linking to other screens than a web app.\"})]}),`\n`,(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h2,{id:\"multiple-apps\",children:\"Multiple Apps\"}),(0,n.jsx)(e.p,{children:\"Lets add a couple of apps. On different platforms.\"}),(0,n.jsx)(e.p,{children:\"Does the api error message make sense in the context of a mobile app? What about a desktop app? What about a CLI app?\"}),(0,n.jsx)(e.p,{children:\"Or maybe you don't want to even show a message, but need perform some kind of logic branching based on the error.\"}),(0,n.jsx)(e.p,{children:\"Arguably, these error messages should be the domain of the UX and UI teams making the frontends.\"})]}),`\n`,(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h2,{id:\"how-can-it-be-improved\",children:\"How can it be improved\"}),(0,n.jsx)(e.p,{children:\"Part of the challenge is understanding that your API is a product. It's a product that is consumed by other products.\"}),(0,n.jsx)(e.p,{children:\"Once you move yourself into that mindset, you can start to think about how you can make your API more robust and scalable.\"}),(0,n.jsx)(e.p,{children:\"Each endpoint, resolver, field etc. Serve to provide answers to focused questions, response to operations, or data to be consumed. Each certainly having requirements that needs to be met in order to be successful.\"}),(0,n.jsx)(e.p,{children:\"Some ideas I've pondered on:\"}),(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Use a framework that generates your api documentation and produces artifacts for other projects to consume. It could be types, a schema, or even a client library. The error codes can be baked into the documentation and artifacts.\"}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Return machine readble error codes in CONSTANT_CASE. perhaps you have a type system that allows for ensuring each code is unique across the codebase?\"}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Next to each response code, have a link to a page that describes the error in detail. This page can be consumed by the documentation generator and used to produce the artifacts.\"}),`\n`]}),`\n`]}),(0,n.jsx)(e.p,{children:\"Which one looks more robust and scalable?\"}),(0,n.jsx)(e.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(e.pre,{tabIndex:\"0\",\"data-language\":\"ts\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(e.code,{\"data-language\":\"ts\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"try\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" const\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" response \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" await\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" fetch\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"(\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\"'/api/users'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\");\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" const\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" data \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" await\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" response.\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"json\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"();\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"} \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"catch\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (error) {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (error.message \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"===\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\" 'Failed to fetch'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\") {\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" // show a message to the user\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" } \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"else\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (error.message \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"===\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\" 'User not found'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\") {\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" // show a message to the user\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" } \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"else\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (error.message \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"===\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\" 'User not authorized'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\") {\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" // show a message to the user\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" } \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"else\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" // show a message to the user\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" }\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})}),(0,n.jsx)(e.p,{children:\"or\"}),(0,n.jsx)(e.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(e.pre,{tabIndex:\"0\",\"data-language\":\"ts\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(e.code,{\"data-language\":\"ts\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"try\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" const\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" response \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" await\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" fetch\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"(\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\"'/api/users'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\");\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" const\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" data \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" await\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" response.\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"json\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"();\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"} \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"catch\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (error) {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (error.code \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"===\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\" 'NETWORK_ERROR'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\") {\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" // show a message to the user\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" } \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"else\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (error.code \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"===\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\" 'USER_NOT_FOUND'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\") {\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" // show a message to the user\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" } \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"else\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (error.code \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"===\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:\" 'USER_NOT_AUTHORIZED'\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\") {\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" // show a message to the user\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" } \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"else\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" // show a message to the user\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" }\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})}),(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h3,{id:\"things-that-can-go-wrong-with-error-messages\",children:\"Things that can go wrong with error messages\"}),(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"language and grammar: Too long. Too vague. Has spelling or grammar mistakes.\"}),`\n`]}),(0,n.jsx)(e.p,{children:\"These kinds of problems are hard to catch in code reviews, automated tests and manual testing; and when someone eventually notices it, it's a pain to fix.\"}),(0,n.jsxs)(e.p,{children:[\"You just know that there's some \",(0,n.jsx)(e.code,{children:\"error.match(/not found/i)\"}),\" somewhere in the frontend.\"]}),(0,n.jsx)(e.p,{children:\"Sure, there's a certain amount that can be found with spellcheck tools, but consider the following:\"}),(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"spelling mistakes in error messages, or\"}),`\n`,(0,n.jsx)(e.li,{children:\"spelling mistakes in variable names that end user never sees.\"}),`\n`]}),(0,n.jsx)(e.p,{children:\"You'll either end up drowning in linting error fatigue or you'll waste time fussing about the spelling of a variable name.\"}),(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Problems with tone: Too formal. Too casual. Too technical. Too friendly. Too impersonal.\"}),`\n`]}),(0,n.jsx)(e.p,{children:\"Usually happens when there's no design language producd or socialised by the UX teams.\"}),(0,n.jsx)(e.p,{children:\"This artifact should put everyone on the same page as to how the user interface, the phone calls, etc should communicate to the customers.\"}),(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"Problems with context: Assumptions about platform lead to mechanics that are confusing on other platforms.\"}),`\n`]}),(0,n.jsx)(e.p,{children:\"This is a big one. It's easy to assume that the error message will be displayed in a web browser. But what if it's a mobile app? What if it's a CLI app? What if it's a desktop app?\"}),(0,n.jsxs)(e.p,{children:[\"React Native doesn't use \",(0,n.jsx)(e.code,{children:''}),\" to link to other screens. It often refers to other screens by name using a custom React component.\"]})]}),(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h3,{id:\"how-to-address-user-facing-error-messages\",children:\"How to address user facing error messages\"}),(0,n.jsx)(e.p,{children:\"So in summary, user facing error messages are part of the user experience and as such, are each unique individual problems to solve.\"}),(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"It's a UX and design problem to solve, not an engineering problem.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Lean on the error codes. They're the domain of the engineering team.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Each point in a users journey will likely benefit from different ways to explain the same kind of error code.\"}),`\n`]}),(0,n.jsxs)(e.figure,{\"data-rehype-pretty-code-figure\":\"\",children:[(0,n.jsx)(e.figcaption,{\"data-rehype-pretty-code-title\":\"\",\"data-language\":\"tsx\",\"data-theme\":\"vesper\",children:\"components/MyComponentDataLayer.tsx\"}),(0,n.jsx)(e.pre,{tabIndex:\"0\",\"data-language\":\"tsx\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(e.code,{\"data-language\":\"tsx\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"function\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" MyComponentDataLayer\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"({ thingId }\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" { thingId\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"?:\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" string\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" }) {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" const\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" getThingDetailQuery \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\" useGetThingDetailQuery\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"({\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" thingId,\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" skip: \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"!\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"thingId,\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" });\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" /** don't bother rendering if we haven't started the query */\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"!\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"getThingDetailQuery.intiated) {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" return\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" null;\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" }\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (getThingDetailQuery.loading) {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" return\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"Loading\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" label=\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"Loading thing...\"'}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" />\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" }\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:\" \"}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" /**\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * we want to capture this specific error state and provide a\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * unique UI experience.\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" */\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (getThingDetailQuery.code \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"===\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" MyApiErrorCode.THING_NOT_FOUND) {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" return\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"EmptyState\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\">\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"Stack\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" gap=\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"medium\"'}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\">\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" {\"}),(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\"/**\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * This text has been approved by the UX research team.\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * http://figma.com/jklngsdfi78?page=123\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" */\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"p\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\">\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"Sorry, we couldn't find the thing you were looking for.\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"p\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\">\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"Maybe it was deleted?\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"Button\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" onClick={\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"onCreateNewThingClick\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" label=\"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"Create a new thing\"'})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" />\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" );\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",\"data-highlighted-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" }\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" /**\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" * Other errors, we'll just show a generic error state.\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#8B8B8B94\"},children:\" */\"})}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" if\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (getThingDetailQuery.code \"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"!==\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" MyApiErrorCode.THING_FOUND) {\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" return\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" (\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"EmptyState\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" image={\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"ErrorIllustrationMedium\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"}>\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"ErrorState\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" code={\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"getThingDetailQuery.code\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"}\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" />\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" );\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\" }\"})}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" return\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(e.span,{style:{color:\"#FFC799\"},children:\"ThingDetail\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" thing={\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"getThingDetailQuery.data\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\"}\"}),(0,n.jsx)(e.span,{style:{color:\"#A0A0A0\"},children:\" />\"}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})]})]})]})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(d,{...l})}):d(l)}return B(w);})();\n;return Component;","siteData",{"7":42,"13":45,"46":47,"15":48},{"9":43,"11":44},"sitedata/main","/home/runner/work/zenobi.us/zenobi.us/pkgs/content/data/sitedata/main.md","Zenobius","description","A product focused fullstack engineer based in Australia.",{"17":49},"var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},i=(t,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of l(e))!_.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=x(e,o))||s.enumerable});return t};var M=(t,e,n)=>(n=t!=null?m(p(t)):{},i(e||!t||!t.__esModule?a(n,\"default\",{value:t,enumerable:!0}):n,t)),b=t=>i(a({},\"__esModule\",{value:!0}),t);var c=g((F,u)=>{u.exports=_jsx_runtime});var C={};j(C,{default:()=>f,frontmatter:()=>A});var r=M(c()),A={title:\"Zenobius\",description:\"A product focused fullstack engineer based in Australia.\"};function d(t){return(0,r.jsx)(r.Fragment,{})}function f(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(d,{...t})}):d(t)}return b(C);})();\n;return Component;","routes/b","actionData","errors"]