Web Chat < 4.6.0: The error message was incorrectly showing "Super expression must either be null or a function". Instead, it should say, speech recognition/synthesis cannot be enabled because microphone access is denied.
Web Chat >= 4.6.0: We have fixed the error message.
The following environment does not support microphone access and speech should not be enabled.
Mobile iOS apps
Hosting in <IFRAME> on Chrome/Edge/Firefox without Feature Policy set
Hosting on insecure HTTP
IE11
Receive E401 when running npm install botframework-webchat on or after 4.9.2
On >= 4.9.2, running npm install botframework-webchat results in E401.
This happen if you are using a custom registry which require authentication. And you authenticate using a per-project .npmrc file.
Background
npx will pick up the registry on ./.npmrc, but it can't pick up the token there. It can only pick up the token at ~/.npmrc.
Workaround
Instead of authenticating on ./.npmrc file (local project .npmrc), please authenticate against ~/.npmrc (per-user .npmrc file).
The actual location of ~/.npmrc can be found by running npm config get userconfig.
The custom activity renderer will pass multiple arguments. When sending the arguments downstream, please make sure all the arguments are sent by using rest operators. For example:
Because IFRAME in Chrome put restrictions on microphone unless lifted, the feature is called Feature Policy. And this new feature is not implemented in current version of Edge, thus, it's not blocked.
[ ] Why speech recognition works in other browsers but not Firefox
You should see HTTP 400 in Network tab when speech recognition is making the call to wss://*.stt.speech.microsoft.com
Firefox defaulted language to en instead of en-US (and fr instead of fr-FR). Cognitive Services did not recognize this type of language, thus it return HTTP errors when it trying to recognize using en
You should explicitly set the language when instantiating Web Chat so speech recognition will use the defined language other than en or fr
[ ] Why speech recognition is not working in Angular on Web Chat 4.6.0+
See #2957
Angular use zone.js
zone.js polyfilled Object.defineProperties regardless the browser natively implemented it or not
[ ] Why single quote (') become 3 diamond-question marks (a.k.a. tofu) instead?
Probably you are using Web Chat via NPM
Web Chat use Markdown-It to render most activities
Markdown-It have smart apostrophe, which turns single quote (') into apostrophe (’)
Your bundler which bundle Web Chat, output UTF-8
Your web server did not specify charset when serving your app bundle
MIME type of text/javascript is not correct
The correct one is text/javascript; charset=utf-8
Thus, the browser use codepage from the webpage, probably CP-437 (ASCII)
Apostrophe in UTF-8 is E2 80 99 (hex)
Thus, when rendered in ASCII, it become 3 tofu
To fix, apply one of the following:
On your web server, set the MIME type for your bundle file to text/javascript; charset=utf-8
On your Webpack configuration, set the Terser configuration output.ascii_only to true
This will turn E2 80 99 (hex) into \u00E2\u0080\u0099 in your JS file
[ ] Why it took > 30 seconds to see the first message from the bot?
Open F12 dev tools and click on "Network" tab
Click the HTTP traffic with URL /stream?, which is the Web Socket connection to Azure Bot Services
It is normal to see the status is "Pending", because the Web Socket connection is still open. If this turns into a number, that means the Web Socket connection is closed
On the "Preview" tab on the right hand side, check if it show any responses from the server
If only request but no response, that means the browser is connecting to the Azure Bot Services
If there is response, that means the connection to ABS is ready, you should check your bot
Possible reasons if taking too much time to connect to ABS:
The browser is trying to connect to directline.botframework.com so many times that the Web Socket connection get queued (connection pooling and browser-side DDoS protection)
Some observations: when running Fiddler, everything works fine
Network is slow
[ ] Why it took > 30s to load webchat-es5.js in a browser?
If you are loading the file and rendering it on the screen, it will be slow because the file is large and is single line
You should use cURL to verify the asset instead, e.g. cURL -l -L -o nul -H "Accept: *" https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js
FAQs
Web Chat secret / token management
The following link provides several examples on token management: Web Chat secret management
Receive "TypeError: Super expression must either be null or a function" on
< 4.6.0
In short, speech is being enabled in an environment that denied access to microphone.
For details, please read #2855.
Web Chat < 4.6.0: The error message was incorrectly showing "Super expression must either be null or a function". Instead, it should say, speech recognition/synthesis cannot be enabled because microphone access is denied.
Web Chat >= 4.6.0: We have fixed the error message.
The following environment does not support microphone access and speech should not be enabled.
<IFRAME>
on Chrome/Edge/Firefox without Feature Policy setReceive
E401
when runningnpm install botframework-webchat
on or after4.9.2
On >= 4.9.2, running
npm install botframework-webchat
results inE401
.This happen if you are using a custom registry which require authentication. And you authenticate using a per-project
.npmrc
file.Background
npx
will pick up the registry on./.npmrc
, but it can't pick up the token there. It can only pick up the token at~/.npmrc
.Workaround
Instead of authenticating on
./.npmrc
file (local project.npmrc
), please authenticate against~/.npmrc
(per-user.npmrc
file).The actual location of
~/.npmrc
can be found by runningnpm config get userconfig
.Related issues
There is an issue filed to Azure DevOps about inconsistent handling of
.npmrc
file, https://github.com/microsoft/azure-pipelines-tasks/issues/13265, it usually lead to this issue.Update activity renderer
The custom activity renderer will pass multiple arguments. When sending the arguments downstream, please make sure all the arguments are sent by using rest operators. For example:
Questions need to formalize into a section
Do we want to provide a frequently asked questions document on this repo? Team, please add to the list below of topics that would be added to the FAQ
create-react-app
or other NPM-based appindex-es5.ts
botframework-webchat/ie11
to load the polyfill (#2511)SpeechGrammarList.phrases
to an array of stringswss://*.stt.speech.microsoft.com
en
instead ofen-US
(andfr
instead offr-FR
). Cognitive Services did not recognize this type of language, thus it return HTTP errors when it trying to recognize usingen
en
orfr
zone.js
zone.js
polyfilledObject.defineProperties
regardless the browser natively implemented it or notSymbol
-based key into an objectSymbol.iterator
, and it failed to insert into an object to make it iterableObject.defineProperties
so the app no longer use the flawed implementationDate
object<IFRAME>
to embed Web Chat, before putting it on Dynamics 365 Portal<IFRAME>
is not a viable solution, please submit a support ticket to Dynamics 365 Portal teamABC\nDEF
is on the same line? AndABC\n\n\nDEF
only have a single line break between them?<p>ABC DEF</p>
and<p>ABC</p><p>DEF</p>
respectivelytextFormat
toplain
on the bot response.js
filetext/javascript
is not correcttext/javascript; charset=utf-8
E2 80 99
(hex)text/javascript; charset=utf-8
output.ascii_only
to trueE2 80 99
(hex) into\u00E2\u0080\u0099
in your JS file/stream?
, which is the Web Socket connection to Azure Bot Serviceswebchat-es5.js
in a browser?cURL -l -L -o nul -H "Accept: *" https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js