ImportanceOfStatusCode.razor

@page "/blogs/webapi-importance-of-status-code"
@inherits FragmentNavigationBase
@inject TableOfContents tableOfContents

<Content Description=@Description
         Slug=@Slug
         PosterPath=@PosterPath
         Channel="@Channel"
         ContentType="@ContentType"
         TotalContents=@TotalContents
         Type="WebAPI"
         FileName=@nameof(ImportanceOfStatusCode)>
    <ContentBody>
        <p>
            In this article, let's learn about importance of status code in Web API.
        </p>

        <h3 class="[ font-semibold text-lg ]">Table of Contents</h3>

        <ol class="[ list-decimal ] [ ml-4 ]">
            <li>
                <NavLink class="[ underline ]" href="@($"blogs/{Slug}#what-is-http-status-code")" Match="NavLinkMatch.All">
                    What is HTTP Status Code?
                </NavLink>
            </li>
            <li>
                <NavLink class="[ underline ]" href="@($"blogs/{Slug}#why-do-we-need-http-status-code")" Match="NavLinkMatch.All">
                    Why do we need HTTP Status Code?
                </NavLink>
            </li>
            <li>
                <NavLink class="[ underline ]" href="@($"blogs/{Slug}#common-mistakes")" Match="NavLinkMatch.All">
                    Common Mistakes !!
                </NavLink>
            </li>
            <li>
                <NavLink class="[ underline ]" href="@($"blogs/{Slug}#summary")" Match="NavLinkMatch.All">
                    Summary
                </NavLink>
            </li>
        </ol>

        <h3 id="what-is-http-status-code" class="[ font-semibold text-lg ]">What is HTTP Status Code?</h3>

        <p>
            (<abbr title="Hyper Text Transfer Protocol">HTTP</abbr>) Status code is issued by a server in response to a client's request made to server.The first digit of the status code 
            defines the class of response, while the last two digits do not have any classifying or categorization role.HTTP status codes are especially important for Search Engine 
            Optimization (SEO.) They provide direct information on the health of a website and help pinpoint possible problems with requested content.
        </p>

        <h3 id="why-do-we-need-http-status-code" class="[ font-semibold text-lg ]">Why do we need HTTP Status Code?</h3>

        <ul class="[ list-disc ] [ ml-4 ]">
            <li>Whether the request worked out as expected</li>
            <li>What is responsible for failed request</li>
        </ul>

        <GoogleAdSense Type="GoogleAdSenseAdType.InArticle" Format="GoogleAdSenseAdFormat.Fluid" Style="text-align:center;" Slot="3914293965"></GoogleAdSense>

        <h3 id="common-mistakes" class="[ font-semibold text-lg ]">Common Mistakes !!</h3>

        <ul class="[ list-disc ] [ ml-4 ]">
            <li>Don't send back 200 Ok when something is wrong</li>
            <li>Don't send back 500 InternalServerError when the client makes a mistake</li>
        </ul>

        <p>
            There are different levels of status code. Let's look at the most commonly used one's in web API.
        </p>

        <table class="[ table-fixed border-collapse ] [ bg-white ] [ border-2 ] [ dark:bg-black dark:border-slate-500 ]">
            <thead>
                <tr class="[ bg-gray-100 ] [ dark:bg-slate-500 ]">
                    <th class="[ border-2 ] [ dark:border-slate-600 ] [ p-2 ]">Level</th>
                    <th class="[ border-2 ] [ dark:border-slate-600 ] [ p-2 ]">Description</th>
                    <th class="[ border-2 ] [ dark:border-slate-600 ] [ p-2 ]">Usage</th>
                </tr>
            </thead>
            <tbody>
                <tr class="[ bg-yellow-100 ] [ dark:bg-yellow-600 ]">
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">1xx</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Informational ⚠️</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">I haven't used this so far in my API's</td>
                </tr>
                <tr class="[ bg-green-100 ] [ dark:bg-green-600 ]">
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">2xx</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Success ✅</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">This can be used in GET, POST, PUT, PATCH and DELETE endpoints</td>
                </tr>
                <tr>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">200</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Success</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Ok() - Get Request</td>
                </tr>
                <tr>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">201</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Created</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Created() - Post Request</td>
                </tr>
                <tr>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">204</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">No Content</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">NoContent() - Put / Patch / Delete Request</td>
                </tr>
                <tr class="[ bg-fuchsia-100 ] [ dark:bg-fuchsia-600 ]">
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">3xx</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Redirects 🔃</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">I haven't used this so far in my API's. But noticed this in browser network tab when redirect happens from http to https</td>
                </tr>
                <tr class="[ bg-blue-100 ] [ dark:bg-blue-600 ]">
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">4xx</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Client Mistake ❌</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">This can be used to indicate the mistakes made by consumer of the API</td>
                </tr>
                <tr>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">400</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Bad Request</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">BadRequest() - Wrong data input by client</td>
                </tr>
                <tr>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">401</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Not Authenticated</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Unauthorized() - Not signed in</td>
                </tr>
                <tr>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">403</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Not Authorized</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Forbid() - Signed in but dont have permission</td>
                </tr>
                <tr>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">404</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Not Found</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">NotFound() - Resource not found</td>
                </tr>
                <tr>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">409</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Conflict</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Conflict() - Error on simultaneous update</td>
                </tr>
                <tr>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">422</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Unprocessable Entity</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">UnprocessableEntity() - Error on data validation failures</td>
                </tr>
                <tr class="[ bg-red-100 ] [ dark:bg-red-600 ]">
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">5xx</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">Internal Server Error 💥</td>
                    <td class="[ border-2 ] [ dark:border-slate-700 ] [ p-2 ]">This can be used to indicate server faults and consumer can only retry later</td>
                </tr>
            </tbody>
        </table>

        <GoogleAdSense Type="GoogleAdSenseAdType.InArticle" Format="GoogleAdSenseAdFormat.Fluid" Style="text-align:center;" Slot="3914293965"></GoogleAdSense>

        <h3 id="summary" class="[ font-semibold text-lg ]">Summary</h3>

        <p>
            I'm happy that you have reached to the end of this article. Here we learnt what is HTTP Status Code and why do we need it and what are the common mistakes we do when it comes to 
            returning status codes. We also saw a list of status codes. Hope you find this useful.
        </p>
    </ContentBody>
</Content>

@code {
    private string Description = "In this post I will teach you the importance of status code in Web API. All with live working demo.";
    private string Slug = "webapi-importance-of-status-code";
    private string PosterPath = "Blogs/WebAPI";
    private string Channel = "webapi";
    private string ContentType = "blogs";
    private ushort TotalContents => (ushort)tableOfContents.Contents.Count(content => content.Type.Equals("WebAPI", StringComparison.CurrentCultureIgnoreCase));
}