| প্ল্যাটফর্ম বেছে নিন: | iOS+ Android ওয়েব Flutter Unity |
নেটওয়ার্ক বান্ডলিং অপ্টিমাইজ করতে, ওয়েব অ্যাপ প্রোডাকশনে কোড নেম কম্পাইল, ছোট ও স্ক্র্যাম্বল করে। সোর্স ম্যাপ ছাড়া, Crashlytics ড্যাশবোর্ডে ক্র্যাশ রিপোর্ট ছোট করা এবং অস্পষ্ট স্ট্যাক ট্রেস দেখায়।
আপনার স্ট্যাক ট্রেস ডি-অবফাসকেট করতে এবং আপনার ত্রুটি রিপোর্টে আসল ফাইলের নাম এবং লাইন
নম্বর দেখাতে, Firebase-এ আপনার সোর্স ম্যাপ (.js.map ফাইল) আপলোড করতে Firebase CLI কমান্ড ব্যবহার করুন।
পূর্বশর্ত
সোর্স ম্যাপ আপলোড করার আগে, আপনার কাছে Firebase CLI v15.35.0 বা তার পরবর্তী ভার্সন ইনস্টল করা আছে কিনা তা নিশ্চিত করুন। Firebase CLI কীভাবে ইনস্টল বা আপডেট করবেন তা জানুন।
ধাপ ১: আপনার ফ্রেমওয়ার্ক বিল্ডে সোর্স ম্যাপ জেনারেশন চালু করুন
আপনার অ্যাপ তৈরির প্রসেস চলাকালীন প্রোডাকশন সোর্স (.js.map) ফাইল তৈরি করতে আপনার ফ্রন্টএন্ড ফ্রেমওয়ার্ক বা বান্ডলার কনফিগার করুন:
Angular
Angular-এ, আপনাকে অবশ্যই আপনার angular.json ওয়ার্কস্পেস ফাইলের মধ্যে sourceMap বিকল্পটি কনফিগার করতে হবে অথবা --source-map CLI ওভাররাইড ফ্ল্যাগ পাস করতে হবে:
বিকল্প ১ (সাজেস্ট করা হয়েছে): angular.json পরিবর্তন করুন
আপনার angular.json ফাইল খুলুন এবং আপনি যে নির্দিষ্ট বিল্ড কনফিগারেশন
টার্গেট করতে চান (যেমন development বা production) সেটি খুঁজে নিন।
ঠিক options বা configurations ব্লকের অধীনে sourceMap প্যারামিটার সেট করুন:
"projects": {
"APP_NAME": {
"architect": {
"build": {
"options": {
"sourceMap": true
},
"configurations": {
"production": {
"sourceMap": {
"scripts": true,
"vendor": false
}
}
}
}
}
}
}
বিকল্প ২: কমান্ড-লাইন ওভাররাইড
একবার যাচাইকরণ বিল্ড বা ডিবাগিং সেশনের জন্য আপনার যদি শুধুমাত্র সোর্স ম্যাপের প্রয়োজন হয়, তাহলে আপনার Angular CLI বিল্ড কমান্ডে সরাসরি --source-map ফ্ল্যাগ যোগ করুন:
ng build --configuration production --source-map
Next.js
প্রোডাকশন বিল্ডের সময় ব্রাউজার সোর্স ম্যাপ জেনারেশন চালু করতে
আপনার next.config.ts (বা next.config.js) ফাইল আপডেট করুন। এর জন্য
productionBrowserSourceMaps-কে true-এ সেট করুন:
// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
// Enable browser source map emission for Crashlytics stack trace de-obfuscation
productionBrowserSourceMaps: true,
// ... rest of your Next.js configuration
};
export default nextConfig;
Next.js আপনার প্রোজেক্ট রুটের .next ডিরেক্টরির মধ্যে জেনারেট করা ক্লায়েন্ট বান্ডেল ও সোর্স ম্যাপ .js.map ফাইল
স্টোর করে।
React / Vite
আপনার React অ্যাপ যদি বিল্ড বান্ডলার হিসেবে Vite ব্যবহার করে, তাহলে আপনার
vite.config.ts ফাইল আপডেট করুন যাতে এর বিল্ড অপশনের মধ্যে সোর্স ম্যাপ এমিট করা যায়:
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
// Emit sourcemap files for Crashlytics upload
sourcemap: true,
},
});
Vite ডিফল্ট হিসেবে dist ডিরেক্টরির মধ্যে জেনারেট করা আউটপুট বান্ডেল ও .js.map ফাইল
স্টোর করে।
ধাপ ২: Firebase CLI ব্যবহার করে সোর্স ম্যাপ আপলোড করুন
আপনার ফ্রেমওয়ার্ক প্রোডাকশন বান্ডেল তৈরি করার পরে এবং .js.map
ফাইল জেনারেট করার পরে, firebase crashlytics:sourcemap:upload
কমান্ড ব্যবহার করে সোর্স ম্যাপ আপলোড করুন:
firebase crashlytics:sourcemap:upload \
--project PROJECT_ID \
--app FIREBASE_APP_ID \
--debug DIRECTORY
এই কমান্ডটি প্রদত্ত DIRECTORY পাথের (dist বা .next) মধ্যে থাকা সমস্ত .js.map ফাইল রিকার্সিভলি সার্চ করে এবং সিম্বল ম্যাপিংয়ের জন্য সেগুলি Cloud Storage-এ আপলোড করে।
ধাপ ৩: সোর্স ম্যাপ ম্যানেজ করা
আপনার ওয়েব অ্যাপ অ্যাসেটের পাশাপাশি সোর্স ম্যাপ জেনারেট করলে তা সর্বজনীন ব্রাউজার অনুরোধের
কাছে প্রকাশ হয়ে যেতে পারে, যার ফলে আপনার আসল সোর্স কোড
লিক হয়ে যেতে পারে। আপনি ডি-অবফাসকেট করা স্ট্যাক ট্রেস না হারিয়েই এটি প্রতিরোধ করতে পারেন। এর জন্য
আপনার ওয়েব সার্ভার কনফিগার করে .js.map ফাইলে সর্বজনীন অ্যাক্সেস বন্ধ করতে পারেন অথবা
--clean ফ্ল্যাগ firebase crashlytics:sourcemap:upload-এ পাস করে
.js.map ফাইল Firebase-এ আপলোড করার পরে
আপনার লোকাল বিল্ড ডিরেক্টরি থেকে অটোমেটিক মুছে দিতে পারেন।
আপনার বিল্ড পাইপলাইনে অটোমেট করুন
ডেপ্লয় করার আগে Crashlytics-এ সোর্স ম্যাপ অটোমেটিক আপলোড করতে এবং লোকাল
.js.map ফাইল মুছে দিতে, --clean ফ্ল্যাগ firebase crashlytics:sourcemap:upload-এ পাস করার জন্য
package.json ফাইলে আপনার build স্ক্রিপ্ট আপডেট করুন:
Angular
"scripts": {
"build": "ng build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}
Next.js
"scripts": {
"build": "next build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug .next"
}
React / Vite
"scripts": {
"build": "vite build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}
পরবর্তী ধাপ
- ক্র্যাশ রিপোর্ট কাস্টমাইজ করা — কীভাবে হ্যান্ডেল করা ব্যতিক্রম রিপোর্ট করতে হয়, আপনার ডি-অবফাসকেট করা স্ট্যাক ট্রেসের সাথে কাস্টম কী যোগ করতে হয় এবং স্যাম্পলিং কনফিগার করতে হয় তা জানুন।