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.v24.2.dll

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public TBuilder OnServerError(
    string callback
)

VB.NET

Public Function OnServerError(
    callback As String
) As TBuilder

Parameters

Name	Type	Description
callback	String	The name of a JavaScript function or entire JavaScript function code that runs when the OnServerError event occurs.

Returns

Type	Description
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:

ASP.NET Core

<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()
} 

Angular

  report-viewer.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

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) { }
}

React

'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

Vue

<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>

***