Make sure to log errors from data fetching in dev mode in the console (…

…#10652)
vercel · Feb 24, 2020 · 7767a42 · 7767a42
1 parent 91a4732
commit 7767a42
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
@@ -526,6 +526,7 @@ export async function renderToHTML(
     if (!dev || !err) throw err
     ctx.err = err
     renderOpts.err = err
+    console.error(err)
   }
 
   if (unstable_getServerProps && !isFallback) {

diff --git a/test/integration/prerender/pages/index.js b/test/integration/prerender/pages/index.js
@@ -2,6 +2,7 @@ import Link from 'next/link'
 
 // eslint-disable-next-line camelcase
 export async function unstable_getStaticProps() {
+  // throw new Error('oops from getStaticProps')
   return {
     props: { world: 'world', time: new Date().getTime() },
     // bad-prop
@@ -12,6 +13,7 @@ export async function unstable_getStaticProps() {
 const Page = ({ world, time }) => {
   return (
     <>
+      {/* <div id='after-change'>idk</div> */}
       <p>hello {world}</p>
       <span>time: {time}</span>
       <Link href="/another?hello=world" as="/another/?hello=world">

diff --git a/test/integration/prerender/test/index.test.js b/test/integration/prerender/test/index.test.js
@@ -19,11 +19,13 @@ import {
   normalizeRegEx,
   startStaticServer,
   initNextServerScript,
+  getReactErrorOverlayContent,
 } from 'next-test-utils'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 2
 const appDir = join(__dirname, '..')
 const nextConfig = join(appDir, 'next.config.js')
+const indexPage = join(__dirname, '../pages/index.js')
 let app
 let appPort
 let buildId
@@ -413,6 +415,31 @@ const runTests = (dev = false) => {
     //   )
     // })
 
+    it('should log error in console and browser in dev mode', async () => {
+      const origContent = await fs.readFile(indexPage, 'utf8')
+
+      const browser = await webdriver(appPort, '/')
+      expect(await browser.elementByCss('p').text()).toMatch(/hello.*?world/)
+
+      await fs.writeFile(
+        indexPage,
+        origContent
+          .replace('// throw new', 'throw new')
+          .replace('{/* <div', '<div')
+          .replace('</div> */}', '</div>')
+      )
+      await browser.waitForElementByCss('#after-change')
+      // we need to reload the page to trigger getStaticProps
+      await browser.refresh()
+
+      const errOverlayContent = await getReactErrorOverlayContent(browser)
+
+      await fs.writeFile(indexPage, origContent)
+      const errorMsg = /oops from getStaticProps/
+      expect(stderr).toMatch(errorMsg)
+      expect(errOverlayContent).toMatch(errorMsg)
+    })
+
     it('should always call getStaticProps without caching in dev', async () => {
       const initialRes = await fetchViaHTTP(appPort, '/something')
       expect(initialRes.headers.get('cache-control')).toBeFalsy()
@@ -433,7 +460,6 @@ const runTests = (dev = false) => {
     })
 
     it('should error on bad object from getStaticProps', async () => {
-      const indexPage = join(__dirname, '../pages/index.js')
       const origContent = await fs.readFile(indexPage, 'utf8')
       await fs.writeFile(
         indexPage,