Render the initial error on the server.

arunoda · arunoda · commit 94ce99f4aff2 · 2017-04-02T02:03:24.000+05:30
diff --git a/server/document.js b/server/document.js
@@ -4,9 +4,9 @@ import flush from 'styled-jsx/server'
 
 export default class Document extends Component {
   static getInitialProps ({ renderPage }) {
-    const {html, head} = renderPage()
+    const { html, head, errorHtml } = renderPage()
     const styles = flush()
-    return { html, head, styles }
+    return { html, head, errorHtml, styles }
   }
 
   static childContextTypes = {
@@ -49,11 +49,11 @@ export class Main extends Component {
   }
 
   render () {
-    const { html } = this.context._documentProps
+    const { html, errorHtml } = this.context._documentProps
     return (
       <div>
         <div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
-        <div id='__next-error' />
+        <div id='__next-error' dangerouslySetInnerHTML={{ __html: errorHtml }} />
       </div>
     )
   }
diff --git a/server/render.js b/server/render.js
@@ -9,6 +9,7 @@ import { Router } from '../lib/router'
 import { loadGetInitialProps } from '../lib/utils'
 import Head, { defaultHead } from '../lib/head'
 import App from '../lib/app'
+import ErrorDebug from '../lib/error-debug'
 
 export async function render (req, res, pathname, query, opts) {
   const html = await renderToHTML(req, res, pathname, opts)
@@ -67,20 +68,25 @@ async function doRender (req, res, pathname, query, {
     const app = createElement(App, {
       Component,
       props,
-      err: dev ? err : null,
       router: new Router(pathname, query)
     })
 
     const render = staticMarkup ? renderToStaticMarkup : renderToString
 
     let html
     let head
+    let errorHtml = ''
     try {
       html = render(app)
     } finally {
       head = Head.rewind() || defaultHead()
     }
-    return { html, head }
+
+    if (err && dev) {
+      errorHtml = render(createElement(ErrorDebug, { error: err }))
+    }
+
+    return { html, head, errorHtml }
   }
 
   const docProps = await loadGetInitialProps(Document, { ...ctx, renderPage })

Original file line number	Diff line number	Diff line change
`@@ -4,9 +4,9 @@ import flush from 'styled-jsx/server'`
`4`	`4`
`5`	`5`	`export default class Document extends Component {`
`6`	`6`	`static getInitialProps ({ renderPage }) {`
`7`		`- const {html, head} = renderPage()`
	`7`	`+ const { html, head, errorHtml } = renderPage()`
`8`	`8`	`const styles = flush()`
`9`		`- return { html, head, styles }`
	`9`	`+ return { html, head, errorHtml, styles }`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`static childContextTypes = {`
`@@ -49,11 +49,11 @@ export class Main extends Component {`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`render () {`
`52`		`- const { html } = this.context._documentProps`
	`52`	`+ const { html, errorHtml } = this.context._documentProps`
`53`	`53`	`return (`
`54`	`54`	`<div>`
`55`	`55`	`<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />`
`56`		`- <div id='__next-error' />`
	`56`	`+ <div id='__next-error' dangerouslySetInnerHTML={{ __html: errorHtml }} />`
`57`	`57`	`</div>`
`58`	`58`	`)`
`59`	`59`	`}`