Atlassian Connect Add-on is not responding but works fine

Hey Community,

I got a little problem with dynamic content macros using express (SpringBoot is working fine).

Every time I insert a macro in my confluence page it first says ‘Loading add-on…’ and after a few seconds it changes to ‘Add-on is not responding. Wait or cancel?’ But the functionality of the macro is working fine.

I read that I have to include all.js, but since I’m working with the express ‘template’ from the tutorial, this is already the case.
There are also no errors visible in my web-console of chrome.

Here the code I’m using:

My atlassian-connect.json:

{
    "key": "example-add-on-using-atlassian-connect-express"
    , "name": "Atlassian Connect Express Add-on"
    , "description": "This is an example Confluence add-on using atlassian connect express. "
    , "baseUrl": "https://ca79aeec.ngrok.io"
    , "authentication": {
        "type": "jwt"
    }
    , "lifecycle": {
        "installed": "/installed"
    }
    , "scopes": [
        "READ"
        , "WRITE"
        , "DELETE"
    ]
    , "modules": {
        "dynamicContentMacros": [
          {
            "key": "living-doc-2-date-time-dynamic-content-macro-express"
            , "name": {
                "value": "LD2: Express Dynamic DateTime Macro"
            }
            , "method": "Get"
            , "url": "/express/macro/dynamic/date-time"
            , "description": {
                "value": "Displays the current time"
            }
            ,"conditions": [{
                "condition": "user_is_logged_in"
              }]
          }
       ]
    }
}

My route.js for the dynamic macro

module.exports = function (app, addon) {

      // DateTime Macro: displays the current time
      app.get('/express/macro/dynamic/date-time', addon.authenticate(), function(req, res) {
        let hbs = require("express-hbs")
        // Registers a handlebar helper to insert javascript code and to make the macro dynamic --> time will be refreshed every second
        hbs.registerHelper('dateTime', function() {
          return new hbs.SafeString(
            "<script>" +
              "setInterval(myTimer, 1000);" +
              "function myTimer() {" +
                "var d = new Date();" +
                "document.getElementById('localDate').innerHTML = 'DATE: ' + d.toDateString();" +
                "document.getElementById('localTime').innerHTML = 'TIME: ' + d.toLocaleTimeString();" +
              "}" +
            "</script>"
          );
        })
        res.render('dynamic-macro-date-time')
      })
}

The Handlebars:
Layout.hbs:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="ap-local-base-url" content="{{localBaseUrl}}">
  <title>{{title}}</title>
  <link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui.css" media="all">
  <link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui-experimental.css" media="all">
  <!--[if IE 9]><link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui-ie9.css" media="all"><![endif]-->
  <link rel="stylesheet" href="{{furl '/css/addon.css'}}" type="text/css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-soy.js" type="text/javascript"></script>
  <script src="//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui.js" type="text/javascript"></script>
  <script src="//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-datepicker.js"></script>
  <script src="//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-experimental.js"></script>
  <script src="{{hostScriptUrl}}" type="text/javascript"></script>
</head>
<body class="aui-page-hybrid">
  <section id="content" role="main">
    {{{body}}}
  </section>
  <script src="{{furl '/js/addon.js'}}"></script>
</body>
</html>

The dynamic-macro-date-time.hbs:

<p id="localDate">The Local date</p>
<p id="localTime">Current Time</p>
{{dateTime}}

The `hostScriptUrl` in the `layout.hbs` contains the following: `https://livingdocconnecttesting.atlassian.net/wiki/atlassian-connect/all-debug.js` Still I get the 'Add-on is not responding' error.
Does anyone know where I did the mistake and explain it to me? And does Confluence say it's not responding but displays a functional macro at the same time?

The Project is open source on GitHub: https://github.com/testIT-LivingDoc/research-atlassian-connect
Branch: greenMountain
Folder: atlassian-connect-expressexpressPrototype

Hi,

Can you try put {{!< layout}} at top of file dynamic-macro-date-time.hbs

1 Like

Hi,

oh yeah I totally forgot to insert the {{!< layout}} in all the hbs files.

Okay I put it at top of the .hbs, but it still doesn’t work.

But know I can see some errors in my chrome dev-tool console
Here’s a screenshot:

Maybe you got another good idea. :slight_smile:

Hi,
Mostly 404 error . Can you check if your route is correct.
Try without the hbs helper first . To see if it work.

2 Likes