Dashboards: Cannot read properties of undefined (reading 'length') on Dashboard Refresh

[MakinoharaShoko]

What happened?

I am developing a Grafana plugin that supports streaming data and involves a backend. The streaming data works fine when I first land on it, but when I click on "Refresh Dashboard", the streaming breaks and the console shows the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at PanelQueryRunner.ts:157:55
at Array.map ()
at PanelQueryRunner.ts:155:49
at map.js:7:37
at E._next (OperatorSubscriber.js:15:21)
at Q.next (Subscriber.js:34:18)
at y._subscribe (innerFrom.js:51:24)
at y._trySubscribe (Observable.js:38:25)
at Observable.js:32:31
at u (errorContext.js:19:9)

What did you expect to happen?

Data flow executes normally after refresh

Did this work before?

No

How do we reproduce it?

1. Set up a data source that supports streaming data.
2. Use getGrafanaLiveSrv().getDataStream to get a data stream from the backend.
3. Refresh the dashboard while the data stream is running.

Is the bug inside a dashboard panel?

No response

Environment (with versions)?

Grafana: v10.3.3 (2527612)
OS: Linux Ubuntu 20.04
Browser: Chrome 125.0.6422.61

Grafana platform?

None

Datasource(s)?

No response

[tolzhabayev]

Hey @MakinoharaShoko,
could you please share a repository / branch that we could take a look at?

As an alternative, please take a look at our examples repository https://github.com/grafana/grafana-plugin-examples/tree/main/examples/datasource-streaming-backend-websocket to see if it helps you figure out the difference in behaviour.

And as usual recommendation - try latest grafana version to see if it fixes the issue.

[MakinoharaShoko]

OK. You can see https://github.com/dolphindb/grafana-datasource-next/blob/f13a0dbe4c2541d06421155955acbfdb0743bca4/src/datasource.ts#L20

I have to return a new Observable and manually subscribe the events of each streaming query.

But when I use merge to simply merge the streaming and non-streaming query like the code below, and start a streaming query, then get some data, and refresh the panel, the error occurs.

  query(request: DataQueryRequest<DdbDataQuery>): Observable<DataQueryResponse> {
    const { range: { from, to }, scopedVars } = request

    const commonQueriesTargets = request.targets.filter(query => !query.is_streaming).map(query => {
      const code = query.queryText ?? '';
      const tplsrv = getTemplateSrv();
      (from as any)._isUTC = false;
      (to as any)._isUTC = false;
      const code_ = tplsrv
        .replace(
          code //@ts-ignore
            .replaceAll(
              /\$(__)?timeFilter\b/g,
              () =>
                'pair(' +
                from.format('YYYY.MM.DD HH:mm:ss.SSS') +
                ', ' +
                to.format('YYYY.MM.DD HH:mm:ss.SSS') +
                ')'
            ).replaceAll(
              /\$__interval\b/g,
              () =>
                tplsrv.replace('$__interval', scopedVars).replace(/h$/, 'H')
            ),
          scopedVars,
          var_formatter
        )
      return {
        ...query, queryText: code_
      }
    });
    const streamingQueries = request.targets.filter(query => query.is_streaming);

      /**
       * non-streaming
       */
      const commonRequest = { ...request, targets: commonQueriesTargets };
      const result = super.query(commonRequest);
      // streaming
      const observables = streamingQueries.map((query) => {
        return getGrafanaLiveSrv().getDataStream({
          addr: {
            scope: LiveChannelScope.DataSource,
            namespace: this.uid,
            path: `ws/streaming-${query.refId}-${query.streaming?.table ?? ''}`,
            data: {
              ...query,
            },
          },
        });
      });

      return merge(result,...observables)
  }

If I do not use merge but mannual use Observer to handle each event ,it works fine.

[oshirohugo]

I've created a minimal example by modifying the scaffold project created by @grafana/create-plugin. The example merges a non-streaming query and a streaming query as the issue describes. You can see the result in this branch: https://github.com/oshirohugo/xx-110724-datasource/tree/combine-stream-and-query

In this example, we are creating streaming connection to a backend with getDataStream , a query using the super.query and then merging the observables in the same order showed by the example code previously provided:

  query(request: DataQueryRequest<MyQuery>): Observable<DataQueryResponse> {

    const superReturn = super.query(request);

    const observables = request.targets.map((target, index) => {
      const query = defaults(target, DEFAULT_QUERY);

      return getGrafanaLiveSrv().getDataStream({
        addr: {
          scope: LiveChannelScope.DataSource,
          namespace: this.uid,
          path: `my-ws/custom-${query.lowerLimit}-${query.upperLimit}-${query.tickInterval}`,
          data: {
            ...query,
          },
        },
      });
    });

    return merge(superReturn, ...observables);
  }

and everything works fine.

Here the changes done in the scaffold create plugin example are emphasized:
https://github.com/oshirohugo/xx-110724-datasource/pull/1/files

Maybe there is something wrong with the data that you are returning from the backend.

@MakinoharaShoko , please let us know if there is something we failed to cover with the minimal example.

[MakinoharaShoko]

Thank you for your reply!
Just now I tested the data source in the repository you provided on v10.4.0 (03f502a), but the error still occurred.
I created a query like this:

During the first query, everything ran normally, but when I pressed refresh, an error occurred.

Follow is an image that shows the version and the error message side by side.

[MakinoharaShoko]

I also tested in the latest version and the issue still occurs. You can also try changing the time range while streaming, and you will also encounter such an error message.

[ryantxu]

@MakinoharaShoko you have waded into the most complex bits here! It looks like your error is hitting this line:
https://github.com/grafana/grafana/blob/main/public/app/features/query/state/PanelQueryRunner.ts#L163

If you can find a fix in the panel query runner, we are all ears -- but I assume the easier fix is in the data source. It looks like the data source is likely sending a packet that is missing the series property. Can you verify that that exists?

[ryantxu]

If you can find a way to reproduce with the testdata source, we can help debugging/fixing better