feat(nuxt): add error handling in NuxtIsland

nuxt · Feb 14, 2024 · 00ed376 · 00ed376
1 parent 18063b2
commit 00ed376
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 6 deletions.
diff --git a/docs/3.api/1.components/8.nuxt-island.md b/docs/3.api/1.components/8.nuxt-island.md
@@ -60,3 +60,11 @@ Some slots are reserved to `NuxtIsland` for special cases.
 - `refresh()`
   - **type**: `() => Promise<void>`
   - **description**: force refetch the server component by refetching it.
+
+## Events
+
+- `error`
+  - **parameters**:
+    - **error**:
+      - **type**: `unknown`
+  - **description**: emitted when when `NuxtIsland` fails to fetch the new island.
diff --git a/packages/nuxt/src/app/components/nuxt-island.ts b/packages/nuxt/src/app/components/nuxt-island.ts
@@ -69,7 +69,8 @@ export default defineComponent({
       default: false
     }
   },
-  async setup (props, { slots, expose }) {
+  emits: ['error'],
+  async setup (props, { slots, expose, emit }) {
     let canTeleport = import.meta.server
     const teleportKey = ref(0)
     const key = ref(0)
@@ -207,11 +208,12 @@ export default defineComponent({
         }
       } catch (e) {
         error.value = e
+        emit('error', e)
       }
     }
 
     expose({
-      refresh: () => fetchComponent(true)
+      refresh: () => fetchComponent(true),
     })
 
     if (import.meta.hot) {

diff --git a/packages/nuxt/src/components/runtime/server-component.ts b/packages/nuxt/src/components/runtime/server-component.ts
@@ -7,7 +7,8 @@ export const createServerComponent = (name: string) => {
     name,
     inheritAttrs: false,
     props: { lazy: Boolean },
-    setup (props, { attrs, slots, expose }) {
+    emits: ['error'],
+    setup (props, { attrs, slots, expose, emit }) {
       const islandRef = ref<null | typeof NuxtIsland>(null)
 
       expose({
@@ -19,7 +20,10 @@ export const createServerComponent = (name: string) => {
           name,
           lazy: props.lazy,
           props: attrs,
-          ref: islandRef
+          ref: islandRef,
+          onError: (err) => {
+            emit('error', err)
+          }
         }, slots)
       }
     }

diff --git a/test/nuxt/nuxt-island.test.ts b/test/nuxt/nuxt-island.test.ts
@@ -111,6 +111,29 @@ describe('runtime server component', () => {
     expect(component.html()).toBe('<div>2</div>')
     vi.mocked(fetch).mockReset()
   })
+
+
+  it('expect NuxtIsland to emit an error', async  () => {
+    const stubFetch = vi.fn(() => {
+      throw new Error('fetch error')
+    })
+
+    vi.stubGlobal('fetch', stubFetch)
+
+    const wrapper = await mountSuspended(createServerComponent('ErrorServerComponent'), {
+      props: {
+        name: 'Error',
+        props: {
+          force: true
+        }
+      },
+      attachTo: 'body'
+    })
+
+    expect(fetch).toHaveBeenCalledOnce()
+    expect(wrapper.emitted('error')).toHaveLength(1)
+    vi.mocked(fetch).mockReset()
+  })
 })
 
 
@@ -166,7 +189,7 @@ describe('client components', () => {
     expect(fetch).toHaveBeenCalledOnce()
 
     expect(wrapper.html()).toMatchInlineSnapshot(`
-      "<div data-island-uid="3">hello<div data-island-uid="3" data-island-component="Client-12345">
+      "<div data-island-uid="4">hello<div data-island-uid="4" data-island-component="Client-12345">
           <div>client component</div>
         </div>
       </div>
@@ -192,7 +215,7 @@ describe('client components', () => {
     await wrapper.vm.$.exposed!.refresh()
     await nextTick()
     expect(wrapper.html()).toMatchInlineSnapshot( `
-      "<div data-island-uid="3">hello<div>
+      "<div data-island-uid="4">hello<div>
           <div>fallback</div>
         </div>
       </div>"