@kong-ui-public/error-boundary 0.0.2-pr.821.e7da777c.0 → 0.1.0

package/README.md

@@ -15,15 +15,15 @@ A Vue error boundary component to capture unhandled errors that allows for provi
 - Renderless (by default) Vue component that **captures** uncaught errors from child components and **prevents the error from propagating further**
 - Allows passing in a list of [tags](#tags) to forward along to the [`onError` callback function](#onerror).
 - Allows providing an error callback function (defined inline or during global Vue plugin initialization)
-- Provides a [`fallback` slot](#fallback) to allow a host app to provide an error UI
-- Allows for **nested** `ErrorBoundary` components in the DOM. Any nested `ErrorBoundary` components will inherit the tags of its ancestors
+- 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.)
+- Allows for **nested** `ErrorBoundary` components in the DOM. Any nested `ErrorBoundary` components will inherit the tags of any parent `ErrorBoundary` component
 - See the package `sandbox` for more examples
 
 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.
 
-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 `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.
 
-When nesting `ErrorBoundary` components, the [`tags`](#tags) from any parent `ErrorBoundary` component will be passed down to its children and included in their `ErrorCallbackParams`.
+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`.
 
 ```html
 <template>
@@ -39,10 +39,10 @@ When nesting `ErrorBoundary` components, the [`tags`](#tags) from any parent `Er
           <ErrorBoundary :tags="['team-core-ui']">
             <CreditCardComponent />
             <!-- The fallback slot has access to all params -->
-            <template #fallback="{ error, instance, componentName, info, tags }">
+            <template #fallback="{ error, context }">
               <div class="fallback-content">
                 <p>This component has custom fallback UI; most likely just an icon, etc.</p>
-                <p class="error-message">{{ componentName }}: {{ error.message }}</p>
+                <p class="error-message">{{ context.componentName }}: {{ error.message }}</p>
               </div>
             </template>
           </ErrorBoundary>
@@ -66,6 +66,8 @@ Looking at the numbered examples above:
 
 ## Usage
 
+> **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.
+
 ### Install
 
 Install the package in your host application
@@ -93,18 +95,14 @@ import ErrorBoundary from '@kong-ui-public/error-boundary' // No style imports n
 // Datadog package example
 import { datadogRum } from '@datadog/browser-rum'
 
-
 const app = createApp(App)
 
 app.use(ErrorBoundary, {
   // Provide a global, default `onError` callback for all ErrorBoundary instances
-  onError: ({ error, instance, componentName, info, tags }) => {
+  onError({ error, context }) {
     // Example of sending errors to Datadog
     datadogRum.addError(error, {
-      source: 'ErrorBoundary',
-      component: componentName,
-      tags,
-      info,
+      ui: context,
     })
   },
 })
@@ -129,7 +127,7 @@ When registering the component locally, you can provide the `onError` callback a
 import { ErrorBoundary } from '@kong-ui-public/error-boundary' // No style imports needed
 
 const myTags = ['first-tag', 'another-tag']
-const customErrorCallback = ({ error, instance, componentName, info, tags }) => {
+const customErrorCallback = ({ error, context }) => {
   // Do something fancy
 }
 </script>
@@ -145,17 +143,19 @@ The `default` slot should be utilized for your "potentially buggy" Vue component
 
 The `fallback` slot can optionally be used to provide a fallback UI should any child component (not already wrapped with another `ErrorBoundary` component) thrown an unhandled error. **The default fallback behavior is to render nothing in the UI.**
 
-The `fallback` slot has access to all of the `ErrorCallbackParams` as slot props:
+The `fallback` slot has access to all of the `ErrorBoundaryCallbackParams` as slot props:
 
 ```html
 <ErrorBoundary :tags="myTags">
   <BuggyComponent />
-  <template #fallback="{ error, instance, componentName, info, tags }">
+  <template #fallback="{ error, context }">
     <!-- Your fallback UI here -->
   </template>
 </ErrorBoundary>
 ```
 
+The closest `ErrorBoundary` to the buggy component will capture the error; therefore, the closest `ErrorBoundary` **must** also provide the fallback UI, if desired.
+
 ### Props
 
 #### `tags`
@@ -166,14 +166,16 @@ The `fallback` slot has access to all of the `ErrorCallbackParams` as slot props
 
 A list of strings to "tag" the captured error with that are passed along to the `onError` callback.
 
-For example, if you want to provide custom attributes to errors on Datadog, you can pass in an array of strings to add to the logged error's custom attributes.
+You may then utilize these tags to send context along with any function called in the `onError` callback.
+
+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.
 
 #### `onError`
 
-- type: `Function as PropType<(payload: ErrorCallbackParams) => void>`
+- type: `Function as PropType<(params: ErrorBoundaryCallbackParams) => void>`
 - required: `false`
 - default: `[]`
 
-A function to be called from the `ErrorBoundary` component when an error in a child component is captured. Receives a payload of [ErrorCallbackParams](src/types/error-boundary.ts).
+A function to be called from the `ErrorBoundary` component when an error in a child component is captured. Receives params of [ErrorBoundaryCallbackParams](src/types/error-boundary.ts).
 
 > **Note**: Providing a callback function via the `onError` prop will take precedence over any callback function defined during global registration. You can also provide an empty function in order to prevent the global callback from being executed.

package/dist/error-boundary.es.js

@@ -1,49 +1,63 @@
-import { defineComponent as y, inject as d, ref as i, computed as g, unref as m, provide as O, onErrorCaptured as R, renderSlot as f } from "vue";
-const E = "kong-ui-error-boundary-on-error", c = "kong-ui-error-boundary-tags", N = /* @__PURE__ */ y({
+import { defineComponent as p, inject as c, ref as i, computed as y, unref as m, provide as v, onErrorCaptured as g, renderSlot as d } from "vue";
+const E = "kong-ui-error-boundary-on-error", f = "kong-ui-error-boundary-tags", O = /* @__PURE__ */ p({
   __name: "ErrorBoundary",
   props: {
+    /**
+     * An optional array of strings to pass along to the context
+     */
     tags: {
       type: Array,
       required: !1,
-      default: () => []
+      default: () => [],
+      // Ensure the value is an object, not a string
+      validator: (e) => typeof e == "object"
     },
+    /**
+     * An optional callback function to execute when an error is captured.
+     * This prop will take precedence over a plugin-provided onError callback.
+     */
     onError: {
       type: Function,
       required: !1,
       default: void 0
     }
   },
-  setup(n) {
-    const r = n, t = d(E, r.onError), _ = d(c, []), a = i(), u = g(() => {
+  setup(e) {
+    const r = e, u = c(E, r.onError), _ = c(f, []), n = i(), s = y(() => {
       const o = /* @__PURE__ */ new Set();
-      for (const e of [...m(_), ...r.tags])
-        o.add(e);
+      for (const t of [...m(_), ...r.tags])
+        o.add(t);
       return Array.from(o);
     });
-    return O(c, u), R((o, e, p) => {
+    return v(f, s), g((o, t, a) => {
       var l;
-      a.value = o;
-      const s = {
-        error: a.value,
-        instance: e,
-        info: p,
-        tags: u.value,
-        componentName: (l = e == null ? void 0 : e.$options) == null ? void 0 : l.__name
-      };
-      return typeof r.onError == "function" ? r.onError(s) : typeof t == "function" && t(s), !1;
-    }), (o, e) => a.value ? f(o.$slots, "fallback", {
-      key: 1,
-      error: a.value,
-      tags: n.tags
-    }) : f(o.$slots, "default", { key: 0 });
+      return n.value = {
+        error: o,
+        context: {
+          componentName: ((l = t == null ? void 0 : t.$options) == null ? void 0 : l.__name) || "",
+          info: a,
+          // See here for codes returned in production: https://github.com/vuejs/core/blob/b8fc18c0b23be9a77b05dc41ed452a87a0becf82/packages/runtime-core/src/errorHandling.ts#L27
+          source: "ErrorBoundary",
+          // The name of this ErrorBoundary component
+          tags: s.value
+        }
+      }, typeof r.onError == "function" ? r.onError(n.value) : typeof u == "function" && u(n.value), !1;
+    }), (o, t) => {
+      var a;
+      return (a = n.value) != null && a.error ? d(o.$slots, "fallback", {
+        key: 1,
+        context: n.value.context,
+        error: n.value.error
+      }) : d(o.$slots, "default", { key: 0 });
+    };
   }
-}), k = {
+}), N = {
   // Customize Vue plugin options as desired
-  install: (n, r = {}) => {
-    n.component(r.name || "ErrorBoundary", N), n.provide(E, r.onError);
+  install: (e, r = {}) => {
+    e.component(r.name || "ErrorBoundary", O), e.provide(E, r.onError);
   }
 };
 export {
-  N as ErrorBoundary,
-  k as default
+  O as ErrorBoundary,
+  N as default
 };

package/dist/error-boundary.umd.js

@@ -1 +1 @@
-(function(e,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(e=typeof globalThis<"u"?globalThis:e||self,r(e["kong-ui-public-error-boundary"]={},e.Vue))})(this,function(e,r){"use strict";const d="kong-ui-error-boundary-on-error",s="kong-ui-error-boundary-tags",f=r.defineComponent({__name:"ErrorBoundary",props:{tags:{type:Array,required:!1,default:()=>[]},onError:{type:Function,required:!1,default:void 0}},setup(a){const o=a,l=r.inject(d,o.onError),E=r.inject(s,[]),u=r.ref(),i=r.computed(()=>{const n=new Set;for(const t of[...r.unref(E),...o.tags])n.add(t);return Array.from(n)});return r.provide(s,i),r.onErrorCaptured((n,t,_)=>{var p;u.value=n;const c={error:u.value,instance:t,info:_,tags:i.value,componentName:(p=t==null?void 0:t.$options)==null?void 0:p.__name};return typeof o.onError=="function"?o.onError(c):typeof l=="function"&&l(c),!1}),(n,t)=>u.value?r.renderSlot(n.$slots,"fallback",{key:1,error:u.value,tags:a.tags}):r.renderSlot(n.$slots,"default",{key:0})}}),y={install:(a,o={})=>{a.component(o.name||"ErrorBoundary",f),a.provide(d,o.onError)}};e.ErrorBoundary=f,e.default=y,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(e,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(e=typeof globalThis<"u"?globalThis:e||self,r(e["kong-ui-public-error-boundary"]={},e.Vue))})(this,function(e,r){"use strict";const s="kong-ui-error-boundary-on-error",l="kong-ui-error-boundary-tags",f=r.defineComponent({__name:"ErrorBoundary",props:{tags:{type:Array,required:!1,default:()=>[],validator:t=>typeof t=="object"},onError:{type:Function,required:!1,default:void 0}},setup(t){const o=t,i=r.inject(s,o.onError),y=r.inject(l,[]),u=r.ref(),c=r.computed(()=>{const n=new Set;for(const a of[...r.unref(y),...o.tags])n.add(a);return Array.from(n)});return r.provide(l,c),r.onErrorCaptured((n,a,d)=>{var p;return u.value={error:n,context:{componentName:((p=a==null?void 0:a.$options)==null?void 0:p.__name)||"",info:d,source:"ErrorBoundary",tags:c.value}},typeof o.onError=="function"?o.onError(u.value):typeof i=="function"&&i(u.value),!1}),(n,a)=>{var d;return(d=u.value)!=null&&d.error?r.renderSlot(n.$slots,"fallback",{key:1,context:u.value.context,error:u.value.error}):r.renderSlot(n.$slots,"default",{key:0})}}}),_={install:(t,o={})=>{t.component(o.name||"ErrorBoundary",f),t.provide(s,o.onError)}};e.ErrorBoundary=f,e.default=_,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/types/components/ErrorBoundary.vue.d.ts

@@ -1,35 +1,51 @@
 import type { PropType } from 'vue';
-import type { ErrorCallbackParams } from '../types';
+import type { ErrorBoundaryCallbackParams } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    /**
+     * An optional array of strings to pass along to the context
+     */
     tags: {
         type: PropType<string[]>;
         required: false;
         default: () => never[];
+        validator: (value: any) => boolean;
     };
+    /**
+     * An optional callback function to execute when an error is captured.
+     * This prop will take precedence over a plugin-provided onError callback.
+     */
     onError: {
-        type: PropType<(payload: ErrorCallbackParams) => void>;
+        type: PropType<(params: ErrorBoundaryCallbackParams) => void>;
         required: false;
         default: undefined;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * An optional array of strings to pass along to the context
+     */
     tags: {
         type: PropType<string[]>;
         required: false;
         default: () => never[];
+        validator: (value: any) => boolean;
     };
+    /**
+     * An optional callback function to execute when an error is captured.
+     * This prop will take precedence over a plugin-provided onError callback.
+     */
     onError: {
-        type: PropType<(payload: ErrorCallbackParams) => void>;
+        type: PropType<(params: ErrorBoundaryCallbackParams) => void>;
         required: false;
         default: undefined;
     };
 }>>, {
     tags: string[];
-    onError: (payload: ErrorCallbackParams) => void;
+    onError: (params: ErrorBoundaryCallbackParams) => void;
 }, {}>, {
     default?(_: {}): any;
     fallback?(_: {
-        error: any;
-        tags: string[];
+        context: import("../types").ErrorBoundaryContext;
+        error: {};
     }): any;
 }>;
 export default _default;

package/dist/types/components/ErrorBoundary.vue.d.ts.map

@@ -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;AAE5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4JnD,wBAA8G;AAE9G,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"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"}

package/dist/types/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,eAAO,MAAM,6CAA6C,oCAAoC,CAAA;AAC9F,oGAAoG;AACpG,eAAO,MAAM,yCAAyC,gCAAgC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,eAAO,MAAM,6CAA6C,oCAAoC,CAAA;AAE9F,oGAAoG;AACpG,eAAO,MAAM,yCAAyC,gCAAgC,CAAA"}

package/dist/types/types/error-boundary.d.ts

@@ -1,13 +1,15 @@
-import type { ComponentPublicInstance } from 'vue';
-export interface ErrorCallbackParams {
-    error: unknown;
-    instance: ComponentPublicInstance | null;
-    componentName?: string;
+export interface ErrorBoundaryContext {
+    componentName: string;
     info: string;
+    source: string;
     tags: string[];
 }
+export interface ErrorBoundaryCallbackParams {
+    error: unknown;
+    context: ErrorBoundaryContext;
+}
 export interface ErrorBoundaryPluginOptions {
     name?: string;
-    onError?: ({ error, instance, componentName, info, tags }: ErrorCallbackParams) => void;
+    onError?: ({ error, context: { componentName, info, source, tags } }: ErrorBoundaryCallbackParams) => void;
 }
 //# sourceMappingURL=error-boundary.d.ts.map

package/dist/types/types/error-boundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/types/error-boundary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,KAAK,CAAA;AAElD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,uBAAuB,GAAG,IAAI,CAAA;IACxC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,EAAE,CAAA;CACf;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAA;CACxF"}
+{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/types/error-boundary.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,MAAM,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;CACf;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,oBAAoB,CAAA;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,2BAA2B,KAAK,IAAI,CAAA;CAC3G"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/error-boundary",
-  "version": "0.0.2-pr.821.e7da777c.0",
+  "version": "0.1.0",
   "type": "module",
   "main": "./dist/error-boundary.umd.js",
   "module": "./dist/error-boundary.es.js",