Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

importing pivot-grid causes FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory #373

Open
Bopsi opened this issue Jun 23, 2020 · 0 comments

Comments

@Bopsi
Copy link

Bopsi commented Jun 23, 2020

I have vuejs2 web application which uses DevExtreme components. It has quite a few components which uses DataGrid, and only one component which uses PivotGrid.

When I run it locally with npm run serve, it works as expected. When I try to build it using npm run build it gives following error -

npm run build
> some-project@0.1.0 build /home/bopsi/Projects/some-project
> vue-cli-service build
⠏  Building for production...
<--- Last few GCs --->
[60971:0x2210a20]    84981 ms: Scavenge 1332.6 (1414.2) -> 1332.3 (1414.7) MB, 3.3 / 0.0 ms  (average mu = 0.343, current mu = 0.399) allocation failure 
[60971:0x2210a20]    84984 ms: Scavenge 1332.9 (1414.7) -> 1332.7 (1415.7) MB, 2.7 / 0.0 ms  (average mu = 0.343, current mu = 0.399) allocation failure 
[60971:0x2210a20]    84990 ms: Scavenge 1333.3 (1415.7) -> 1333.0 (1416.2) MB, 4.1 / 0.0 ms  (average mu = 0.343, current mu = 0.399) allocation failure 
<--- JS stacktrace --->
==== JS stack trace =========================================
    0: ExitFrame [pc: 0x218bffb5452b]
    1: StubFrame [pc: 0x218bffaa25d4]
Security context: 0x0dcecf72ee11 <JSObject>
    2: _replaceInStringNode [0x1e693e2db331] [/home/bopsi/Projects/some-project/node_modules/webpack-sources/lib/ReplaceSource.js:~194] [pc=0x218c00dfca63](this=0x3a3d81596ce1 <Source map = 0x23284e8905e9>,output=0x3b0c7f415bb9 <JSArray[1611]>,replace=0x3b0c7f415b69 <ReplacementEnumerator map = 0xdae8743a...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x7f54068d946c node::Abort() [/lib/x86_64-linux-gnu/libnode.so.64]
 2: 0x7f54068d94b5  [/lib/x86_64-linux-gnu/libnode.so.64]
 3: 0x7f5406b05e6a v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/lib/x86_64-linux-gnu/libnode.so.64]
 4: 0x7f5406b060e1 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/lib/x86_64-linux-gnu/libnode.so.64]
 5: 0x7f5406ea0c66  [/lib/x86_64-linux-gnu/libnode.so.64]
 6: 0x7f5406eb2043 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/lib/x86_64-linux-gnu/libnode.so.64]
 7: 0x7f5406eb2930 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/lib/x86_64-linux-gnu/libnode.so.64]
 8: 0x7f5406eb491d v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/lib/x86_64-linux-gnu/libnode.so.64]
 9: 0x7f5406eb4975 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/lib/x86_64-linux-gnu/libnode.so.64]
10: 0x7f5406e80dda v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/lib/x86_64-linux-gnu/libnode.so.64]
11: 0x7f540710c31e v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/lib/x86_64-linux-gnu/libnode.so.64]
12: 0x218bffb5452b 
Aborted (core dumped)
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! some-project@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 134
npm ERR! 
npm ERR! Failed at the some-prroject@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bopsi/.npm/_logs/2020-06-23T09_12_51_147Z-debug.log

Troubleshooting:

  1. Initially I thought it's heap space issue, so I tried running build with npm run build -- --max-old-space-size=8192. It gave same result. FAILURE
  2. Then I tried removing the PositionViewer.vue, the last compnent I added to the project and the build was a SUCCESS. So definitely root-cause is within this file.
  3. Commented out only element. FAILURE
  4. Commented out api call in mounted hook. FAILURE
  5. Commented out PivotGrid related imports in the component instead to removing the whole component. SUCCESS.
    There is definitely something wrong with the imports, which causes memoryleak and fails the build. Listing down the relevant files -

PositionViewer.vue -

<template>
    <div class="content-body">
        <div class="container pd-x-0">
            <div class="d-sm-flex align-items-center justify-content-between mg-b-5 mg-lg-b-5 mg-xl-b-5">
                <div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrumb-style1 mg-b-10">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">Foo</a></li>
                            <li aria-current="page" class="breadcrumb-item active">Position Viewer</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <div class="row row-xs">
                <div class="col-lg-12 col-xl-12 mg-t-10">
                    <div class="card">
                        <div class="card-header pd-x-10 pd-y-8 d-md-flex align-items-center justify-content-between">
                            <h6 class="mg-b-0">Bar Positions</h6>
                        </div>
                        <div class="card-body pd-5 w-100 ht-500 overflow-auto">
