feature #587 [Live] Adding a response:error hook (weaverryan)

weaverryan · weaverryan · commit 7147d5df6865 · 2022-12-05T10:44:49.000-05:00
This PR was merged into the 2.x branch. Discussion ---------- [Live] Adding a response:error hook | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | Tickets | Fix #488 | License | MIT Pretty simple - as requested in #488. Someone using this hook could set `controls.displayError = false` to prevent live components from rendering the error in a modal. Cheers! Commits ------- 96c698a [Live] Adding a response:error hook
diff --git a/src/LiveComponent/assets/src/Component/index.ts b/src/LiveComponent/assets/src/Component/index.ts
@@ -106,6 +106,7 @@ export default class Component {
      *     * disconnect (component: Component) => {}
      *     * render:started (html: string, response: BackendResponse, controls: { shouldRender: boolean }) => {}
      *     * render:finished (component: Component) => {}
+     *     * response:error (backendResponse: BackendResponse, controls: { displayError: boolean }) => {}
      *     * loading.state:started (element: HTMLElement, request: BackendRequest) => {}
      *     * loading.state:finished (element: HTMLElement) => {}
      *     * model:set (model: string, value: any, component: Component) => {}
@@ -145,7 +146,7 @@ export default class Component {
         return this.valueStore.get(modelName);
     }
 
-    action(name: string, args: any, debounce: number|boolean = false): Promise<BackendResponse> {
+    action(name: string, args: any = {}, debounce: number|boolean = false): Promise<BackendResponse> {
         const promise = this.nextRequestPromise;
         this.pendingActions.push({
             name,
@@ -301,10 +302,16 @@ export default class Component {
             const backendResponse = new BackendResponse(response);
             thisPromiseResolve(backendResponse);
             const html = await backendResponse.getBody();
+
             // if the response does not contain a component, render as an error
             const headers = backendResponse.response.headers;
             if (headers.get('Content-Type') !== 'application/vnd.live-component+html' && !headers.get('X-Live-Redirect')) {
-                this.renderError(html);
+                const controls = { displayError: true };
+                this.hooks.triggerHook('response:error', backendResponse, controls);
+
+                if (controls.displayError) {
+                    this.renderError(html);
+                }
 
                 return response;
             }
diff --git a/src/LiveComponent/assets/test/controller/error.test.ts b/src/LiveComponent/assets/test/controller/error.test.ts
@@ -11,6 +11,11 @@
 
 import { createTest, initComponent, shutdownTests } from '../tools';
 import { getByText, waitFor } from '@testing-library/dom';
+import BackendResponse from '../../src/BackendResponse';
+
+const getErrorElement = (): Element|null => {
+    return document.getElementById('live-component-error');
+};
 
 describe('LiveController Error Handling', () => {
     afterEach(() => {
@@ -39,7 +44,7 @@ describe('LiveController Error Handling', () => {
         await waitFor(() => expect(document.getElementById('live-component-error')).not.toBeNull());
         // the component did not change or re-render
         expect(test.element).toHaveTextContent('Original component text');
-        const errorContainer = document.getElementById('live-component-error');
+        const errorContainer = getErrorElement();
         if (!errorContainer) {
             throw new Error('containing missing');
         }
@@ -69,4 +74,32 @@ describe('LiveController Error Handling', () => {
         // the component did not change or re-render
         expect(test.element).toHaveTextContent('Original component text');
     });
+
+    it('triggers response:error hook', async () => {
+        const test = await createTest({ }, (data: any) => `
+            <div ${initComponent(data)}>
+                component text
+            </div>
+        `);
+
+        test.expectsAjaxCall('post')
+            .expectSentData(test.initialData)
+            .serverWillReturnCustomResponse(200, `
+                <html><head><title>Hi!</title></head><body><h1>I'm a whole page, not a component!</h1></body></html>
+            `)
+            .expectActionCalled('save')
+            .init();
+
+        let isHookCalled = false;
+        test.component.on('response:error', (backendResponse: BackendResponse, controls) => {
+            isHookCalled = true;
+            controls.displayError = false;
+        });
+
+        await test.component.action('save');
+
+        await waitFor(() => expect(isHookCalled).toBe(true));
+        const errorContainer = getErrorElement();
+        expect(errorContainer).toBeNull();
+    });
 });
diff --git a/src/LiveComponent/doc/index.rst b/src/LiveComponent/doc/index.rst
@@ -471,6 +471,7 @@ The following hooks are available (along with the arguments that are passed):
 * ``disconnect`` args ``(component: Component)``
 * ``render:started`` args ``(html: string, response: BackendResponse, controls: { shouldRender: boolean })``
 * ``render:finished`` args ``(component: Component)``
+* ``response:error`` args ``(backendResponse: BackendResponse, controls: { displayError: boolean })``
 * ``loading.state:started`` args ``(element: HTMLElement, request: BackendRequest)``
 * ``loading.state:finished`` args ``(element: HTMLElement)``
 * ``model:set`` args ``(model: string, value: any, component: Component)``
