Skip to content

Latest commit

 

History

History
40 lines (35 loc) · 1.83 KB

README.md

File metadata and controls

40 lines (35 loc) · 1.83 KB

ErrorBoundary

Intercepts uncaught errors from its children and renders an error UI in place of its children.

Props

name required? types description default
component no string component to render as fallback 'div'
onError no (error: Error, target?: ComponentPublicInstance | null | undefined) => void callback to run on error undefined
params no Record<string,string> params to forward to fallback undefined

Example

From data-sources App.vue: This will catch any uncaught error at the route level and render the error fallback

<template>
	<AuthWrapper>
		<Header :logo-image-src="lockup" />
		<ErrorBoundary component="main">
			<router-view />
		</ErrorBoundary>
		<Footer :logo-image-src="acronym" />
	</AuthWrapper>
</template>

From data-sources SearchResultPage.vue: For each of these results, the error boundary will catch any uncaught error only within its SearchResultCard component child and render the error fallback. In this case, the error will not bubble any further up the DOM tree, allowing us to render the rest of the UI that did not error.

<div class="grid pdap-grid-container-column-3 gap-4">
  <ErrorBoundary
    v-for="result in [...getAllRecordsFromSection(section)]"
    :key="result.type"
  >
    <SearchResultCard
      data-test="search-results-cards"
      :data-source="result"
    />
  </ErrorBoundary>
</div>