Skip to main content

Good morning everyone

I am developing v2 version of Kobi application which uses both web-idk and REST API. 

Many times in an unpredictable way the click that opens the app panel, in the left vertical bar, does not work. The console reports this error.

4vendorSentry~applica.core~auth.8b07d16f64431856.js:1 Error: Cannot update the app, because the corresponding client ID 3458764528362411636 wasn't found.
    at e.destroyIframeController (cmn~BoardSdk.380163e792da4247.js:1:285600)
    at l (cmn~BoardSdk.380163e792da4247.js:1:245504)
    at a.execute (VM12:70:174269)
    at s.dispatch (VM12:70:176429)
    at e.destroyPrevScope (cmn~BoardUI.desktop~BoardUI.mobile~BoardUI.webview.c82f802eef76553b.js:1:538073)
    at e.compileContent (cmn~BoardUI.desktop~BoardUI.mobile~BoardUI.webview.c82f802eef76553b.js:1:537236)
    at e.setScope (cmn~BoardUI.desktop~BoardUI.mobile~BoardUI.webview.c82f802eef76553b.js:1:535958)
    at controller (cmn~BoardUI.desktop~BoardUI.mobile~BoardUI.webview.c82f802eef76553b.js:1:453549)
    at Object.invoke (cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:26635)
    at cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:60701
    at ot (cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:51596)
    at cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:45148
    at cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:44361
    at cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:47569
    at r (cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:45510)
    at m (cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:50768)
    at cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:152813
    at l.$digest (cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:101780)
    at l.$apply (cmn~Board~angular.desktop~angular.webview.806952765e6bd029.js:2:103460)
    at e.safeApply (cmn~angular.desktop~angular.webview.edbcee55d7e24d86.js:2:44966)
    at l.<anonymous> (cmn~angular.desktop~angular.webview.edbcee55d7e24d86.js:2:45102)
    at I (cmn~applica.core~auth~root.store.a30888f1a572f1e6.js:1:526)
    at m (cmn~applica.core~auth~root.store.a30888f1a572f1e6.js:1:801)
    at R (cmn~applica.core~auth~root.store.a30888f1a572f1e6.js:1:691) undefined

 

The code that activates the panel, copied from the examples, is very simple; it is shown below .

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>"°'°Kobi"</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/mirotone@2.0.0/dist/styles.css"
    />
    <!-- Miro SDK -->
    <script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript"> 
      miro.board.ui.on('icon:click', () => {
        miro.board.getUserInfo()
        .then((userInfo)=>{
          console.log('Starting °\'°Kobi ... ', userInfo)
          miro.board.ui.openPanel({url:'/miro/main/'+ userInfo.id});
        })
      });
    </script>
  </body>
</html>

Can you give me some insight? Thank you in advance.

Alberto

@Alberto Giretti - I am not a programmer by trade but understand a little bit and must ask, what does the degree symbol do here?

console.log('Starting °\'°Kobi ... ', userInfo)

 

Is the intended output: °’°Kobi … ?

yap it is the logo :)

Hey @Alberto Giretti,

Thanks for reaching out about it, happy to help take a closer look into it for you!

As a first step, I noticed that you’re calling the board methods from the SDK directly from your HTML file it appears. I recommend calling this from it’s own src file. For example, include just the basics in your index.html and reference the SDK like this in another file, like `/src/main.js` (or whatever you’re using):

<script type="module" src="/src/main.tsx"></script>

And then execute the onClick/openModal methods from our SDK in that file directly—example main.js:

const { board } = window.miro;

async function init() {
  board.ui.on("icon:click", async () => {
    await board.ui.openPanel({ url: "app.html" });
  });
}

// Initialize board
init();

export {};

Have you given this a try? 😀

Let me know—thanks!
Will

Dear Bill

thank you for the responsive reply. Also sorry for my late reply.

I have changed my code according to your advice but the situation has not changed. I have done more extensive testing and the situation appears as follows:

the problems happen only with browsers. I tested the browsers Safari and Chrome in Mac environment and Edge in Windows environment. The Miro app does not have this problem in both operating systems.
The problem arises after one or two board openings from the miro dashboard: 

  • login to Miro
  • open board
  • open kobi app panel
  • close board (back to Miro dashboard)
  • open board
  • open kobi app panel → usually at this point the app panel doesn’t show up and the above error appears in the browser console

Finally, I remind you that Kobi application uses REST API.

The SDK panel is used to autenticate the user and to send board data to the app backend.

Hi @Alberto Giretti,

 

Thanks for raising this. I am able to reproduce the issue. I raised it to our engineering team. I will keep you informed when I hear back from them.

Reply


Terms & Conditions