diff --git a/examples/v7-error-handling/.eslintrc.json b/examples/v7-error-handling/.eslintrc.json
new file mode 100644
index 000000000..130d98c12
--- /dev/null
+++ 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
new file mode 100644
index 000000000..149dc5b5a
--- /dev/null
+++ 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
new file mode 100644
index 000000000..4aab97350
--- /dev/null
+++ 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
new file mode 100644
index 000000000..d7201ba24
--- /dev/null
+++ 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
new file mode 100644
index 000000000..9c9ef5b87
--- /dev/null
+++ 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
new file mode 100644
index 000000000..312cf5d4a
--- /dev/null
+++ 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": "git@github.com: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
new file mode 100644
index 000000000..1e1cec924
--- /dev/null
+++ b/examples/v7-error-handling/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+ return
+}
+
+export default MyApp
diff --git a/examples/v7-error-handling/pages/api/500.js b/examples/v7-error-handling/pages/api/500.js
new file mode 100644
index 000000000..bdb8ba8a3
--- /dev/null
+++ 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
new file mode 100644
index 000000000..0bbdd2766
--- /dev/null
+++ 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 (
+
+
+
Error Handling Example
+
+
+
+
+ Custom Error Page
+
+
+ We display this custom error page whenever the origin returns a 5xx
+ error using this route in routes.js:
+
+ {`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
+})`}
+
+
+ Home
+
+
+
This is a custom 500 error page.
;
+}
diff --git a/examples/v7-error-handling/pages/index.js b/examples/v7-error-handling/pages/index.js
new file mode 100644
index 000000000..85f7b33af
--- /dev/null
+++ 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 (
+
+
+
Error Handling Example
+
+
+
+
+
+ Edgio Error Handling Examples
+
+
+ This app shows you how to handle errors at the edge.
+
+
+
+
+