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

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

  • Posted 24 March 2020, 6:56 am 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:



    Json:


    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!

  • Replied 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
  • Replied 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
  • Marked as Answer

    Replied 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
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels