WebDocumentViewerClientSideEventsBuilder.OnServerError(String) Method

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

Namespace: DevExpress.AspNetCore.Reporting.WebDocumentViewer

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

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public WebDocumentViewerClientSideEventsBuilder OnServerError(
    string callback
)

VB.NET

Public Function OnServerError(
    callback As String
) As WebDocumentViewerClientSideEventsBuilder

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

import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-webdocumentviewer';
import './App.css';

class ReportViewer extends React.Component {
    constructor(props) {
            super(props);
            this.reportUrl = ko.observable("TestReport");
            this.previewModel = ko.observable();
            this.requestOptions = {
            // Specify the backend ASP.NET Core application URL.
            host: "https://localhost:44370",
            invokeAction: "/DXXRDV"
        };

        this.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);
            }
        };
    };

    render() {
        return (
          <div>
            <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
          </div>
        );
    }
    componentDidMount() {
        ko.applyBindings({
            reportUrl: this.reportUrl,
            viewerModel: this.previewModel,
            requestOptions: this.requestOptions,
            callbacks: this.callbacks
        }, this.refs.viewer);
    }
    componentWillUnmount() {
        ko.cleanNode(this.refs.viewer);
    }
};

function App() {
return (<div style={{ width: "100%", height: "1000px" }}>
    <ReportViewer />
</div>);
}

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>