Skip to content

Commit

Permalink
Add Caveats section to custom error page (#33160)
Browse files Browse the repository at this point in the history 
## Desscription

This is a follow up of #32873. As discussed in #32873, currently it's not recommended to use getServerSideProps in the `Error` component, so this PR will add that caveat to the documentation page, like `Document` and `App` also have.

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
  • Loading branch information
@glenngijsberts
glenngijsberts authored Jan 10, 2022
1 parent 3eabb7f commit 5f4947e
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions docs/advanced-features/custom-error-page.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,3 +94,7 @@ export default function Page({ errorCode, stars }) {
The `Error` component also takes `title` as a property if you want to pass in a text message along with a `statusCode`.

If you have a custom `Error` component be sure to import that one instead. `next/error` exports the default component used by Next.js.

### Caveats

- `Error` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).

1 comment on commit 5f4947e

@ijjk
Copy link
Member

@ijjk ijjk commented on 5f4947e Jan 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stats from current release

Default Build (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
buildDuration 21.2s 16.5s -4.8s
buildDurationCached 3.9s 3.7s -245ms
nodeModulesSize 363 MB 355 MB -8.47 MB
Page Load Tests Overall increase ✓
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
/ failed reqs 0 0 ✓
/ total time (seconds) 3.387 3.323 -0.06
/ avg req/sec 738.16 752.43 +14.27
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.56 1.523 -0.04
/error-in-render avg req/sec 1602.31 1641.74 +39.43
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
450.HASH.js gzip 179 B 179 B ✓
framework-HASH.js gzip 42.2 kB 42.2 kB ✓
main-HASH.js gzip 28.8 kB 27.1 kB -1.76 kB
webpack-HASH.js gzip 1.45 kB 1.45 kB ✓
Overall change 72.7 kB 70.9 kB -1.76 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages Overall increase ⚠️
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
_app-HASH.js gzip 1.37 kB 1.37 kB ✓
_error-HASH.js gzip 194 B 194 B ✓
amp-HASH.js gzip 312 B 312 B ✓
css-HASH.js gzip 326 B 326 B ✓
dynamic-HASH.js gzip 2.37 kB 2.37 kB ⚠️ +2 B
head-HASH.js gzip 350 B 350 B ✓
hooks-HASH.js gzip 919 B 919 B ✓
image-HASH.js gzip 4.73 kB 4.74 kB ⚠️ +8 B
index-HASH.js gzip 263 B 263 B ✓
link-HASH.js gzip 2.13 kB 2.13 kB ✓
routerDirect..HASH.js gzip 321 B 321 B ✓
script-HASH.js gzip 383 B 383 B ✓
withRouter-HASH.js gzip 318 B 318 B ✓
85e02e95b279..7e3.css gzip 107 B 107 B ✓
Overall change 14.1 kB 14.1 kB ⚠️ +10 B
Client Build Manifests
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
_buildManifest.js gzip 459 B 459 B ✓
Overall change 459 B 459 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
index.html gzip 531 B 533 B ⚠️ +2 B
link.html gzip 545 B 547 B ⚠️ +2 B
withRouter.html gzip 527 B 528 B ⚠️ +1 B
Overall change 1.6 kB 1.61 kB ⚠️ +5 B

Diffs

Diff for _buildManifest.js 
@@ -8,11 +8,11 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fcss-97182c5b8324021a.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-67bc61ceadfe3f36.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-9b7afaaa04b653ed.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-675a84b65266e013.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-3cbae1287e809392.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-1339957a75cc3c85.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
Diff for _app-HASH.js 
@@ -25,7 +25,7 @@
     ) {
       "use strict";
 
-      var _runtimeJs = _interopRequireDefault(__webpack_require__(5666));
+      var _runtimeJs = _interopRequireDefault(__webpack_require__(4051));
       function _assertThisInitialized(self) {
         if (self === void 0) {
           throw new ReferenceError(
Diff for dynamic-HASH.js 
@@ -374,44 +374,41 @@
         if (false) {
         }
         // Client only
-        if (
-          !initialized &&
-          "object" !== "undefined" &&
-          typeof opts.webpack === "function" &&
-          "function" === "function" &&
-          !opts.suspense
-        ) {
-          var moduleIds = opts.webpack();
-          READY_INITIALIZERS.push(function(ids) {
-            var _iteratorNormalCompletion = true,
-              _didIteratorError = false,
-              _iteratorError = undefined;
-            try {
-              for (
-                var _iterator = moduleIds[Symbol.iterator](), _step;
-                !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
-                _iteratorNormalCompletion = true
-              ) {
-                var moduleId = _step.value;
-                if (ids.indexOf(moduleId) !== -1) {
-                  return init();
-                }
-              }
-            } catch (err) {
-              _didIteratorError = true;
-              _iteratorError = err;
-            } finally {
+        if (!initialized && "object" !== "undefined" && !opts.suspense) {
+          var moduleIds = opts.webpack ? opts.webpack() : opts.modules;
+          if (moduleIds) {
+            READY_INITIALIZERS.push(function(ids) {
+              var _iteratorNormalCompletion = true,
+                _didIteratorError = false,
+                _iteratorError = undefined;
               try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                  _iterator.return();
+                for (
+                  var _iterator = moduleIds[Symbol.iterator](), _step;
+                  !(_iteratorNormalCompletion = (_step = _iterator.next())
+                    .done);
+                  _iteratorNormalCompletion = true
+                ) {
+                  var moduleId = _step.value;
+                  if (ids.indexOf(moduleId) !== -1) {
+                    return init();
+                  }
                 }
+              } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
               } finally {
-                if (_didIteratorError) {
-                  throw _iteratorError;
+                try {
+                  if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                  }
+                } finally {
+                  if (_didIteratorError) {
+                    throw _iteratorError;
+                  }
                 }
               }
-            }
-          });
+            });
+          }
         }
         var LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
         LoadableComponent.preload = function() {
Diff for image-HASH.js 
@@ -209,7 +209,11 @@
         "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
       if (false) {
       }
-      var VALID_LOADING_VALUES = ["lazy", "eager", undefined];
+      var VALID_LOADING_VALUES = /* unused pure expression or super */ null && [
+        "lazy",
+        "eager",
+        undefined
+      ];
       var loaders = new Map([
         ["default", defaultLoader],
         ["imgix", imgixLoader],
@@ -217,7 +221,7 @@
         ["akamai", akamaiLoader],
         ["custom", customLoader]
       ]);
-      var VALID_LAYOUT_VALUES = [
+      var VALID_LAYOUT_VALUES = /* unused pure expression or super */ null && [
         "fill",
         "fixed",
         "intrinsic",
@@ -404,9 +408,10 @@
             var p = "decode" in img ? img.decode() : Promise.resolve();
             p.catch(function() {}).then(function() {
               if (placeholder === "blur") {
-                img.style.filter = "none";
-                img.style.backgroundSize = "none";
-                img.style.backgroundImage = "none";
+                img.style.filter = "";
+                img.style.backgroundSize = "";
+                img.style.backgroundImage = "";
+                img.style.backgroundPosition = "";
               }
               loadedImageURLs.add(src);
               if (onLoadingComplete) {
@@ -717,34 +722,35 @@
               style: _objectSpread({}, imgStyle, blurStyle)
             })
           ),
-          /*#__PURE__*/ _react.default.createElement(
-            "noscript",
-            null,
+          isLazy &&
             /*#__PURE__*/ _react.default.createElement(
-              "img",
-              Object.assign(
-                {},
-                rest,
-                generateImgAttrs({
-                  src: src,
-                  unoptimized: unoptimized,
-                  layout: layout,
-                  width: widthInt,
-                  quality: qualityInt,
-                  sizes: sizes,
-                  loader: loader
-                }),
-                {
-                  decoding: "async",
-                  "data-nimg": layout,
-                  style: imgStyle,
-                  className: className,
-                  // @ts-ignore - TODO: upgrade to `@types/react@17`
-                  loading: loading || "lazy"
-                }
+              "noscript",
+              null,
+              /*#__PURE__*/ _react.default.createElement(
+                "img",
+                Object.assign(
+                  {},
+                  rest,
+                  generateImgAttrs({
+                    src: src,
+                    unoptimized: unoptimized,
+                    layout: layout,
+                    width: widthInt,
+                    quality: qualityInt,
+                    sizes: sizes,
+                    loader: loader
+                  }),
+                  {
+                    decoding: "async",
+                    "data-nimg": layout,
+                    style: imgStyle,
+                    className: className,
+                    // @ts-ignore - TODO: upgrade to `@types/react@17`
+                    loading: loading || "lazy"
+                  }
+                )
               )
-            )
-          ),
+            ),
           priority // for browsers that do not support `imagesrcset`, and in those cases
             ? // it would likely cause the incorrect image to be preloaded.
               //
Diff for main-HASH.js

Diff too large to display

Diff for index.html 
@@ -19,11 +19,11 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-aa110fd85306645d.js"
+      src="/_next/static/chunks/main-80c8b12ed145074f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-2dac55d1a6d1ca66.js"
+      src="/_next/static/chunks/pages/_app-49be64520995abe5.js"
       defer=""
     ></script>
     <script
Diff for link.html 
@@ -19,11 +19,11 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-aa110fd85306645d.js"
+      src="/_next/static/chunks/main-80c8b12ed145074f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-2dac55d1a6d1ca66.js"
+      src="/_next/static/chunks/pages/_app-49be64520995abe5.js"
       defer=""
     ></script>
     <script
Diff for withRouter.html 
@@ -19,11 +19,11 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-aa110fd85306645d.js"
+      src="/_next/static/chunks/main-80c8b12ed145074f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-2dac55d1a6d1ca66.js"
+      src="/_next/static/chunks/pages/_app-49be64520995abe5.js"
       defer=""
     ></script>
     <script
Default Build with SWC (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
buildDuration 23.5s 18.3s -5.2s
buildDurationCached 3.8s 3.6s -191ms
nodeModulesSize 363 MB 355 MB -8.47 MB
Page Load Tests Overall increase ✓
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
/ failed reqs 0 0 ✓
/ total time (seconds) 3.472 3.358 -0.11
/ avg req/sec 720.12 744.54 +24.42
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.619 1.532 -0.09
/error-in-render avg req/sec 1543.75 1631.66 +87.91
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
450.HASH.js gzip 179 B 179 B ✓
framework-HASH.js gzip 42.3 kB 42.3 kB ✓
main-HASH.js gzip 29.1 kB 27.2 kB -1.86 kB
webpack-HASH.js gzip 1.44 kB 1.44 kB ✓
Overall change 73 kB 71.1 kB -1.86 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages Overall increase ⚠️
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
_app-HASH.js gzip 1.35 kB 1.35 kB ✓
_error-HASH.js gzip 180 B 180 B ✓
amp-HASH.js gzip 305 B 305 B ✓
css-HASH.js gzip 321 B 321 B ✓
dynamic-HASH.js gzip 2.36 kB 2.36 kB ⚠️ +3 B
head-HASH.js gzip 342 B 342 B ✓
hooks-HASH.js gzip 906 B 906 B ✓
image-HASH.js gzip 4.75 kB 4.76 kB ⚠️ +9 B
index-HASH.js gzip 256 B 256 B ✓
link-HASH.js gzip 2.19 kB 2.19 kB ✓
routerDirect..HASH.js gzip 314 B 314 B ✓
script-HASH.js gzip 375 B 375 B ✓
withRouter-HASH.js gzip 309 B 309 B ✓
85e02e95b279..7e3.css gzip 107 B 107 B ✓
Overall change 14.1 kB 14.1 kB ⚠️ +12 B
Client Build Manifests Overall decrease ✓
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
_buildManifest.js gzip 459 B 458 B -1 B
Overall change 459 B 458 B -1 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary v12.0.7 vercel/next.js refs/heads/canary Change
index.html gzip 533 B 532 B -1 B
link.html gzip 546 B 545 B -1 B
withRouter.html gzip 527 B 526 B -1 B
Overall change 1.61 kB 1.6 kB -3 B

Diffs

Diff for _buildManifest.js 
@@ -8,11 +8,11 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fcss-97182c5b8324021a.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-67bc61ceadfe3f36.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-9b7afaaa04b653ed.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-675a84b65266e013.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-3cbae1287e809392.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-1339957a75cc3c85.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
Diff for _app-HASH.js 
@@ -25,7 +25,7 @@
     ) {
       "use strict";
 
-      var _runtimeJs = _interopRequireDefault(__webpack_require__(5666));
+      var _runtimeJs = _interopRequireDefault(__webpack_require__(4051));
       function _assertThisInitialized(self) {
         if (self === void 0) {
           throw new ReferenceError(
Diff for dynamic-HASH.js 
@@ -374,44 +374,41 @@
         if (false) {
         }
         // Client only
-        if (
-          !initialized &&
-          "object" !== "undefined" &&
-          typeof opts.webpack === "function" &&
-          "function" === "function" &&
-          !opts.suspense
-        ) {
-          var moduleIds = opts.webpack();
-          READY_INITIALIZERS.push(function(ids) {
-            var _iteratorNormalCompletion = true,
-              _didIteratorError = false,
-              _iteratorError = undefined;
-            try {
-              for (
-                var _iterator = moduleIds[Symbol.iterator](), _step;
-                !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
-                _iteratorNormalCompletion = true
-              ) {
-                var moduleId = _step.value;
-                if (ids.indexOf(moduleId) !== -1) {
-                  return init();
-                }
-              }
-            } catch (err) {
-              _didIteratorError = true;
-              _iteratorError = err;
-            } finally {
+        if (!initialized && "object" !== "undefined" && !opts.suspense) {
+          var moduleIds = opts.webpack ? opts.webpack() : opts.modules;
+          if (moduleIds) {
+            READY_INITIALIZERS.push(function(ids) {
+              var _iteratorNormalCompletion = true,
+                _didIteratorError = false,
+                _iteratorError = undefined;
               try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                  _iterator.return();
+                for (
+                  var _iterator = moduleIds[Symbol.iterator](), _step;
+                  !(_iteratorNormalCompletion = (_step = _iterator.next())
+                    .done);
+                  _iteratorNormalCompletion = true
+                ) {
+                  var moduleId = _step.value;
+                  if (ids.indexOf(moduleId) !== -1) {
+                    return init();
+                  }
                 }
+              } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
               } finally {
-                if (_didIteratorError) {
-                  throw _iteratorError;
+                try {
+                  if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                  }
+                } finally {
+                  if (_didIteratorError) {
+                    throw _iteratorError;
+                  }
                 }
               }
-            }
-          });
+            });
+          }
         }
         var LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
         LoadableComponent.preload = function() {
Diff for image-HASH.js 
@@ -209,7 +209,11 @@
         "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
       if (false) {
       }
-      var VALID_LOADING_VALUES = ["lazy", "eager", undefined];
+      var VALID_LOADING_VALUES = /* unused pure expression or super */ null && [
+        "lazy",
+        "eager",
+        undefined
+      ];
       var loaders = new Map([
         ["default", defaultLoader],
         ["imgix", imgixLoader],
@@ -217,7 +221,7 @@
         ["akamai", akamaiLoader],
         ["custom", customLoader]
       ]);
-      var VALID_LAYOUT_VALUES = [
+      var VALID_LAYOUT_VALUES = /* unused pure expression or super */ null && [
         "fill",
         "fixed",
         "intrinsic",
@@ -404,9 +408,10 @@
             var p = "decode" in img ? img.decode() : Promise.resolve();
             p.catch(function() {}).then(function() {
               if (placeholder === "blur") {
-                img.style.filter = "none";
-                img.style.backgroundSize = "none";
-                img.style.backgroundImage = "none";
+                img.style.filter = "";
+                img.style.backgroundSize = "";
+                img.style.backgroundImage = "";
+                img.style.backgroundPosition = "";
               }
               loadedImageURLs.add(src);
               if (onLoadingComplete) {
@@ -717,34 +722,35 @@
               style: _objectSpread({}, imgStyle, blurStyle)
             })
           ),
-          /*#__PURE__*/ _react.default.createElement(
-            "noscript",
-            null,
+          isLazy &&
             /*#__PURE__*/ _react.default.createElement(
-              "img",
-              Object.assign(
-                {},
-                rest,
-                generateImgAttrs({
-                  src: src,
-                  unoptimized: unoptimized,
-                  layout: layout,
-                  width: widthInt,
-                  quality: qualityInt,
-                  sizes: sizes,
-                  loader: loader
-                }),
-                {
-                  decoding: "async",
-                  "data-nimg": layout,
-                  style: imgStyle,
-                  className: className,
-                  // @ts-ignore - TODO: upgrade to `@types/react@17`
-                  loading: loading || "lazy"
-                }
+              "noscript",
+              null,
+              /*#__PURE__*/ _react.default.createElement(
+                "img",
+                Object.assign(
+                  {},
+                  rest,
+                  generateImgAttrs({
+                    src: src,
+                    unoptimized: unoptimized,
+                    layout: layout,
+                    width: widthInt,
+                    quality: qualityInt,
+                    sizes: sizes,
+                    loader: loader
+                  }),
+                  {
+                    decoding: "async",
+                    "data-nimg": layout,
+                    style: imgStyle,
+                    className: className,
+                    // @ts-ignore - TODO: upgrade to `@types/react@17`
+                    loading: loading || "lazy"
+                  }
+                )
               )
-            )
-          ),
+            ),
           priority // for browsers that do not support `imagesrcset`, and in those cases
             ? // it would likely cause the incorrect image to be preloaded.
               //
Diff for main-HASH.js

Diff too large to display

Diff for index.html 
@@ -19,11 +19,11 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-aa110fd85306645d.js"
+      src="/_next/static/chunks/main-80c8b12ed145074f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-2dac55d1a6d1ca66.js"
+      src="/_next/static/chunks/pages/_app-49be64520995abe5.js"
       defer=""
     ></script>
     <script
Diff for link.html 
@@ -19,11 +19,11 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-aa110fd85306645d.js"
+      src="/_next/static/chunks/main-80c8b12ed145074f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-2dac55d1a6d1ca66.js"
+      src="/_next/static/chunks/pages/_app-49be64520995abe5.js"
       defer=""
     ></script>
     <script
Diff for withRouter.html 
@@ -19,11 +19,11 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-aa110fd85306645d.js"
+      src="/_next/static/chunks/main-80c8b12ed145074f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-2dac55d1a6d1ca66.js"
+      src="/_next/static/chunks/pages/_app-49be64520995abe5.js"
       defer=""
     ></script>
     <script

Please sign in to comment.