Merge branch 'main' into v7-next-app-router

edgio-docs · Jul 10, 2023 · bf5d4b0 · bf5d4b0
2 parents ccdb45c + 2a6ec48
commit bf5d4b0
Show file tree

Hide file tree

Showing 17 changed files with 9,241 additions and 0 deletions.
diff --git a/examples/v7-error-handling/.eslintrc.json b/examples/v7-error-handling/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off"
+  }
+}
diff --git a/examples/v7-error-handling/.gitignore b/examples/v7-error-handling/.gitignore
@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# Edgio generated build directory
+.edgio
diff --git a/examples/v7-error-handling/README.md b/examples/v7-error-handling/README.md
@@ -0,0 +1,25 @@
+# Edgio Error Handling Examples
+
+This app shows you how to handle errors at the edge to:
+
+- Display a custom error page
+- Retry the request from a different origin
+
+## Prerequisites
+
+Ensure you have the following installed:
+
+- Node.js 16+
+- Yarn
+
+## Setup
+
+1. Clone this repo
+2. Run `yarn install`
+3. Run `yarn start`
+
+## Deploying to Edgio
+
+```
+yarn deploy
+```
diff --git a/examples/v7-error-handling/edgio.config.js b/examples/v7-error-handling/edgio.config.js
@@ -0,0 +1,17 @@
+// This file was automatically added by edgio init.
+// You should commit this file to source control.
+// Learn more about this file at https://docs.edg.io/guides/edgio_config
+module.exports = {
+  connector: "@edgio/next",
+  origins: [
+    {
+      name: "legacy",
+      override_host_header: "origin.mockaroo.com",
+      hosts: [
+        {
+          location: "origin.mockaroo.com",
+        },
+      ],
+    },
+  ],
+};
diff --git a/examples/v7-error-handling/next.config.js b/examples/v7-error-handling/next.config.js
@@ -0,0 +1,5 @@
+// This file was automatically added by edgio init.
+// You should commit this file to source control.
+const { withEdgio } = require("@edgio/next/config");
+
+module.exports = (phase, config) => withEdgio({});
diff --git a/examples/v7-error-handling/package.json b/examples/v7-error-handling/package.json
@@ -0,0 +1,27 @@
+{
+  "scripts": {
+    "start": "edgio dev",
+    "deploy": "edgio deploy",
+    "edgio:dev": "edgio dev",
+    "edgio:build": "edgio build",
+    "edgio:deploy": "edgio deploy"
+  },
+  "name": "edgio-v7-error-handling-example",
+  "private": true,
+  "dependencies": {
+    "next": "13.4.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@edgio/cli": "^7.0.20",
+    "@edgio/core": "^7.0.20",
+    "@edgio/devtools": "^7.0.20",
+    "@edgio/next": "^7.0.20",
+    "@edgio/prefetch": "^7.0.20",
+    "@edgio/react": "^7.0.20",
+    "eslint": "7",
+    "eslint-config-next": "13.4.6"
+  },
+  "repository": "[email protected]:edgio-docs/edgio-v7-error-handling-example.git"
+}
diff --git a/examples/v7-error-handling/pages/_app.js b/examples/v7-error-handling/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/examples/v7-error-handling/pages/api/500.js b/examples/v7-error-handling/pages/api/500.js
@@ -0,0 +1,5 @@
+export default function handler(req, res) {
+  res.status(500).json({
+    message: "This is a simulated 500 error response from the origin",
+  });
+}
diff --git a/examples/v7-error-handling/pages/custom-error-page.js b/examples/v7-error-handling/pages/custom-error-page.js
@@ -0,0 +1,37 @@
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+import Link from "next/link";
+
+export default function ErrorPage() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Error Handling Example</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Custom Error Page</h1>
+
+        <p className={styles.description}>
+          We display this custom error page whenever the origin returns a 5xx
+          error using this route in routes.js:
+        </p>
+        <code className={styles.code}>{`router.catch(/^5.*/, {\n
+  url: { follow_redirects: true },\n
+  response: { set_status_code: 302 },\n
+  headers: {\n
+    set_response_headers: {\n
+      location: "%{scheme}://%{host}/custom-error-page",\n
+    },\n
+  },\n
+})`}</code>
+
+        <p>
+          <Link href="/">Home</Link>
+        </p>
+      </main>
+    </div>
+  );
+  return <div>This is a custom 500 error page.</div>;
+}
diff --git a/examples/v7-error-handling/pages/index.js b/examples/v7-error-handling/pages/index.js
@@ -0,0 +1,40 @@
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../styles/Home.module.css";
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Error Handling Example</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Edgio Error Handling Examples</h1>
+
+        <p className={styles.description}>
+          This app shows you how to handle errors at the edge.
+        </p>
+
+        <div className={styles.grid}>
+          <a href="/api/500" className={styles.card}>
+            <h2>Custom Error Page &rarr;</h2>
+            <p>
+              This example catches 500 errors and renders
+              /pages/custom-error-page.js
+            </p>
+          </a>
+          <a href="/pricing" className={styles.card}>
+            <h2>Retry from a different origin&rarr;</h2>
+            <p>
+              Retries the request from a different origin if the original
+              request returns a 4xx error.
+            </p>
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/examples/v7-error-handling/public/favicon.ico b/examples/v7-error-handling/public/favicon.ico
diff --git a/examples/v7-error-handling/public/vercel.svg b/examples/v7-error-handling/public/vercel.svg
diff --git a/examples/v7-error-handling/routes.js b/examples/v7-error-handling/routes.js
@@ -0,0 +1,49 @@
+// This file was automatically added by edgio deploy.
+// You should commit this file to source control.
+import { Router } from "@edgio/core/router";
+import { nextRoutes } from "@edgio/next";
+
+export default new Router()
+  // NextRoutes automatically adds routes for all Next.js pages and their assets
+  .use(nextRoutes)
+  .get("/legacy/:path*", {
+    origin: {
+      // This will retry the request from the legacy origin if the primary origin returns a 5xx status code
+      set_origin: "legacy",
+    },
+    url: {
+      url_rewrite: [
+        // strip the "/legacy" prefix from the path
+        { source: "/legacy/(.*)", syntax: "regexp", destination: "/$1" },
+      ],
+    },
+  })
+  .catch(/^5.*/, {
+    url: { follow_redirects: true },
+    response: { set_status_code: 302 },
+    headers: {
+      set_response_headers: {
+        location: "%{scheme}://%{host}/custom-error-page",
+      },
+    },
+  })
+  .match(
+    // Redirect all 5xx responses to the same path with "/legacy" prepended (unless we already have a "/legacy" in the path)
+    { response: { status_code: /^4.*/ } },
+    {
+      response: {
+        set_status_code: 302,
+      },
+      url: {
+        // This makes the redirect invisible to the client. They will just see the 500.html page.
+        follow_redirects: true,
+      },
+      headers: {
+        set_response_headers: {
+          // Redirect to the same URL with "/legacy" prepended
+          location:
+            "%{scheme}://%{host}/legacy%{path}%{is_args}%{query_string}",
+        },
+      },
+    }
+  );
diff --git a/examples/v7-error-handling/styles/Home.module.css b/examples/v7-error-handling/styles/Home.module.css
@@ -0,0 +1,118 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+}
+
+.title,
+.description {
+  text-align: center;
+}
+
+.description {
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  white-space: pre;
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  line-height: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.logo {
+  height: 1em;
+  margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}