@kong-ui-public/error-boundary 0.0.2-pr.821.0f34df98.0 → 0.0.2-pr.821.9f450dba.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -15,15 +15,15 @@ A Vue error boundary component to capture unhandled errors that allows for provi
|
|
|
15
15
|
- Renderless (by default) Vue component that **captures** uncaught errors from child components and **prevents the error from propagating further**
|
|
16
16
|
- Allows passing in a list of [tags](#tags) to forward along to the [`onError` callback function](#onerror).
|
|
17
17
|
- Allows providing an error callback function (defined inline or during global Vue plugin initialization)
|
|
18
|
-
- Provides a [`fallback` slot](#fallback) to allow a host app to provide an error UI
|
|
19
|
-
- Allows for **nested** `ErrorBoundary` components in the DOM. Any nested `ErrorBoundary` components will inherit the tags of
|
|
18
|
+
- Provides a [`fallback` slot](#fallback) to allow a host app to provide an error UI that also provides access to the error and context (tags, etc.)
|
|
19
|
+
- Allows for **nested** `ErrorBoundary` components in the DOM. Any nested `ErrorBoundary` components will inherit the tags of any parent `ErrorBoundary` component
|
|
20
20
|
- See the package `sandbox` for more examples
|
|
21
21
|
|
|
22
22
|
The `ErrorBoundary` component will **always** capture any unhandled errors and prevent them from further propagating. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `ErrorBoundary` components from receiving the error and prevent additional `errorCaptured` hooks or `app.config.errorHandler` from being invoked for this error.
|
|
23
23
|
|
|
24
|
-
The `ErrorBoundary` component can be used to wrap a single component or an entire tree of children, tagging any errors that are captured in the DOM tree.
|
|
24
|
+
The `ErrorBoundary` component can be used to wrap a single component or an entire tree of children, tagging any errors that are captured in the DOM tree. The closest `ErrorBoundary` to the buggy component will capture the error; therefore the closest `ErrorBoundary` **must** also provide the fallback UI, if desired.
|
|
25
25
|
|
|
26
|
-
When nesting `ErrorBoundary` components, the [`tags`](#tags) from any parent `ErrorBoundary` component will be passed down to its
|
|
26
|
+
When nesting `ErrorBoundary` components, the [`tags`](#tags) from any parent `ErrorBoundary` component will be passed down to its child `ErrorBoundary` components and included in their `ErrorBoundaryCallbackParams`.
|
|
27
27
|
|
|
28
28
|
```html
|
|
29
29
|
<template>
|
|
@@ -66,6 +66,8 @@ Looking at the numbered examples above:
|
|
|
66
66
|
|
|
67
67
|
## Usage
|
|
68
68
|
|
|
69
|
+
> **Note**: if your application utilizes the private `KonnectAppShell` component, this `ErrorBoundary` component is already registered globally within the app along with the preferred `onError` callback function.
|
|
70
|
+
|
|
69
71
|
### Install
|
|
70
72
|
|
|
71
73
|
Install the package in your host application
|
|
@@ -152,6 +154,8 @@ The `fallback` slot has access to all of the `ErrorBoundaryCallbackParams` as sl
|
|
|
152
154
|
</ErrorBoundary>
|
|
153
155
|
```
|
|
154
156
|
|
|
157
|
+
The closest `ErrorBoundary` to the buggy component will capture the error; therefore, the closest `ErrorBoundary` **must** also provide the fallback UI, if desired.
|
|
158
|
+
|
|
155
159
|
### Props
|
|
156
160
|
|
|
157
161
|
#### `tags`
|
|
@@ -162,7 +166,9 @@ The `fallback` slot has access to all of the `ErrorBoundaryCallbackParams` as sl
|
|
|
162
166
|
|
|
163
167
|
A list of strings to "tag" the captured error with that are passed along to the `onError` callback.
|
|
164
168
|
|
|
165
|
-
|
|
169
|
+
You may then utilize these tags to send context along with any function called in the `onError` callback.
|
|
170
|
+
|
|
171
|
+
For example, if you want to provide custom attributes to error logs on Datadog, you can pass in an array of strings to add to the logged error's custom attributes.
|
|
166
172
|
|
|
167
173
|
#### `onError`
|
|
168
174
|
|
|
@@ -36,6 +36,7 @@ const E = "kong-ui-error-boundary-on-error", f = "kong-ui-error-boundary-tags",
|
|
|
36
36
|
context: {
|
|
37
37
|
componentName: ((l = t == null ? void 0 : t.$options) == null ? void 0 : l.__name) || "",
|
|
38
38
|
info: a,
|
|
39
|
+
// See here for codes returned in production: https://github.com/vuejs/core/blob/b8fc18c0b23be9a77b05dc41ed452a87a0becf82/packages/runtime-core/src/errorHandling.ts#L27
|
|
39
40
|
source: "ErrorBoundary",
|
|
40
41
|
// The name of this ErrorBoundary component
|
|
41
42
|
tags: s.value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorBoundary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundary.vue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA2B,QAAQ,EAAE,MAAM,KAAK,CAAA;AAK5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAA;;
|
|
1
|
+
{"version":3,"file":"ErrorBoundary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundary.vue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA2B,QAAQ,EAAE,MAAM,KAAK,CAAA;AAK5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAA;;IAkKzD;;OAEG;;;;;;;IAQH;;;OAGG;;;;;;;IAbH;;OAEG;;;;;;;IAQH;;;OAGG;;;;;;;;;;;;;;;;AAaL,wBAAwG;AAGxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|