recover from exception for server side rendering

[wangzuo]

Here is a simple test case for the problem:

const Test = ({ x }) => {
  if (x === 1) {
    throw new Error('test');
  }
  return <p>{x}</p>;
};

const App = ({ x }) => (
  <Row>
    <Test x={x} />
  </Row>
);

try {
  const html = renderToString(<App x={2} />); // contains <style>
  renderToString(<App x={1} />); // throw error
} catch (e) {
  const html = renderToString(<App x={2} />); // no <style> tag
}

For example, reach-router handles redirect by catching a redirect error on server side. link. It seems once the rendering fails on server side, later rendering will output no inline <style> tag due to the emotion cache. Is there any way to get around this problem?

[wangzuo]

Right now recreating cache for each request fixes the issue

import { CacheProvider } from '@emotion/core';
import createCache from '@emotion/cache';

<CacheProvider value={createCache()}>
  <App />
</CacheProvider>

[emmatown]

This is because of a bug in React. facebook/react#14502

[wangzuo]

@mitchellhamilton thank you for the quick feedback, just wondering if anything missing from the CacheProvider work around.

[emmatown]

Nope, that’ll work fine.

[wangzuo]

Thank you, really like the new emotion 10!