Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

bug when hydrating with error boundary #2539

Closed
nitsky opened this issue May 18, 2020 · 3 comments · Fixed by #4563
Closed

bug when hydrating with error boundary #2539

nitsky opened this issue May 18, 2020 · 3 comments · Fixed by #4563

Comments

@nitsky
Copy link

nitsky commented May 18, 2020 •
edited
Loading

Hi, I am hydrating server rendered html and have an error boundary to handle client rendering errors. I am observing that if a component throws during hydration, both the original HTML and the "error" HTML are visible. You can reproduce the issue by opening the HTML below in a browser. You can uncomment the imports for react instead of preact to see the expected behavior.

Steps to reproduce

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" />
  </head>
  <body>
    <div id="root">
      <div>Hello, World!</div>
    </div>
    <script type="module">
      // use these imports to observe incorrect behavior with preact
      import {
        Component,
        createElement,
        hydrate,
      } from "https://cdn.pika.dev/preact@10.4.1";
      import { useState } from "https://cdn.pika.dev/preact@10.4.1/hooks";

      // use these imports instead to observe correct behavior with react
      // import {
      //   Component,
      //   createElement,
      //   useState,
      // } from "https://cdn.pika.dev/react";
      // import { hydrate } from "https://cdn.pika.dev/react-dom";

      class Root extends Component {
        constructor() {
          super();
          this.state = {};
        }
        componentDidCatch(error) {
          this.setState({ error });
        }
        render() {
          if (!this.state.error) {
            return createElement(App);
          } else {
            return createElement("div", {}, "Error!");
          }
        }
      }

      function App() {
        throw Error(); // <-- throwing here does not work as expected
        return createElement("div", {}, "Hello, World!");
      }

      hydrate(createElement(Root), document.getElementById("root"));
    </script>
  </body>
</html>

Expected Behavior

After hydration, "Hello, World!" should be replaced with "Error!" because the App component throws. When using the react imports instead of the preact imports in the file above, I see the expected behavior.

Actual Behavior

I see both "Hello, World!" and "Error!" below it.
@sventschui sventschui mentioned this issue Jun 3, 2020
Closed
@JoviDeCroock JoviDeCroock mentioned this issue Jun 16, 2020
Closed
@JoviDeCroock JoviDeCroock mentioned this issue Nov 29, 2020
Closed
@the-fedorr
Copy link

Same issue.
I see the following message in console:
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
As a result it displays partially rendered page, what brokes UI.
Is there a way to disable this bihavior?

@marvinhagemeister
Copy link
Member

@the-fedorr That sounds very much like you're using React instead of Preact. We don't have that string anywhere in our codebase.

@the-fedorr
Copy link

@the-fedorr That sounds very much like you're using React instead of Preact. We don't have that string anywhere in our codebase.

You're right, sorry.

JoviDeCroock added a commit that referenced this issue Nov 22, 2024
@JoviDeCroock
Handle errors during hydration (#2539)
38080ea
@JoviDeCroock JoviDeCroock mentioned this issue Nov 22, 2024
Merged
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@nitsky @marvinhagemeister @the-fedorr