Fresh service app does not load once published

I have developed custom freshservice app using react. I have published it for the first time to test the real experience.
This app contain full page app, ticket sidebar app and 2 models.
full page app part is working without any issue.
but ticket sidebar part is not working. it show below app loading page. I have tried refreshing the page several time but seems no change. when I do the development it showed this page sometimes. but when I refresh few time it start to work. any idea how to fix this. there is no any error message.

image

@Nayana_Priyankara - This seems like a sample app code you are trying to run on Freshservice.

Can you share the sample code as a zip on this thread via upload btn? ( You can remove all the details and keep the issue reproducible enough)

Hi @Nayana_Priyankara

Is this an react app?

If so, we have also the same problem with one of our apps.

1 Like

this is not a sample app. I just did a test publish only. Is it ok if I share app.js only.

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route,useNavigate } from "react-router-dom";
import './App.css';
import Layout from './components/Layout';
import Lookup from './components/Shared/lookup';
import TicketExtension from './components/TicketExtension/TicketExtension';
const App = () => {

  const [loaded, setLoaded] = useState(false);
  const [child, setChild] = useState(<h3>App is loading</h3>)
  // const navigate = useNavigate();
  // let fsClient;
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://static.freshdev.io/fdk/2.0/assets/fresh_client.js';
    script.addEventListener('load', () => setLoaded(true));
    script.defer = true;
    document.head.appendChild(script);
  }, []);

  useEffect(() => {
    if (!loaded) return
    app.initialized().then((client) => {
      client.instance.context().then(function (data) {
				let location = data.location;
        let InstanceData = data.data
        let ModalID = '';
        if (InstanceData && InstanceData.hasOwnProperty('modalID')){
          ModalID = InstanceData.modalID
        }
				if (location === "ticket_sidebar" || location === "new_ticket_sidebar") {
          console.log("ticket_sidebar")
					setChild(<TicketExtension client={client} />);
				}
        if (location === "full_page_app") {
          console.log("full_page_app")
					setChild(<Layout client={client} />);
				}
				if (location === "overlay" && ModalID === 'lookup') {
          let entity = InstanceData.entity
          setChild(<Lookup client={client} entity={entity} />);
        }
			});
    })
  }, [loaded])



  return (
    <div>
      {child}
    </div>
  )
}

export default App;

Can you try changing both useEffect hooks to useLayoutEffect and see if it works?

Src

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.