<!-- Build succeeds when commenting out this section -->
<!--                            <DxPivotGrid id="positions"-->
<!--                                         :allow-sorting-by-summary="true"-->
<!--                                         :allow-sorting="true"-->
<!--                                         :allow-filtering="true"-->
<!--                                         :allow-expand-all="true"-->
<!--                                         :show-borders="true"-->
<!--                                         :data-source="dataSource">-->
<!--                                <DxFieldChooser :enabled="true"-->
<!--                                                :allow-search="true"-->
<!--                                                :apply-changes-mode="applyChangesMode"/>-->
<!--                                <DxExport :enabled="true"-->
<!--                                          file-name="Position Viewer"/>-->
<!--                                <DxScrolling mode="virtual"/>-->
<!--                            </DxPivotGrid>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // Build succeeds when commenting out this section
    // import {DxPivotGrid, DxExport, DxFieldChooser, DxScrolling} from 'devextreme-vue/pivot-grid';
    import {mapGetters} from "vuex";

    export default {
        name: "PositionViewer",
        // Build succeeds when commenting out this section
        // components: {DxPivotGrid, DxExport, DxFieldChooser, DxScrolling},
        computed: {
            ...mapGetters(["currentUser", "currentOrg"])
        },
        data() {
            return {
                dataSource: {
                    store: [],
                    fields: []
                },
                gridFields: [
                    {
                        caption: 'Exposure Type',
                        dataField: 'exposureType',
                        width: 100,
                        area: 'row',
                        expanded: true
                    },
                    {
                        caption: 'Buy or Sell',
                        dataField: 'buyOrSell',
                        width: 100,
                        area: 'row',
                        expanded: true
                    },
                    /* 59 more fields */
                ],
                applyChangesMode: 'instantly'
            };
        },
        mounted() {
            this.getPositions();
        },
        methods: {
            async getPositions() {
                try {
                    let {data}      = await this.$http.get(`/some-api/positions`);
                    this.dataSource = {
                        fields: this.gridFields,
                        store: data
                    }
                } catch(e) {
                    this.$toastr.e("Cannot get position viewers","Error");
                }
            }
        }
    }
</script>

<style scoped>

</style>

package.json -

{
    "name": "some-project",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "test:e2e": "vue-cli-service test:e2e",
        "test:unit": "vue-cli-service test:unit"
    },
    "dependencies": {
        "axios": "^0.19.0",
        "bootstrap": "^4.3.1",
        "ckeditor4-vue": "^0.1.0",
        "connect-history-api-fallback": "^1.5.0",
        "core-js": "^2.6.5",
        "cors": "^2.8.5",
        "devextreme": "^19.1.4",
        "devextreme-vue": "^19.1.4",
        "express": "^4.16.4",
        "express-async-errors": "^3.1.1",
        "feather-icons": "^4.22.1",
        "jquery": "^3.4.1",
        "jspdf": "^1.5.3",
        "jspdf-autotable": "^3.2.11",
        "jwt-decode": "^2.2.0",
        "lodash": "^4.17.15",
        "moment": "^2.26.0",
        "perfect-scrollbar": "^1.4.0",
        "popper.js": "^1.15.0",
        "uuid": "^3.3.3",
        "vee-validate": "^2.2.13",
        "vue": "^2.6.10",
        "vue-axios": "^2.1.4",
        "vue-feather": "^1.0.0",
        "vue-feather-icon": "^1.2.0",
        "vue-feather-icons": "^5.0.0",
        "vue-multiselect": "^2.1.6",
        "vue-property-decorator": "^8.2.1",
        "vue-router": "^3.0.3",
        "vue-signature-pad": "^2.0.0",
        "vue-toastr": "^2.1.2",
        "vuex": "^3.0.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.9.0",
        "@vue/cli-plugin-e2e-cypress": "^3.9.0",
        "@vue/cli-plugin-unit-mocha": "^3.9.0",
        "@vue/cli-service": "^3.9.0",
        "@vue/test-utils": "1.0.0-beta.29",
        "chai": "^4.1.2",
        "vue-template-compiler": "^2.6.10"
    }
}

I am guessing this is a bug in pivot-grid module in devextreme-vue package itself. If that is the case then which specific version fixes it? If root-cause is something else then please point that out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant