Prevent dev from crashing when there are errors in template (#5417)
* Prevent dev from crashing when there are errors in template * Adding a changeset
This commit is contained in:
parent
afb751dbd1
commit
a9f7ff9667
3 changed files with 75 additions and 1 deletions
5
.changeset/wild-falcons-sparkle.md
Normal file
5
.changeset/wild-falcons-sparkle.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Prevent dev from crashing when there are errors in template
|
|
@ -6,6 +6,7 @@ import { HTMLBytes, markHTMLString } from '../escape.js';
|
|||
import { HydrationDirectiveProps } from '../hydration.js';
|
||||
import { renderChild } from './any.js';
|
||||
import { HTMLParts } from './common.js';
|
||||
import { isPromise } from '../util.js';
|
||||
|
||||
// In dev mode, check props and make sure they are valid for an Astro component
|
||||
function validateComponentProps(props: any, displayName: string) {
|
||||
|
@ -26,10 +27,25 @@ function validateComponentProps(props: any, displayName: string) {
|
|||
export class AstroComponent {
|
||||
private htmlParts: TemplateStringsArray;
|
||||
private expressions: any[];
|
||||
private error: Error | undefined;
|
||||
|
||||
constructor(htmlParts: TemplateStringsArray, expressions: any[]) {
|
||||
this.htmlParts = htmlParts;
|
||||
this.expressions = expressions;
|
||||
this.error = undefined;
|
||||
this.expressions = expressions.map(expression => {
|
||||
// Wrap Promise expressions so we can catch errors
|
||||
// There can only be 1 error that we rethrow from an Astro component,
|
||||
// so this keeps track of whether or not we have already done so.
|
||||
if(isPromise(expression)) {
|
||||
return Promise.resolve(expression).catch(err => {
|
||||
if(!this.error) {
|
||||
this.error = err;
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
}
|
||||
return expression;
|
||||
})
|
||||
}
|
||||
|
||||
get [Symbol.toStringTag]() {
|
||||
|
|
53
packages/astro/test/units/dev/hydration.test.js
Normal file
53
packages/astro/test/units/dev/hydration.test.js
Normal file
|
@ -0,0 +1,53 @@
|
|||
|
||||
import { expect } from 'chai';
|
||||
|
||||
import { runInContainer } from '../../../dist/core/dev/index.js';
|
||||
import { createFs, createRequestAndResponse } from '../test-utils.js';
|
||||
import svelte from '../../../../integrations/svelte/dist/index.js';
|
||||
import { defaultLogging } from '../../test-utils.js';
|
||||
|
||||
const root = new URL('../../fixtures/alias/', import.meta.url);
|
||||
|
||||
describe('dev container', () => {
|
||||
it('should not crash when reassigning a hydrated component', async () => {
|
||||
const fs = createFs(
|
||||
{
|
||||
'/src/pages/index.astro': `
|
||||
---
|
||||
import Svelte from '../components/Client.svelte';
|
||||
const Foo = Svelte;
|
||||
const Bar = Svelte;
|
||||
---
|
||||
<html>
|
||||
<head><title>testing</title></head>
|
||||
<body>
|
||||
<Foo client:load />
|
||||
<Bar client:load />
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
},
|
||||
root
|
||||
);
|
||||
|
||||
await runInContainer({
|
||||
fs, root,
|
||||
logging: {
|
||||
...defaultLogging,
|
||||
// Error is expected in this test
|
||||
level: 'silent'
|
||||
},
|
||||
userConfig: {
|
||||
integrations: [svelte()]
|
||||
}
|
||||
}, async (container) => {
|
||||
const { req, res, done } = createRequestAndResponse({
|
||||
method: 'GET',
|
||||
url: '/',
|
||||
});
|
||||
container.handle(req, res);
|
||||
const html = await done;
|
||||
expect(res.statusCode).to.equal(200, 'We get a 200 because the error occurs in the template, but we didn\'t crash!');
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue