feat(web): support lynx.reportError and __SetSourceMapRelease

.changeset/better-wings-peel.md

@@ -0,0 +1,7 @@
+---
+"@lynx-js/web-worker-runtime": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-core": patch
+---
+
+feat: support BTS API `lynx.reportError` && `__SetSourceMapRelease`, now you can use it and handle it in lynx-view error event.

packages/web-platform/web-constants/src/types/NativeApp.ts

@@ -192,4 +192,7 @@ export interface NativeApp {
   getSharedData<T = unknown>(dataKey: string): T | undefined;
 
   i18nResource: I18nResource;
+
+  reportException: (error: Error, _: unknown) => void;
+  __SetSourceMapRelease: (err: Error) => void;
 }

packages/web-platform/web-core/src/uiThread/startBackground.ts

@@ -7,8 +7,6 @@ import {
   type Cloneable,
   type I18nResourceTranslationOptions,
   type InitI18nResources,
-  type NapiModulesCall,
-  type NativeModulesCall,
 } from '@lynx-js/web-constants';
 import type { Rpc } from '@lynx-js/web-worker-rpc';
 import { registerInvokeUIMethodHandler } from './crossThreadHandlers/registerInvokeUIMethodHandler.js';
@@ -19,14 +17,13 @@ import { registerSelectComponentHandler } from './crossThreadHandlers/registerSe
 import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
 import { registerDispatchLynxViewEventHandler } from './crossThreadHandlers/registerDispatchLynxViewEventHandler.js';
 import { registerTriggerElementMethodEndpointHandler } from './crossThreadHandlers/registerTriggerElementMethodEndpointHandler.js';
