Kibana 6.1.1自定义可视化插件报错：无法读取'group'属性

嘿，我之前开发Kibana 6.x自定义可视化插件时也踩过这个坑，这个错误大概率是可视化类型注册环节的配置缺失导致的，咱们一步步来排查：

1. 先检查插件的核心配置文件kibana.json #

Kibana 6.x要求所有插件根目录下必须有这个配置文件，用来识别插件的基本信息，如果缺失或配置不全，会导致插件加载异常，间接引发这个错误。你需要确保文件存在且包含以下关键内容：

{
  "id": "morta-custom-vis",
  "version": "6.1.1",
  "kibanaVersion": "6.1.1",
  "name": "Morta Hello World Visualization",
  "description": "A simple static content visualization",
  "type": "plugin"
}

• 注意kibanaVersion必须和你的Kibana版本完全一致（6.1.1），否则插件会被拒绝加载。

2. 重点检查可视化注册代码（你的morta.js） #

这个错误最直接的原因就是注册可视化类型时漏掉了group字段。Kibana需要用这个字段把你的可视化归类到对应的分组（比如"Basic"、"Data"），如果没有这个字段，渲染可视化选择界面时就会读取到undefined的group属性。

正确的注册代码应该包含group字段，示例如下：

import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
import MortaVisController from './controllers/morta_vis_controller';
import MortaVisTemplate from './templates/morta_vis.html';
import MortaVisOptionsTemplate from './templates/morta_vis_options.html';

VisTypesRegistryProvider.register(() => ({
  name: 'morta-vis',
  title: 'Morta Hello World',
  icon: 'fa-smile-o',
  description: 'Displays a simple hello world message',
  // 必须指定分组，比如放到基础分组里
  group: 'basic',
  visualization: MortaVisController,
  visConfig: {
    defaults: {
      displayText: "hello world"
    },
    template: MortaVisTemplate
  },
  editorConfig: {
    optionsTemplate: MortaVisOptionsTemplate
  },
  // 因为是静态展示，不需要搜索数据源，设置为false
  requiresSearch: false,
}));

• 确认你的morta.js里有没有这个group字段，这是解决问题的关键。

3. 验证控制器与模板的正确性 #

控制器代码示例： #

确保控制器正确注入依赖并绑定数据，比如：

import { uiModules } from 'ui/modules';
const module = uiModules.get('app/morta-custom-vis');

module.controller('MortaVisController', function ($scope) {
  // 从可视化配置中获取文本，默认显示hello world
  $scope.displayText = $scope.vis.params.displayText || "hello world";
});

• 如果控制器加载失败，会导致可视化类型注册不完整，也可能引发类似错误。

模板文件示例： #

主模板（morta_vis.html）保持简洁：

<div class="morta-vis-wrapper">
  <h3>{{displayText}}</h3>
</div>

选项模板（morta_vis_options.html）如果不需要复杂配置，可简化为：

<div class="form-group">
  <label>Custom Display Text</label>
  <input type="text" ng-model="vis.params.displayText" class="form-control">
</div>

• 确保模板文件的路径和你在注册代码中导入的路径完全一致。

4. 最后验证插件加载状态 #

• 启动Kibana时，查看控制台日志，确认有没有类似Plugin morta-custom-vis@6.1.1 loaded的输出，如果没有，说明插件没有被正确识别，检查插件是否放在Kibana的plugins目录下，或者用--plugin-path参数指定插件路径。
• 清理Kibana的缓存：删除Kibana安装目录下的optimize文件夹，然后重启Kibana，避免旧缓存导致的代码异常。

按照上面的步骤排查，尤其是检查group字段的存在性，应该就能解决这个错误啦！

内容的提问来源于stack exchange，提问作者Morta1