Back to Devexpress

WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents>.OnServerError(String) Method

xtrareports-devexpress-dot-aspnetcore-dot-reporting-dot-webdocumentviewer-dot-webdocumentviewerclientsideeventsbuilderbase-2-dot-onservererror-x28-system-dot-string-x29.md

latest7.2 KB
Original Source

WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents>.OnServerError(String) Method

Specifies the JavaScript function that handles the client-side OnServerError event.

Namespace : DevExpress.AspNetCore.Reporting.WebDocumentViewer

Assembly : DevExpress.AspNetCore.Reporting.v25.2.dll

NuGet Package : DevExpress.AspNetCore.Reporting

Declaration

csharp
public TBuilder OnServerError(
    string callback
)
vb
Public Function OnServerError(
    callback As String
) As TBuilder

Parameters

NameTypeDescription
callbackString

The name of a JavaScript function or entire JavaScript function code that runs when the OnServerError event occurs.

|

Returns

TypeDescription
TBuilder

The WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents> object that can be used for method chaining.

|

Remarks

The client-side OnServerError event is raised when a server-side error occurs. Handle this event to execute custom code when a Fetch request completes with an error.

The handler function receives two parameters. The first parameter is the client-side DocumentViewer that exposes the IPreviewModel interface (or the JSReportViewer object). The second is an object with the Error property, which contains information about an error:

The following code snippet logs error details and displays an alert box when a server error occurs:

cshtml
<script type="text/javascript" id="script">
    function onServerError(s,e) {
        console.log(JSON.stringify(e.Error.getRequestDetails()));
        console.log(e.Error.errorThrown);
        let actionKey = e.Error.getRequestDetails().actionKey;
        let error = e.Error.errorThrown;
        alert("Server error" + "\r\nAction: " + actionKey + "\r\nMessage: " + error);
    }
</script>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure => configure.OnServerError("onServerError"))
        .Bind("TestReport");
    @viewerRender.RenderHtml()
}

report-viewer.html

html
<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (OnServerError)="onServerError($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

report-viewer.ts

typescript
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
//...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    onServerError(event) {
        console.log(JSON.stringify(event.args.Error.getRequestDetails()));
        console.log(event.args.Error.errorThrown);
        let actionKey = event.args.Error.getRequestDetails().actionKey;
        let error = event.args.Error.errorThrown;
        alert("Server error" + "\r\nAction: " + actionKey + "\r\nMessage: " + error);
    }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}
typescript
'use client';
import ReportViewer, { Callbacks, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
    const onServerError = (event: any): void => {
        console.log(event.args.Error.errorThrown);
        let error = event.args.Error.errorThrown;
        alert("Server error\r\n" + "Message: " + error);
    };

    return (
        <ReportViewer reportUrl="NoReport">
            <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
            <Callbacks OnServerError={onServerError} />
        </ReportViewer>
    )
}

export default App
javascript
<template>
<div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-webdocumentviewer';

export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
    mounted() {
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
                // Specify the backend application URL.
                host: "https://localhost:44370/",
                // Use this line if you use an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line if you use an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };
        var callbacks = {  
            OnServerError: function(s, e){
                console.log(JSON.stringify(e.Error.getRequestDetails()));
                console.log(e.Error.errorThrown);
                let actionKey = e.Error.getRequestDetails().actionKey;
                let error = e.Error.errorThrown;
                alert("Server error" + "\r\nAction: " + actionKey + "\r\nMessage: " + error);
            }
        };    
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};

</script>

***

See Also

Reporting Application Diagnostics

Handle the Report Designer's Server-Side Errors

WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents> Class

WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents> Members

DevExpress.AspNetCore.Reporting.WebDocumentViewer Namespace