notifyFailure doesn’t show the custom message being passed

[JohanKlijn]

In my app manifest I have specified "showLoadingIndicator": true and implemented the following code (just an example to explain the issue):

import { useEffect, useState } from "react";
import { app } from "@microsoft/teams-js";

export default function Tab() {
  const [error, setError] = useState<string>();
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {

    const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

    const initializeApp = async () => {
      app.initialize()
      .then(() => {
        setLoading(false)
      })
      .catch((reason) =>{
        setError(reason)
      })
    }    

    wait(3 * 1000).then(() => {
      initializeApp()
      .then(() => {
        console.log({"isInitialized" : app.isInitialized()})
        app.notifyFailure({reason: app.FailedReason.Other, message: "My custom failure message."}); 
      })     
    })

  }, []);

  return (
    <div >
      My Teams Tab App
    </div>
  );
}

The example just calls app.notifyFailure after 3 seconds. I would expect the message “My custom failure message.” is displayed, but I am always getting the message “There was a problem reaching this app”. For us this message is to generic and doesn’t explain what’s going on, so we want to provide more/different information.

According to this page https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-tab-pages/content-page?tabs=teamsjs-v2#show-a-native-loading-indicator, it should be possible to display a custom message (“If your application doesn't load, you can call app.notifyFailure({reason: app.FailedReason.Timeout, message: "failure message"});”)

I created a simple app, using Teams Toolkit, to show this behavior, see https://github.com/JohanKlijn/NotifyFailureIssue

Regards,

Johan

[ghost]

Hi JohanKlijn! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

[sayali-MSFT]

@JohanKlijn - Thanks for reporting your issue. We will investigation this issue and get back to you.

[sayali-MSFT]

@JohanKlijn -Could you please try updating Teams Desktop client and check it again. Error which you have share does not contains Teams specific errors, it's showing generic error from .js file. Could you please share more specific error via cleaning these errors and opening bot again.

[JohanKlijn]

It‘s not a problem in the desktop version, because it’s also happening in the web version of Teams.

The app is not a bot, but a Teams Tab App. You can see and simulate the issue, using the example in my github, see https://github.com/JohanKlijn/NotifyFailureIssue.

You are saying: “Error which you have share does not contains Teams specific errors, it's showing generic error from .js file.”. That’s indeed the problem, it’s always showing the generic error, even I pass a custom message.

[sayali-MSFT]

@JohanKlijn -We are not able to repro the error, Could you please share the console error so that we can investigate further? You can access the DevTools for console error using below doc- https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/developer-tools#access-devtools-on-the-desktop Thanks!

[JohanKlijn]

@sayali-MSFT : the console does not display any error. But I created a video which shows the issue (and also contains the console). Link video: https://github.com/JohanKlijn/NotifyFailureIssue/raw/main/Video/Video%20Explaining%20issue.mp4

[sayali-MSFT]

@JohanKlijn -As per document, It's mandatory step, have you doing this-call app.notifySuccess() to notify Teams that your app has successfully loaded. Reference doc-https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-tab-pages/content-page?tabs=teamsjs-v2#show-a-native-loading-indicator

Here is Code snippest for refernce-

 const { PreMeeting, SidePanel } = Constants.Surfaces;
        this.getContext()
            .then((context = {}) => {
                const frameContext = context.page.frameContext || "";
                if ([PreMeeting, SidePanel].includes(frameContext)) {
                    this.setState({
                        teamsContext: context,
                    })
                    microsoftTeams.app.notifySuccess();
                    return;
                }
                return Promise.reject("Error: Please make sure to run the app within teams as a tab app");
            })
            .catch(msg => {
                microsoftTeams.app.notifyFailure(msg);
                this.setState({
                    error: {
                        status: true,
                        msg,
                    }
                })
            });
    }

[JohanKlijn]

@sayali-MSFT : When I read the documentation, I read that you should call app. notifySuccess when you app successfully loads and app. notifyFailure when you app doesn’t successfully load. I also tested first calling app. notifySuccess and then app. notifyFailure but than not dialog is displayed at all.

Also looking at the code snippet you provided the app.notifySuccess is in the "then" of the promise and the app. notifyFailure in the "catch" of the promise, so only calling app. notifyFailure when a failure happens. Did you test the example I provided and could you reproduce it?

[sayali-MSFT]

@JohanKlijn -Yes, trying to set up the sample but got the errors so sort out all the errors then try to reproduce.

[AE-MS]

Hi @JohanKlijn,

Thanks for providing the thorough description of the problem and the code sample. While it is completely reasonable for you to have expected the string provided in the message property to be displayed in the error UI, it is in fact the case that the code which handles displaying the error UI just ignores the message property. Clearly this is an error that we need to fix. Sorry that you had to go through all of this rigmarole to discover that.

We will also update the current documentation to explicitly indicate that the message property is currently ignored to ensure the usage (or lack thereof) is clearer.

[ChetanSharma-msft]

Hello @JohanKlijn - Doc has updated now. We are closing this issue for now, please feel free to reopen it, if required.

[ghost]

Tell us about your experience!

Hi JohanKlijn! This issue is closed in our system. We would like your feedback on your experience with our support team and Platform.

Best regards, Teams Platform

[JohanKlijn]

@ChetanSharma-msft: to me it sounds strange that the issue is closed, because the documentation is update. Because the bug still exist in the api, because if you look at the api in code, it still looks like you can provide a message (which should be the case, because you want to display meaningful messages to a user).

You ask me to tell you my experience.....It's quite bad, because:

1. I cost me a lot a time to make the bug clear to you (even tough I provided a clear sample from the beginning).
2. Now the issue is closed, but the bug still exist.

[ChetanSharma-msft]

Hello @JohanKlijn - Sorry my bad. I will check with engineering team regarding this and get back to you.

[ChetanSharma-msft]

Re-opening this issue for further tracking it.

[ghost]

Hi JohanKlijn! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

[Wajeed-msft]

@JohanKlijn - This behavior is currently by design. The app error screen is not customizable. Making it customizable by app developers would be a new feature ask. If the error is not critical, we recommend that you call notifyExpectedFailure instead and display your own user-friendly error message: https://learn.microsoft.com/en-us/javascript/api/@microsoft/teams-js/appinitialization?view=msteams-client-js-latest#@microsoft-teams-js-appinitialization-notifyexpectedfailure

[Wajeed-msft]

Closing this issue from the tracking. To get notified when feature is available in the future, please configure RSS feed.

[microsoft-github-policy-service[bot]]

Tell us about your experience!

Hi JohanKlijn! We have closed this issue in our system, but we would love to hear your feedback. To let us know how we did, simply use one of the following emoji icons: :thumbsup: for resolved, :thumbsdown: for unresolved, or :heart: for a great experience on this message. Please use the link for more detailed feedback.

Best regards, Teams Platform