Crash app when back to the previous page

[thangdev]

System Information
OS: Ubuntu 20.04 LTS
Browser: Chrome Version 89.0.4389.82

Context
Plugin was implemented in Reactjs v16.13.1
I set the appId="" (blank string) and the module still works well

Steps to replicate
When the page is loaded, the messenger work well but when I click go back button on browser to navigate to the previous page of my web, it crashes my web

[conganwoz]

while wait for feedback you can try: https://levelup.gitconnected.com/integrating-facebook-customer-chat-into-a-react-js-app-5b7c21343048 :))

[thangdev]

while wait for feedback you can try: https://levelup.gitconnected.com/integrating-facebook-customer-chat-into-a-react-js-app-5b7c21343048 :))

Hi @AnLuubk , Did you get the error like me ?

[conganwoz]

i got both 2 error you just created today and i just hotfix by the link i just comment previous. May be facebook have new update that package works incorrectly :(

[thangdev]

@AnLuubk , Hi, thank you so much, I am follow this solution you mentioned above.
But I am stuck at import { ConfigContext } from '../hooks';
I don't understand this line. What is the ConfigContext ? and what is inside hooks file ?
Could you please send me the detail example your code ?
Thank you so much !!!

[conganwoz]

you dont need to do the same just create component like this:

import React from 'react';
import { fb } from '../../utils/thirdPartyAPi';


export default class MessengerCustomerChat extends React.PureComponent {
  componentDidMount() {
    this.timeout = setTimeout(() => {
      fb(FB => this.timeout && FB.XFBML.parse());
    }, 2000);
  }

  componentWillUnmount() {
    clearTimeout(this.timeout);
    delete this.timeout;
  }

  render() {
    return <div className="fb-customerchat" attribution="setup_tool" page_id="YOUR_PAGE_ID"/>
  }
}

[khaphannm]

@AnLuubk , Hi, thank you so much, I am follow this solution you mentioned above.
But I am stuck at import { ConfigContext } from '../hooks';
I don't understand this line. What is the ConfigContext ? and what is inside hooks folder ?
Could you please send me the detail example your code ?
Thank you so much !!!

The ConfigContext just think it is a place to get your PageID and AppID constant, he manage those information using React context

[conganwoz]

@AnLuubk , Hi, thank you so much, I am follow this solution you mentioned above.
But I am stuck at import { ConfigContext } from '../hooks';
I don't understand this line. What is the ConfigContext ? and what is inside hooks folder ?
Could you please send me the detail example your code ?
Thank you so much !!!

The ConfigContext just think it is a place to get your PageID and AppID constant, he manage those information using React context

yes! for hiding data :)

[thangdev]

Hi, @AnLuubk , @khaphannm I am implementing it but now I got an error like this:

I think the reason is window.config.facebook is null, how can I fix this ?
And do we really need a facebook appId variable here ? Thank you!

[conganwoz]

Hi, @AnLuubk , @khaphannm I am implementing it but now I got an error like this:

I think the reason is window.config.facebook is null, how can I fix this ?
And do we really need a facebook appId variable here ? Thank you!

you just put appId to direct value or empty string: "". facebook chat plugin does not need appId (i think)

window.FB.init({
          appId: 'YOUR_APP_ID_OR_EMPTY_STRING',
          autoLogAppEvents: true,
          status: true,
          cookie: true,
          xfbml: false,
          version: 'v10.0',
        });

[khaphannm]

Hi @thangdev
I feel the approach in the link is not quite convenient, so you can copy the source file as yours
https://github.com/Yoctol/react-messenger-customer-chat/blob/master/src/MessengerCustomerChat.js

Then just modify a bit like this (Add window.FB.XFBML.parse())

window.fbAsyncInit = () => {
      window.FB.init({
        appId,
        autoLogAppEvents,
        xfbml,
        version: `v${version}`,
      });

      this.setState({ fbLoaded: true });
      // Add this line
      window.FB.XFBML.parse();
 };

