[Storybook][Vue] 子コンポーネントのsetup()中のエラーが無視されてテンプレート評価に進んでしまう問題

再現方法

下のようにプロジェクトを用意し、storybookを実行して Foo ストーリーを開く。

ruby -e 'loop { puts "\n" }' | npm create vue@latest
cd vue-project

npx -y storybook@latest init
# 一旦Ctrl+Cで storybook サーバを止める

cat > src/stories/Foo.stories.js <<'EOS'
import Foo from './Foo.vue';

export default {
    component: Foo,
    tags: ['autodocs']
};

export const Primary = {
};
EOS

cat > src/stories/Foo.vue <<'EOS'
<template>
    <div class="foo">
        <Bar></Bar>
    </div>
</template>
<script setup>
    import Bar from "./Bar.vue"
</script>
EOS

cat > src/stories/Bar.vue <<'EOS'
<template>
    <div class="bar">
        {{obj.baz}} <!-- Error: $setup.obj is undefined -->
    </div>
</template>
<script setup>
    throw new Error("error in Bar#setup()") // error is silently discarded.

    const obj = reactive({baz: "baz"})
</script>
EOS

npm run storybook

問題

２つの問題がある。

• Bar の setup() で評価が失敗しているのに、テンプレートの評価に進み、 obj が未定義というエラーになる。
• 肝心のエラー error in Bar#setup() はコンソールを含め、どこにも出てこない。

解決方法

根本的ではないが、エラーが捨てられてしまい原因を見つけるのに時間がかかってしまう点については、.storybook/preview.ts に次を追加することでコンソールには表示されるようになる。

.storybook/preview.ts

import {setup} from '@storybook/vue3';

setup((app) => {
    const origHandler = app.config.errorHandler
    app.config.errorHandler = (err, instance, info) => {
        console.error(err)
        origHandler(err, instance, info)
    }
});

Stackblitzで再現したら、バグレポしよう。。