+import type { StartUIThreadCallbacks } from './startUIThread.js';
+import { registerReportErrorHandler } from './crossThreadHandlers/registerReportErrorHandler.js';
 
 export function startBackground(
   backgroundRpc: Rpc,
   shadowRoot: ShadowRoot,
-  callbacks: {
-    nativeModulesCall: NativeModulesCall;
-    napiModulesCall: NapiModulesCall;
-  },
+  callbacks: StartUIThreadCallbacks,
 ) {
   registerInvokeUIMethodHandler(
     backgroundRpc,
@@ -54,6 +51,7 @@ export function startBackground(
   );
   registerDispatchLynxViewEventHandler(backgroundRpc, shadowRoot);
   registerTriggerElementMethodEndpointHandler(backgroundRpc, shadowRoot);
+  registerReportErrorHandler(backgroundRpc, callbacks.onError);
 
   const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
   const markTiming = backgroundRpc.createCall(markTimingEndpoint);

packages/web-platform/web-tests/shell-project/index.ts

@@ -80,6 +80,19 @@ if (casename) {
         return template;
       };
     }
+    lynxView.addEventListener('error', (e) => {
+      console.log(e);
+      // these two issues have been added to the fix plan and skip for now.
+      if (
+        ![
+          'config-mode-dev-with-all-in-one',
+          'basic-element-x-textarea-input-filter',
+        ].includes(casename)
+      ) {
+        lynxView.setAttribute('style', 'display:none');
+        lynxView.innerHTML = '';
+      }
+    });
   });
   if (casename2) {
     lynxViewTests(lynxView2 => {

packages/web-platform/web-tests/shell-project/lynx-view.ts

@@ -14,11 +14,6 @@ export const lynxViewTests = (callback: (lynxView: LynxView) => void) => {
   lynxView.initData = { mockData: 'mockData' };
   lynxView.setAttribute('height', 'auto');
   lynxView.globalProps = { backgroundColor: 'pink' };
-  lynxView.addEventListener('error', (e) => {
-    console.log(e);
-    lynxView.setAttribute('style', 'display:none');
-    lynxView.innerHTML = '';
-  });
   lynxView.addEventListener('timing', (ev) => {
     // @ts-expect-error
     globalThis.timing = Object.assign(globalThis.timing ?? {}, ev.detail);

packages/web-platform/web-tests/tests/react.spec.ts

@@ -1,3 +1,3 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
@@ -35,7 +35,7 @@
 
 const expectHasText = async (page: Page, text: string) => {
   const hasText = (await page.getByText(text).count()) === 1;
   await expect(hasText).toBe(true);
 };
 
 const expectNoText = async (page: Page, text: string) => {
@@ -120,7 +120,7 @@
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
     test('basic-class-selector', async ({ page }, { title }) => {
       await goto(page, title);
@@ -406,7 +406,7 @@
         await goto(page, title);
         await wait(100);
         const target = page.locator('#target');
         await target.click();
         await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
       },
     );
@@ -668,7 +668,7 @@
         document.querySelector('lynx-view')!.remove();
       });
       await wait(50);
       expect(message).toContain('fin');
       expect(page.workers().length).toStrictEqual(1);
     });
 
@@ -711,10 +711,11 @@
         const event = await msg.args()[0]?.evaluate((e) => {
           return {
             type: e.type,
+            message: e.detail?.error?.message,
             release: e.detail?.release,
           };
         });
-        if (!event || event.type !== 'error') {
+        if (!event || event.type !== 'error' || event.message !== 'error') {
           return;
         }
         if (
@@ -727,6 +728,63 @@
       await wait(500);
       expect(success).toBe(true);
     });
+    test('api-set-release-bts', async ({ page }, { title }) => {
+      let success = false;
+      await page.on('console', async (msg) => {
+        const event = await msg.args()[0]?.evaluate((e) => {
+          return {
+            type: e.type,
+            message: e.detail?.error?.message,
+            release: e.detail?.release,
+          };
+        });
+        if (
+          !event || event.type !== 'error'
+          || event.message !== 'loadCard failed Error: error'
+        ) {
+          return;
+        }
+        if (
+          typeof event.release === 'string' && event.release === '111'
+        ) {
+          success = true;
+        }
+      });
+      await goto(page, title);
+      await wait(500);
+      expect(success).toBe(true);
+    });
+    test('api-report-error', async ({ page }, { title }) => {
+      let offset = false;
+      await page.on('console', async (msg) => {
+        const event = await msg.args()[0]?.evaluate((e) => {
+          return {
+            type: e.type,
+            error: e.detail?.error,
+            offset: e.detail?.sourceMap?.offset,
+          };
+        });
+        if (!event || event.type !== 'error') {
+          return;
+        }
+        if (
+          typeof event.offset.line === 'number' && event.offset.line === 2
+          && typeof event.offset.col === 'number' && event.offset.col === 0
+          && event.error.message === 'Error: foo'
+          && typeof event.error.stack === 'string'
+          && event.error.stack !== ''
+        ) {
+          offset = true;
+        }
+      });
+      await goto(page, title);
+      await wait(200);
+      await page.locator('#target').click();
+      await wait(500);
+      const target = await page.locator('lynx-view');
+      await expect(target).toHaveCSS('display', 'none');
+      await expect(offset).toBe(true);
+    });
 
     test('api-preheat', async ({ page }, { title }) => {
       await goto(page, title);
@@ -1317,9 +1375,9 @@
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
 
     test(
@@ -2371,7 +2429,7 @@
             inputDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
       test(
@@ -3700,7 +3758,7 @@
             textareaDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
 

packages/web-platform/web-tests/tests/react/api-report-error/index.jsx

@@ -0,0 +1,24 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root, useEffect, useState } from '@lynx-js/react';
+
+function App() {
+  const handleTap = () => {
+    lynx.reportError('foo');
+  };
+
+  return (
+    <view
+      id='target'
+      style={{
+        height: '100px',
+        width: '100px',
+        background: 'red',
+      }}
+      bindtap={handleTap}
+    />
+  );
+}
+
+root.render(<App></App>);

packages/web-platform/web-tests/tests/react/api-set-release-bts/index.jsx

@@ -0,0 +1,15 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+
+function App() {
+  if (!__MAIN_THREAD__) {
+    const err = new Error('111');
+    err.name = 'LynxGetSourceMapReleaseError';
+    lynxCoreInject.tt.setSourceMapRelease(err);
+  }
+  throw new Error('error');
+}
+
+root.render(<App></App>);

packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/createNativeApp.ts

@@ -14,6 +14,7 @@ import {
   systemInfo,
   type BackMainThreadContextConfig,
   I18nResource,
+  reportErrorEndpoint,
 } from '@lynx-js/web-constants';
 import { createInvokeUIMethod } from './crossThreadHandlers/createInvokeUIMethod.js';
 import { registerPublicComponentEventHandler } from './crossThreadHandlers/registerPublicComponentEventHandler.js';
@@ -61,6 +62,7 @@ export async function createNativeApp(
     selectComponentEndpoint,
     3,
   );
+  const reportError = uiThreadRpc.createCall(reportErrorEndpoint);
   const createBundleInitReturnObj = (): BundleInitReturnObj => {
     const entry = (globalThis.module as LynxJSModule).exports;
     return {
@@ -91,6 +93,7 @@ export async function createNativeApp(
     };
   };
   const i18nResource = new I18nResource();
+  let release = '';
   const nativeApp: NativeApp = {
     id: (nativeAppCount++).toString(),
     ...performanceApis,
@@ -167,6 +170,8 @@ export async function createNativeApp(
       return sharedData[dataKey] as T | undefined;
     },
     i18nResource,
+    reportException: (err: Error, _: unknown) => reportError(err, _, release),
+    __SetSourceMapRelease: (err: Error) => release = err.message,
   };
   return nativeApp;
 }