React/ActiveReportsJS/.NET Core - Cannot read property 'replace' of undefined

React/ActiveReportsJS/.NET Core - Cannot read property 'replace' of undefined

Posted by: david on 24 March 2020, 6:56 am EST

• 

  david

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 March 2020, 6:56 am EST - Updated 2 October 2022, 11:18 pm EST

  I’ve run into an issue getting reports to work with the report viewer and a React/.Net Core stack.

  In our React component, we call:

   let viewer = GrapeCity.ActiveReports.JSViewer.create({
              element: '#client-report',
              reportID: 'clients.rdlx',
              reportService: {
                  url: url,
                  securityToken: authHeader().Authorization
              }
  
          });
          
          viewer.openReport();
  

  Everything appears to be returned to the browser correctly:

  

  2472×2466 586 KB

  Json:
  
  

  

  1096×568 59.2 KB

  The core logs show that the middleware handed it correctly:

  info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
        Request starting HTTP/1.1 OPTIONS https://localhost:44313/api/reporting/reports/clients.rdlx/info  
  dbug: Microsoft.AspNetCore.Routing.RouteConstraintMatcher[1]
        Route value '(null)' with key 'httpMethod' did not match the constraint 'Microsoft.AspNetCore.Routing.Constraints.HttpMethodRouteConstraint'
  dbug: Microsoft.AspNetCore.Builder.RouterMiddleware[1]
        Request did not match any routes
  dbug: Microsoft.AspNetCore.Routing.Matching.DfaMatcher[1000]
        No candidates found for the request path '/api/reporting/reports/clients.rdlx/info'
  dbug: Microsoft.AspNetCore.Routing.EndpointRoutingMiddleware[2]
        Request did not match any endpoints
  dbug: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[2]
        The request has an origin header: 'http://localhost:3002'.
  info: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[4]
        CORS policy execution successful.
  dbug: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[1]
        The request is a preflight request.
  dbug: Microsoft.AspNetCore.Server.Kestrel[9]
        Connection id "0HLUG52PPNMI2" completed keep alive response.
  info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
        Request finished in 48.6984ms 204 
  info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
        Request starting HTTP/1.1 GET https://localhost:44313/api/reporting/reports/clients.rdlx/info  
  dbug: Microsoft.AspNetCore.Routing.RouteBase[1]
        Request successfully matched the route with name '(null)' and template '/api/reporting/reports/{reportId}/info'
  dbug: Microsoft.AspNetCore.Server.Kestrel[9]
  
  

  Anyone experienced this? In the basic non-react app it works fine!

  

  2158×1566 346 KB

• 

  mohitg

  

  • Post Options:
  • Link
    Copy

  Posted 24 March 2020, 3:35 pm EST

  Hello,

  I have created the .Net core React application for you. Please refer to the attached application. You can refer to the following documentation to use ARJS in React.
  
  https://www.grapecity.com/activereportsjs/docs/GettingStarted/QuickStart/QuickStart-React

  Thanks,
  
  Mohit
  
  WebApplication19.zip

• 

  david

  • Post Options:
  • Link
    Copy

  Posted 25 March 2020, 7:49 am EST

  Thank you for your help and nice examples. Those make sense and we will most likely have some reports that we pull data from the server and populate the report.

  I created the attached report using AR Designer on windows (notice it has a connection string to a db). It works in the AR 14 Design. We call that using the middleware on a .net core web api and the report is generated on the server.

  Make sense?

  clients.rdlx.zip

• 

  david

  • Post Options:
  • Link
    Copy

  Posted 25 March 2020, 8:52 am EST

  I figured out the issue. Just to recap the issue: reports created with ActiveReports 14 designer with embedded sql connection would not render using JSViewer. It would always error out with an undefined. Our setup is .NET Core 3.1, React.JS running separately. My issues was how I was creating the viewer and opening the report: Incorrect: ```
  
  let viewer = GrapeCity.ActiveReports.JSViewer.create({
  
  element: ‘#client-report’,
  
  reportID: ‘clients.rdlx’,
  
  reportService: {
  
  url: url,
  
  securityToken: authHeader().Authorization
  
  }
  
  });
  
  viewer.openReport();

  
  Correct:
  

  // eslint-disable-next-line no-undef
  
  let viewer = GrapeCity.ActiveReports.JSViewer.create({
  
  element: ‘#client-report’,

          reportService: {
              url: url,
              securityToken: authHeader().Authorization
          }
      });
     viewer.openReport('clients.rdlx');
  

  Setting the report id does not work!
  
  This is an example project if you get stuck: https://www.grapecity.com/blogs/how-to-use-activereports-14-in-asp-dot-net

• 

  mohitg

  

  • Post Options:
  • Link
    Copy

  Posted 25 March 2020, 2:47 pm EST

  Hello,

  I am glad your issue is resolved. I thought you are using the ARJS instead of the AR14. AR14 and ARJS are different products.
  
  Please post the question on the following forum to avoid confusion.
  
  https://www.grapecity.com/forums/ar-dev

  Thanks,
  
  Mohit