michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Prevent errors in React components from crashing the dev server (#4816)

Browse source 
* Prevent errors in React components from crashing the dev server

* Add a changeset

* Fix test when running in the build
This commit is contained in:
Matthew Phillips 2022-09-20 09:38:17 -04:00 committed by GitHub
parent 57ea549e11
commit 8d059faaed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tricky-walls-walk.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/react': patch
---
Prevent errors in React components from crashing the dev server

7
packages/astro/test/fixtures/react-component/src/components/ImportsThrowsAnError.jsx vendored Normal file
View file

@ -0,0 +1,7 @@
import ThrowsAnError from "./ThrowsAnError";
export default function() {
return <>
<ThrowsAnError />
</>
}

15
packages/astro/test/fixtures/react-component/src/components/ThrowsAnError.jsx vendored Normal file
View file

@ -0,0 +1,15 @@
import { useState } from 'react';
export default function() {
let player = undefined;
// This is tested in dev mode, so make it work during the build to prevent
// breaking other tests.
if(import.meta.env.MODE === 'production') {
player = {};
}
const [] = useState(player.currentTime || null);
return (
<div>Should have thrown</div>
)
}

11
packages/astro/test/fixtures/react-component/src/pages/error-rendering.astro vendored Normal file
View file

@ -0,0 +1,11 @@
---
import ImportsThrowsAnError from '../components/ImportsThrowsAnError';
---
<html>
<head>
<title>Testing</title>
</head>
<body>
<ImportsThrowsAnError />
</body>
</html>

6
packages/astro/test/react-component.test.js
View file

@ -94,6 +94,7 @@ describe('React Components', () => {
if (isWindows) return;
describe('dev', () => {
/** @type {import('./test-utils').Fixture} */
let devServer;
before(async () => {
@ -145,5 +146,10 @@ describe('React Components', () => {
// test 1: react/jsx-runtime is used for the component
expect(jsxRuntime).to.be.ok;
});
it('When a nested component throws it does not crash the server', async () => {
const res = await fixture.fetch('/error-rendering');
await res.arrayBuffer();
});
});
});

5
packages/integrations/react/server.js
View file

@ -121,8 +121,11 @@ async function renderToPipeableStreamAsync(vnode) {
async function renderToStaticNodeStreamAsync(vnode) {
const Writable = await getNodeWritable();
let html = '';
return new Promise((resolve) => {
return new Promise((resolve, reject) => {
let stream = ReactDOM.renderToStaticNodeStream(vnode);
stream.on('error', err => {
reject(err);
});
stream.pipe(
new Writable({
write(chunk, _encoding, callback) {