[thangdev]

Hi @khaphannm,
Thanks for your support. Yesterday, I tried set the appId to empty string as @AnLuubk said and it works well now :))

[thangdev]

@khaphannm The only problem now is the messenger doesn't hide when I click to navigate to other page, it's still there.
I load this component only at specific child component but It still appears in all pages

[khaphannm]

Yes, you can choose which approach is easier for you, because this library is more convenient for controlling the props, when you need to custom your plugin.

You can have a look this example, my component, and everything is just in one place, to set up your own plugin

<MessengerCustomerChat
           pageId={process.env.GATSBY_PAGE_ID}
           appId={process.env.GATSBY_APP_ID}
           version={process.env.GATSBY_MESSENGER_PLUGIN_VERSION}
           loggedInGreeting={process.env.GATSBY_MESSENGER_MSG_IN}
           loggedOutGreeting={process.env.GATSBY_MESSENGER_MSG_OUT}
           htmlRef={window.location.pathname}
           themeColor={secondaryMain}
           language="vi_VN"
           greetingDialogDisplay="show"
           greetingDialogDelay={parseInt(process.env.GATSBY_MESSENGER_PLUGIN_DELAY)}
           shouldShowDialog
         />

[conganwoz]

@AnLuubk The only problem now is the messenger doesn't hide when I click to navigate to other page, it's still there.
I load this component only at specific child component but It still appears in all pages

you can check the pathname if this is the route you want to render Messenger

[conganwoz]

Or you can try method show and hide like this: https://stackoverflow.com/a/64451277

[conganwoz]

Yes, you can choose which approach is easier for you, because this library is more convenient for controlling the props, when you need to custom your plugin.

You can have a look this example, my component, and everything is just in one place, to set up your own plugin

<MessengerCustomerChat
           pageId={process.env.GATSBY_PAGE_ID}
           appId={process.env.GATSBY_APP_ID}
           version={process.env.GATSBY_MESSENGER_PLUGIN_VERSION}
           loggedInGreeting={process.env.GATSBY_MESSENGER_MSG_IN}
           loggedOutGreeting={process.env.GATSBY_MESSENGER_MSG_OUT}
           htmlRef={window.location.pathname}
           themeColor={secondaryMain}
           language="vi_VN"
           greetingDialogDisplay="show"
           greetingDialogDelay={parseInt(process.env.GATSBY_MESSENGER_PLUGIN_DELAY)}
           shouldShowDialog
         />

this is better code but im not sure how the code deal with server render, it may crash before come to client. if it work can you explain more?? :)

[khaphannm]

Yes, you can choose which approach is easier for you, because this library is more convenient for controlling the props, when you need to custom your plugin.
You can have a look this example, my component, and everything is just in one place, to set up your own plugin

<MessengerCustomerChat
           pageId={process.env.GATSBY_PAGE_ID}
           appId={process.env.GATSBY_APP_ID}
           version={process.env.GATSBY_MESSENGER_PLUGIN_VERSION}
           loggedInGreeting={process.env.GATSBY_MESSENGER_MSG_IN}
           loggedOutGreeting={process.env.GATSBY_MESSENGER_MSG_OUT}
           htmlRef={window.location.pathname}
           themeColor={secondaryMain}
           language="vi_VN"
           greetingDialogDisplay="show"
           greetingDialogDelay={parseInt(process.env.GATSBY_MESSENGER_PLUGIN_DELAY)}
           shouldShowDialog
         />

this is better code but im not sure how the code deal with server render, it may crash before come to client. if it work can you explain more?? :)

Server side rendering will return all needed content for u when receiving request, then cannot crash
If one of the props is need to get from server, you need further checking the existence of it before render MessengerCustomerChat component

[conganwoz]

sure i think i still have to check if it is client render for script to load. Thank you for your help. I will refactor my code later!