Added custom error pages 500,503,403

src/pages/403.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react"
+import { navigate } from "gatsby"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+const ForbiddenPage = () => {
+ const [second, setSecond] = useState(6)
+ function manageTime() {
+  setSecond(second => second - 1)
+  if (second >= 0) {
+   setTimeout(manageTime, 1000)
+  }
+ }
+
+ useEffect(() => {
+  setTimeout(manageTime, 0)
+
+  setTimeout(() => {
+   navigate("/")
+  }, 5000)
+ }, [])
+
+ return (
+  <Layout>
+   <SEO title="403: Forbidden" />
+   <h1>FORBIDDEN</h1>
+   <p>
+    You are not authorized to access this resource. You are being redirected to
+    the homepage in {second}s.
+   </p>
+  </Layout>
+ )
+}
+
+export default ForbiddenPage

src/pages/500.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react"
+import { navigate } from "gatsby"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+const InternalServerErrorPage = () => {
+ const [second, setSecond] = useState(6)
+ function manageTime() {
+  setSecond(second => second - 1)
+  if (second >= 0) {
+   setTimeout(manageTime, 1000)
+  }
+ }
+
+ useEffect(() => {
+  setTimeout(manageTime, 0)
+
+  setTimeout(() => {
+   navigate("/")
+  }, 5000)
+ }, [])
+
+ return (
+  <Layout>
+   <SEO title="500: Internal Server Error" />
+   <h1>INTERNAL SERVER ERROR</h1>
+   <p>
+    An unexpected error occurred on the server. We apologize for the
+    inconvenience. You are being redirected to the homepage in {second}s.
+   </p>
+  </Layout>
+ )
+}
+
+export default InternalServerErrorPage

src/pages/503.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react"
+import { navigate } from "gatsby"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+const ServiceUnavailablePage = () => {
+ const [second, setSecond] = useState(6)
+ function manageTime() {
+  setSecond(second => second - 1)
+  if (second >= 0) {
+   setTimeout(manageTime, 1000)
+  }
+ }
+
+ useEffect(() => {
+  setTimeout(manageTime, 0)
+
+  setTimeout(() => {
+   navigate("/")
+  }, 5000)
+ }, [])
+
+ return (
+  <Layout>
+   <SEO title="503: Service Unavailable" />
+   <h1>SERVICE UNAVAILABLE</h1>
+   <p>
+    The server is currently unavailable. Please try again later. You are being
+    redirected to the homepage in {second}s.
+   </p>
+  </Layout>
+ )
+}
+
+export default ServiceUnavailablePage

static/web.config

@@ -15,6 +15,14 @@
         <httpErrors>
             <remove statusCode="404" subStatusCode="-1" />
             <error statusCode="404" prefixLanguageFilePath="" path="/404" responseMode="ExecuteURL" />
+            <remove statusCode="500" subStatusCode="-1" />
+            <!-- <remove statusCode="403" subStatusCode="-1" /> -->
+            <remove statusCode="503" subStatusCode="-1" />
+
+            <!-- Custom error pages for each status code -->
+            <error statusCode="500" prefixLanguageFilePath="" path="/500.html" responseMode="File" />
+            <!-- <error statusCode="403" prefixLanguageFilePath="" path="/403.html" responseMode="File" /> -->
+            <error statusCode="503" prefixLanguageFilePath="" path="/503.html" responseMode="File" />
         </httpErrors>
     </system.webServer>
 </configuration>